MVC;ポストバック後に正しいアクティブなタブをレンダリングする方法

Question

私はタブを使用しているビューを持っています。各タブについて、私は部分的な見解を持っています。 タブを選択して変更をポストし、パーシャルビューを返す場合、部分ビューは、ビュー全体ではなくレンダリングされる唯一のものです。 これを回避するにはフォームをハイジャックする必要があると思われます。私はこれを行う方法が不思議です。

マイビュー;

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

マイパーシャルビュー。

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

私のコントローラ。

[HttpPost] 公共のActionResult HolidayRequest（HolidayRequestViewModel hrvm） {IF（ModelState.IsValid） {hrvm.Update（）。 戻り値（新しいHolidayRequestViewModel（hrvm.EmployeeId））; } リターンビュー（hrvm）; }

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

Answer 1

あなたが最後に#NAMEをチェックし、そのURLにリダイレクトするように要求/掲載URLを確認する必要がありますように見えます。

Javascriptと非表示フィールドで同じ操作を行うことができます。タブでクリックして更新し、サーバーをチェックします。

さらに、URLをよりきれいに保ちたい場合は、URL /投稿された隠しフィールドに基づいて選択したものを設定するように、ビューの出力を変更できます。