как поддерживать активную вкладку bootstrap - PullRequest
0 голосов
/ 19 июня 2020

Я написал этот фрагмент кода для обработки вкладки bootstrap, он работает нормально, но я хочу использовать простой способ поддерживать активную вкладку.

Я тестирую сеанс ["вкладка"] в режиме просмотра действий, если он работает не создано раньше, тогда показывать tab1 по умолчанию, но если вызов поступает с другой страницы, я должен показать текущую вкладку на основе значения сеанса, которое содержит текущее значение вкладки

 public ActionResult View_All_SupportTickets()
    {





        if (Session["tab"] == null)

        {

            Session["tab"] = "tab1";
        }


        return View();



    }


    [HttpGet]
    public ActionResult GetPartialView(string id)
    {
        switch (id)
        {
            case "tab1":
                var query = (from st in Db.Support_Teckets ............

                              }).ToList().OrderByDescending(a => a.Created_Date);

                Session["tab"]="tab1";

                return PartialView("View_All_SupportTickets_tab1", query);

            case "tab2":

                var query2 = (from st in Db.Support_Teckets .............


                             }).ToList().OrderByDescending(a => a.Created_Date);


                Session["tab"] = "tab2";

                return PartialView("View_All_SupportTickets_tab2" , query2);

            case "tab3":


                var query3 = (from st in Db.Support_Teckets .............
                             ................................


                             }).ToList().OrderByDescending(a => a.Created_Date);



                Session["tab"] = "tab3";


                return PartialView("View_All_SupportTickets_tab3" , query3);


        }
        return RedirectToAction("View_All_SupportTickets");
    }

это страница просмотра, которая показывает вкладки

<div class="container">
<div class="row">
    <div class="col-xs-12">





        <div class="tabs" id="tabs">
            <ul class="nav nav-tabs">
                <li><a href="#tab1" data-toggle="tab" class="tab" data-id="tab1">البلاغات الجديدة</a></li>
                <li><a href="#tab2" data-toggle="tab" class="tab" data-id="tab2">جميع البلاغات</a></li>
                <li><a href="#tab3" data-toggle="tab" class="tab" data-id="tab3">البلاغات المتأخرة</a></li>
            </ul>
        </div>

        <div class="tab-content" id="tabs">
            <div class="tab-pane" id="tab1"></div>
            <div class="tab-pane" id="tab2"></div>
            <div class="tab-pane" id="tab3"></div>
        </div>

        </div>

    </div>
</div>

jquery

<script type="text/javascript">

    $(document).ready(function () {

        if ('@Session["tab"]' == "tab1") {
            activaTab('tab1');
        }


         if ('@Session["tab"]' == "tab2") {
            activaTab('tab2');
        }

         if ('@Session["tab"]' == "tab3") {
            activaTab('tab3');
        }

    });


    function activaTab(tab) {

    $('.nav-tabs a[href="#' + tab + '"]').tab('show');

     $.ajax({
                 type: 'GET',
                url: '@Url.Action("GetPartialView", "etraining")',
                data: { 'id': tab },
                dataType: "html",
         success: function (data) {

             if (tab == "tab1") {
                 $('#tab1').html(data);
             }


               if (tab == "tab2") {
                 $('#tab2').html(data);
             }


               if (tab == "tab3") {
                 $('#tab3').html(data);


             }

                }
          });

    }

       
    $(function () {
        $('.tab').click(function () {
            var id = $(this).attr("data-id");

            if (id == "tab1") {

                $.ajax({
                    type: 'GET',
                    url: '@Url.Action("GetPartialView", "etraining")',
                    data: { 'id': id },
                    dataType: "html",
                    success: function (data) {
                         $('#tab1').html(data);
                    }
                });

            }

              if (id == "tab2") {

                $.ajax({
                    type: 'GET',
                    url: '@Url.Action("GetPartialView", "etraining")',
                    data: { 'id': id },
                    dataType: "html",
                    success: function (data) {
                         $('#tab2').html(data);
                    }
                });

            }



              if (id == "tab3") {

                $.ajax({
                    type: 'GET',
                    url: '@Url.Action("GetPartialView", "etraining")',
                    data: { 'id': id },
                    dataType: "html",
                    success: function (data) {
                         $('#tab3').html(data);
                    }
                });



            }

        });
    });

</script>

это однострочный код, который go возвращает на страницу вкладок и показывает страницу с текущим значением

   @Html.ActionLink("Back to List", "View_All_SupportTickets")

Я благодарен за ваш ответ

спасибо

...