partial view not displaying on main view post back

Question

In the main view I am calling a partial view. It work fine for normal usage. On the postback the partial view controller bit is never triggered and the partial view does not displayed. What options are available to make sure that the partial view is rendered even when a postback is triggered.

Model:

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; }
}

Controller:

Main:

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);
}

Partial:

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);
}

Views:

Main

@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>
}

Partial:

@model ConflictOfInterest.Models.ReportParamters
@{
if (Model.SelectedTab != "0")
{
    <table border="0" cellpadding="0" cellspacing="0">
        @{
            if (Model.SelectedTab == "1")
            {
                <tr>
                    <td style="font-weight:bolder">@Html.Label("Year", "Year:")</td>
                    <td>@Html.DropDownListFor(model => model.Year, Enumerable.Empty<SelectListItem>(), (DateTime.Today.Year - 1).ToString(), new { @style = "width:200px;" })

                    </td>
                    <td style="font-weight:bolder">@Html.Label("ReportType", "Report Type:")</td>
                    <td>@Html.DropDownListFor(model => model.ReportType, new SelectList(ViewBag.ReportType, "value", "Text"), new { @style = "width:200px;" })</td>
                    <td style="font-weight:bolder">
                        @Html.Label("Person", "Person:")
                        @Html.Label("Group", "Group:")
                    </td>
                    <td>
                        @Html.DropDownListFor(model => model.Group, new SelectList(ViewBag.GroupList, "value", "Text"), new { @style = "width:200px;" })
                        @Html.DropDownListFor(model => model.Person, Enumerable.Empty<SelectListItem>(), "All", new { @style = "width:200px;" })<br />
                        @Html.TextBox("sPerson")
                        <input type="button" id="bPerson" value="Search" />
                    </td>
                </tr>
            }
            /*else
            {
                <tr>
                    <td colspan="6"></td>
                </tr>
            }*/
        }
        <tr>
            <td style="font-weight:bolder">@Html.Label("Division", "Division:")</td>
            <td>@Html.DropDownListFor(model => model.Division, new SelectList(ViewBag.Division, "value", "Text"), new { @style = "width:200px;" })</td>
            <td style="font-weight:bolder">@Html.Label("Department", "Department:")</td>
            <td>@Html.DropDownListFor(model => model.Department, Enumerable.Empty<SelectListItem>(), "All", new { @style = "width:200px;" })</td>
            <td style="font-weight:bolder">@Html.Label("Section", "Section:")</td>
            <td>@Html.DropDownListFor(model => model.Section, Enumerable.Empty<SelectListItem>(), "All", new { @style = "width:200px;" })</td>
        </tr>
        <tr>
            <td colspan="6"></td>
        </tr>
    </table>
}
else
{
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>Show the detail captered by direct reports.</td>
        </tr>
    </table>
}
}

Answer 1

The activate event of the jquery tab is triggered when a tab is activated(selected). To ensure that the the same action is taking place on post back you need to use the create event as well.

Take note of the difference in the load at the end

            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("&");
                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);
            },