MVC; How to render the correct active tab after a postback

Question

I have a view where I am using tabs. For each tab I have a partial view. Where I select a tab and post the changes, and return the Partial View, the Partial View is the only thing that gets rendered, not the whole View. I suspect I need to hijack the form in order to get round this. I am wondering how to do this.

My View;

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Employee.Master" Inherits="System.Web.Mvc.ViewPage<SHP.WebUI.Models.HolidayRequestViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    HolidayRequest
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="EmployeeContent" runat="server">
    <% using (Html.BeginForm()) {%>
    <%: Html.AntiForgeryToken() %>
    <h2>Holiday Request</h2>
    <p>You have <%: Html.DisplayFor(model => model.DaysAvailableThisYear) %> days left annual leave for this year 
    and <%: Html.DisplayFor(model => model.DaysAvailableNextYear) %> days left for next year.</p>
    <p>If your request is approved and exceeds the number of days left, then those extra days will not be paid.</p>
    <%: Html.HiddenFor(x => x.EmployeeId) %><%: Html.HiddenFor(x => x.ApproverId) %>
            <% } %>    
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Approver</a></li>
            <li><a href="#tabs-2">Single Date</a></li>
            <li><a href="#tabs-3">Date Range</a></li>
         </ul>
         <div id="tabs-1">
            <% Html.RenderPartial("GetApproverTab", Model); %>
         </div>
         <div id="tabs-2">
            <% Html.RenderPartial("GetSingleDateTab", Model); %>
         </div>
         <div id="tabs-3">
            <% Html.RenderPartial("GetDateRangeTab", Model); %>
         </div>
    </div>

</asp:Content>

My Partial View;

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SHP.WebUI.Models.HolidayRequestViewModel>" %>

<% using (Html.BeginForm("GetSingleDateTab", "Employee", FormMethod.Post, new { id = "frmSingleDate" }))
       { %>
<p>Enter your day or part day of Annual Leave here.</p>
<table>
    <tr>
        <td align="right">Date:</td>
        <td><%: Html.EditorFor(x => x.SingleDate) %></td>
    </tr>
    <tr>
        <td align="right">Morning Only:</td>
        <td><%: Html.CheckBoxFor(x => x.MorningOnlyFlag) %></td>
    </tr>
    <tr>
        <td align="right">Afternoon Only:</td>
        <td><%: Html.CheckBoxFor(x => x.MorningOnlyFlag) %></td>
    </tr>
    <tr>
        <td colspan="2" align="center"><input type="submit" value="Save" /></td>
    </tr>
</table>
<%: Html.HiddenFor(x => x.EmployeeId) %><%: Html.HiddenFor(x => x.ApproverId) %>
    <% } %>

My Controller;

[HttpPost] public ActionResult HolidayRequest(HolidayRequestViewModel hrvm) { if (ModelState.IsValid) { hrvm.Update(); return View(new HolidayRequestViewModel(hrvm.EmployeeId)); } return View(hrvm); }

[HttpPost]
public ActionResult GetSingleDateTab(HolidayRequestViewModel hrvm)
{
    if (ModelState.IsValid)
    {
        hrvm.Update();
        return PartialView(new HolidayRequestViewModel(hrvm.EmployeeId));
    }
    return PartialView(hrvm);
}

Kieron Kieron · Accepted Answer · 2010-11-22T11:27:58

It looks like you'll need to check the requested/ posted URL to check for the #name on the end, and then redirect to that URL.

You could do the same with Javascript and a hidden field, updating it on tab click and checking on the server.

Additionally, you could change the output on the view to set the selected one based on the URL/ posted hidden field, if you want to keep your URLs cleaner and code simpler.

MVC; How to render the correct active tab after a postback

1 Answers