Question

在主视图中，我称之为局部视图。它适用于正常使用。在回发时，从不触发局部视图控制器位，并且不显示局部视图。有哪些选项可用于确保即使在触发回发时也会呈现局部视图。

型号：

ProductID  Gender Color Type     AgeRange
344842     Boys   Black Leggings 2 to 4 Years

控制器：

主要

public class ReportSummary
{
    public int PayrollNumber { get; set; }
    public string Name { get; set; }
    public string ConflictInterest { get; set; }
    public string SummaryConflictInterest { get; set; }
    public string FinancialInterest { get; set; }
    public string SummaryFinancialInterest { get; set; }
    public string GiftInterest { get; set; }
    public string SummaryGiftInterest { get; set; }
    public string Combined { get; set; }
    public string SummaryCombined { get; set; }
}

部分：

public ActionResult CoiReporting()
{
...
    var model = new ReportParamters();
        model.Year = DateTime.Today.Year-1;
        model.SelectedTab = "0";
...
        return View(model);
}
[HttpPost]
[ActionName("CoiReporting")]
public ActionResult CoiReportingConfrim(string ViewReport, ReportParamters model )
{
...
    switch (model.SelectedTab)
    {
    ...
    }

    return View(model);
}

查看：

主要

public ActionResult _ReportCriteria(int Year=0, int ReportType=0, int Person=0, int Group=0, int Division=0, int Department=0, int Section=0, string SelectedTab="X")
{ 
    ...
        var model = new ReportParamters();
        model.Year = Year;
        model.ReportType = ReportType;
        model.Person = Person;
        model.Group = Group;
        model.Division = Division;
        model.Department = Department;
        model.Section = Section;
        model.SelectedTab = SelectedTab;
        return PartialView(model);
}

部分：

@model ConflictOfInterest.Models.ReportParamters
@using (Html.BeginForm("CoiReporting", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.HiddenFor(model => model.SelectedTab)
    @Html.HiddenFor(model => model.Year)
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1" data-toggle="tab">Summary</a></li>
            <li><a href="#tabs-2" data-toggle="tab">Statistics</a></li>
            <li><a href="#tabs-3" data-toggle="tab">Statistics with Person Detail</a></li>
        </ul>
        <div id="tabs-1">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td>Show the detail captered by direct reports.</td>
                </tr>
            </table>
        </div>
        <div id="tabs-2">
        </div>
        <div id="tabs-3">
        </div>
    </div>
    <input type="submit" name="ViewReport" id="ViewReport" value="View Report" class="SaveForm" />
    <script type="text/javascript">
        $(function () {
            var sPath = "";
            var sParam = "";
            $("#tabs").tabs({
                activate: function (event, ui) {
                    var selectedTab = $('#tabs').tabs('option', 'active');
                    $("#SelectedTab").val(selectedTab);
                    console.log("Tab selected: " + selectedTab);

                    var sUrl = "@Url.Action("_ReportCriteria", Model)";
....    
                    $('.ui-tabs-panel').empty();
                    sParam = aParam.join("&")
                    ui.newPanel.load(sPath + sParam);
                },
                active: $("#SelectedTab").val()
            });

        });
        $('#tabs').click('tabsselect', function (event, ui) {
            var selectedTab = $("#tabs").tabs("option", "active");
            $("#SelectedTab").val(selectedTab);
        });
    </script>
}

Answer 1

激活（选择）选项卡时会触发jquery选项卡的activate事件。为了确保在回发上发生相同的操作，您还需要使用create事件。

注意最后的负载差异

            create: function (event, ui) {
                //event.preventDefault();
                var selectedTab = $('#tabs').tabs('option', 'active');
                $("#SelectedTab").val(selectedTab);
                console.log("Tab selected: " + selectedTab);

                var sUrl = "@Url.Action("_ReportCriteria", Model)";
                //console.log("Start Url: " + sUrl);
                sPath = sUrl.substring(0, sUrl.lastIndexOf("?") + 1);
                //console.log("Path: "+sPath);
                //console.log("Parameters:"+sUrl.substring(sUrl.lastIndexOf("?") + 1, sUrl.length));
                sParam = sUrl.substring(sUrl.lastIndexOf("?") + 1, sUrl.length)

                var aParam = sParam.split("&amp;");
                for (var i = 0; i < aParam.length; i++) {
                    var aParama = aParam[i].split("=");
                    switch (i) {
                        case 7:
                            aParama[1] = selectedTab;
                            break;
                    }
                    aParam[i] = aParama.join("=");
                }

                $('.ui-tabs-panel').empty();
                sParam = aParam.join("&")
                ui.panel.load(sPath + sParam);
            },

局部视图不显示在主视图后面

1 个答案: