Jquery 如何从具有分页列表的MVC局部视图设置活动选项卡_Jquery_Asp.net Mvc_Twitter Bootstrap

Jquery 如何从具有分页列表的MVC局部视图设置活动选项卡

jquery asp.net-mvc twitter-bootstrap

Jquery 如何从具有分页列表的MVC局部视图设置活动选项卡,jquery,asp.net-mvc,twitter-bootstrap,Jquery,Asp.net Mvc,Twitter Bootstrap,我一直试图找到如何在页面重新加载后维护活动选项卡，但没有成功。我已经搜索了所有地方，感觉我对jquery的了解达到了一个水平，我不确定我在寻找什么或者问什么以下将加载2个局部视图： Manage.cshtml <div> <ul class="nav nav-tabs"> <li class="active" id="surveyList"> <a href="#tab_1_1" data-toggle=

我一直试图找到如何在页面重新加载后维护活动选项卡，但没有成功。我已经搜索了所有地方，感觉我对jquery的了解达到了一个水平，我不确定我在寻找什么或者问什么

以下将加载2个局部视图：

Manage.cshtml

<div>
    <ul class="nav nav-tabs">
        <li class="active" id="surveyList">
            <a href="#tab_1_1" data-toggle="tab" class="tbs" data-info="survey-list" aria-expanded="True" id="openTab1">Edit/Lock</a>
        </li>
        <li class="" id="pagedList">
            <a href="#tab_1_2" data-toggle="tab" class="tbs" data-info="paged-list" aria-expanded="False" id="openTab2">Search</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="tab_1_1"><p>@Html.Action("_PartialViewDisplaySurveys", "Surveys")</p></div>
        <div class="tab-pane fade" id="tab_1_2"><p>@Html.Action("_PartialViewPagedSurveyList", "Surveys")</p></div>
    </div>
</div>

@model PagedList.IPagedList<SL>
@using PagedList.Mvc;

@using (Html.BeginForm("Manage", "Surveys", FormMethod.Get))
{
    <table class="table">
        <tr>
            <td>
                Find by Name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
                <input type="submit" value="Search" />
            </td>
        </tr>
    </table>
}

<table class="table">
    @using (@Html.BeginForm("Manage", "Surveys", FormMethod.Get))
    {

        <tr>
            <th>
                @Html.ActionLink("Survey Year", "Manage",
                 new
                 {
                     SortingOrder = ViewBag.YearSortParm,
                     SelectedSurveyYear = ViewBag.SelectedSurveyYear,
                     SelectedName = ViewBag.SelectedName,
                     SelectedStatus = ViewBag.SelectedStatus
                 })
            </th>
            <th>
                @Html.ActionLink("Name", "Manage",
                 new
                 {
                     SortingOrder = ViewBag.NameSortParm,
                     SelectedSurveyYear = ViewBag.SelectedSurveyYear,
                     SelectedName = ViewBag.SelectedName,
                     SelectedStatus = ViewBag.SelectedStatus
                 })
            </th>
            <th>
                @Html.ActionLink("Locked?", "Manage", new { SortingOrder = ViewBag.LockedSortParm })
            </th>
            <th>
                @Html.ActionLink("Open?", "Manage", new { SortingOrder = ViewBag.OpenSortParm })
            </th>
            <th>
                @Html.ActionLink("Status", "Manage",
                 new
                 {
                     SortingOrder = ViewBag.StatusSortParm,
                     SelectedSurveyYear = ViewBag.SelectedSurveyYear,
                     SelectedName = ViewBag.SelectedName,
                     SelectedStatus = ViewBag.SelectedStatus
                 })
            </th>
        </tr>
        <tr>
            @* Filtered List links here*@
            <th>
                @Html.DropDownList("SelectedSurveyYear",
             new SelectList(ViewBag.UniqueYears, "Value", "Text", "ViewBag.SelectedSurveyYear"),
             "All", new { onchange = "form.submit();" })
            </th>
            <th>
                @Html.DropDownList("SelectedUtilityName",
             new SelectList(ViewBag.UniqueUtilityNames, "Value", "Text", "ViewBag.SelectedUtilityName"),
             "All", new { onchange = "form.submit();" })
            </th>
            <th>
            </th>
            <th>
            </th>
            <th>
                @Html.DropDownList("SelectedStatus",
             new SelectList(ViewBag.UniqueStatuses, "Value", "Text", "ViewBag.SelectedStatus"),
             "All", new { onchange = "form.submit();" })
            </th>
        </tr>
    }

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(m => item.Survey)
            </td>
            <td>
                @Html.DisplayFor(m => item.Name)
            </td>
            <td>
                @Html.DisplayFor(m => item.Locked)
            </td>
            <td>
                @Html.DisplayFor(m => item.Open)
            </td>
            <td>
                @Html.DisplayFor(m => item.Status)
            </td>
        </tr>
    }
</table>
<br />
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

@Html.PagedListPager(Model, page => Url.Action("Manage",
    new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))








@行动（“_PartialViewDisplaySurveys”，“Surveys”）
@动作（“\u PartialViewPagedSurveyList”，“Surveys”）

第二个局部视图是分页列表：

\u PartialViewPagedSurveyList.cshtml

<div>
    <ul class="nav nav-tabs">
        <li class="active" id="surveyList">
            <a href="#tab_1_1" data-toggle="tab" class="tbs" data-info="survey-list" aria-expanded="True" id="openTab1">Edit/Lock</a>
        </li>
        <li class="" id="pagedList">
            <a href="#tab_1_2" data-toggle="tab" class="tbs" data-info="paged-list" aria-expanded="False" id="openTab2">Search</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="tab_1_1"><p>@Html.Action("_PartialViewDisplaySurveys", "Surveys")</p></div>
        <div class="tab-pane fade" id="tab_1_2"><p>@Html.Action("_PartialViewPagedSurveyList", "Surveys")</p></div>
    </div>
</div>

@model PagedList.IPagedList<SL>
@using PagedList.Mvc;

@using (Html.BeginForm("Manage", "Surveys", FormMethod.Get))
{
    <table class="table">
        <tr>
            <td>
                Find by Name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
                <input type="submit" value="Search" />
            </td>
        </tr>
    </table>
}

<table class="table">
    @using (@Html.BeginForm("Manage", "Surveys", FormMethod.Get))
    {

        <tr>
            <th>
                @Html.ActionLink("Survey Year", "Manage",
                 new
                 {
                     SortingOrder = ViewBag.YearSortParm,
                     SelectedSurveyYear = ViewBag.SelectedSurveyYear,
                     SelectedName = ViewBag.SelectedName,
                     SelectedStatus = ViewBag.SelectedStatus
                 })
            </th>
            <th>
                @Html.ActionLink("Name", "Manage",
                 new
                 {
                     SortingOrder = ViewBag.NameSortParm,
                     SelectedSurveyYear = ViewBag.SelectedSurveyYear,
                     SelectedName = ViewBag.SelectedName,
                     SelectedStatus = ViewBag.SelectedStatus
                 })
            </th>
            <th>
                @Html.ActionLink("Locked?", "Manage", new { SortingOrder = ViewBag.LockedSortParm })
            </th>
            <th>
                @Html.ActionLink("Open?", "Manage", new { SortingOrder = ViewBag.OpenSortParm })
            </th>
            <th>
                @Html.ActionLink("Status", "Manage",
                 new
                 {
                     SortingOrder = ViewBag.StatusSortParm,
                     SelectedSurveyYear = ViewBag.SelectedSurveyYear,
                     SelectedName = ViewBag.SelectedName,
                     SelectedStatus = ViewBag.SelectedStatus
                 })
            </th>
        </tr>
        <tr>
            @* Filtered List links here*@
            <th>
                @Html.DropDownList("SelectedSurveyYear",
             new SelectList(ViewBag.UniqueYears, "Value", "Text", "ViewBag.SelectedSurveyYear"),
             "All", new { onchange = "form.submit();" })
            </th>
            <th>
                @Html.DropDownList("SelectedUtilityName",
             new SelectList(ViewBag.UniqueUtilityNames, "Value", "Text", "ViewBag.SelectedUtilityName"),
             "All", new { onchange = "form.submit();" })
            </th>
            <th>
            </th>
            <th>
            </th>
            <th>
                @Html.DropDownList("SelectedStatus",
             new SelectList(ViewBag.UniqueStatuses, "Value", "Text", "ViewBag.SelectedStatus"),
             "All", new { onchange = "form.submit();" })
            </th>
        </tr>
    }

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(m => item.Survey)
            </td>
            <td>
                @Html.DisplayFor(m => item.Name)
            </td>
            <td>
                @Html.DisplayFor(m => item.Locked)
            </td>
            <td>
                @Html.DisplayFor(m => item.Open)
            </td>
            <td>
                @Html.DisplayFor(m => item.Status)
            </td>
        </tr>
    }
</table>
<br />
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

@Html.PagedListPager(Model, page => Url.Action("Manage",
    new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))

@model PagedList.IPagedList
@使用PagedList.Mvc；
@使用（Html.BeginForm（“管理”、“调查”、FormMethod.Get））
{
按名称查找：@Html.TextBox（“SearchString”，ViewBag.CurrentFilter为字符串）
}
@使用（@Html.BeginForm（“管理”、“调查”、FormMethod.Get））
{
@ActionLink（“调查年”、“管理”，
新的
{
排序顺序=ViewBag.yearSortParam，
SelectedSurveyYear=ViewBag.SelectedSurveyYear，
SelectedName=ViewBag.SelectedName，
SelectedStatus=ViewBag.SelectedStatus
})
@ActionLink（“名称”、“管理”，
新的
{
排序顺序=ViewBag.NameSortParm，
SelectedSurveyYear=ViewBag.SelectedSurveyYear，
SelectedName=ViewBag.SelectedName，
SelectedStatus=ViewBag.SelectedStatus
})
@ActionLink（“锁定？”，“管理”，新建{SortingOrder=ViewBag.LockedSortParm}）
@ActionLink（“打开？”，“管理”，新建{SortingOrder=ViewBag.OpenSortParm}）
@ActionLink（“状态”，“管理”，
新的
{
排序顺序=ViewBag.statusSortParam，
SelectedSurveyYear=ViewBag.SelectedSurveyYear，
SelectedName=ViewBag.SelectedName，
SelectedStatus=ViewBag.SelectedStatus
})
@*过滤列表链接在这里*@
@Html.DropDownList（“SelectedSurveyYear”，
新的选择列表（ViewBag.UniqueYears、“值”、“文本”、“ViewBag.SelectedSurveyYear”），
“全部”，新的{onchange=“form.submit（）；”}）
@Html.DropDownList（“SelectedUtilityName”，
新建选择列表（ViewBag.UniqueUtilityName、“值”、“文本”、“ViewBag.SelectedUtilityName”），
“全部”，新的{onchange=“form.submit（）；”}）
@Html.DropDownList（“SelectedStatus”，
新的选择列表（ViewBag.UniqueStatus、“值”、“文本”、“ViewBag.SelectedStatus”），
“全部”，新的{onchange=“form.submit（）；”}）
}
@foreach（模型中的var项目）
{
@DisplayFor（m=>item.Survey）
@DisplayFor（m=>item.Name）
@DisplayFor（m=>item.Locked）
@DisplayFor（m=>item.Open）
@DisplayFor（m=>item.Status）
}


@Model.PageCount的@页（Model.PageCountUrl.Action（“管理”，
新建{page，sortOrder=ViewBag.CurrentSort，currentFilter=ViewBag.currentFilter}）

在局部视图的底部，我一直在试图找到当前的活动标记，如果它是活动的，则将其保持活动状态。但是，在下面的示例中，即使它将pagedList元素设置为active，但它总是在单击任何内容后返回到第一个选项卡，因为（我知道）它在主视图中设置

<script>
    // find active tab
    var id = $('li.active').attr('id');

    $("form").submit(function (event) {
        alert(id);
        $("#tab_1_1").removeClass('tab-pane fade in active').addClass('tab-pane fade');
        $("#surveyList").removeClass('active');
        $("#tab_1_2").removeClass('tab-pane fade').addClass('tab-pane fade in active');
        $("#pagedList").addClass('active');

        var id2 = $('li.active').attr('id');
        alert(id2);
    });

    @* if ($('li .active'.attr('id')) == 'pagedList')
    {
        // if this is the currently active tab, then execute the below
        $("#tab_1_1").removeClass('tab-pane fade in active').addClass('tab-pane fade');
        $("#surveyList").removeClass('active');
        $("#tab_1_2").removeClass('tab-pane fade').addClass('tab-pane fade in active');
        $("#pagedList").addClass('active');   

    } *@
</script>


//查找活动选项卡
var id=$（'li.active'）.attr（'id'）；
$（“表格”）。提交（功能（事件）{
警报（id）；
$（“#tab_1_1”）.removeClass（'选项卡窗格淡入活动]）.addClass（'选项卡窗格淡入'）；
$（“#surveyList”）.removeClass（'active'）；
$（“#tab_1_2”）.removeClass（'tab-pane fade'）.addClass（'tab-pane fade in active'）；
$（“#pagedList”）.addClass（'active'）；
var id2=$（'li.active'）.attr（'id'）；
警报（id2）；
});
@*if（$（'li.active'.attr（'id'））=='pagedList'）
{
//如果这是当前活动的选项卡，则执行以下命令
$（“#tab_1_1”）.removeClass（'选项卡窗格淡入活动]）.addClass（'选项卡窗格淡入'）；
$（“#surveyList”）.removeClass（'active'）；
$（“#tab_1_2”）.removeClass（'tab-pane fade'）.addClass（'tab-pane fade in active'）；
$（“#pagedList”）.addClass（'active'）；
} *@

我已经尝试了各种方法，比如将变量传递回视图，该视图保留了选项卡单击的值。。。尝试仅在单击选项卡时动态加载视图。这两者都有各自的问题，所以我想我应该专注于在JQuery中实现它

请看。您需要创建一个

HTML帮助程序来处理它。请参阅。您需要创建一个HTML助手来处理它。