MVC; Comment rendre l'onglet actif correct après une publication

Question

J'ai une vue où j'utilise des onglets. Pour chaque onglet, j'ai une vue partielle. Lorsque je sélectionne un onglet et publie les modifications, puis que la vue partielle est renvoyée, la vue partielle est la seule à être rendue, pas toute la vue. Je soupçonne que j'ai besoin de détourner le formulaire pour contourner cela. Je me demande comment faire cela.

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> 

Mes vues partielles;

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

Mon contrôleur;

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

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

Answer 1

Il semble que vous aurez besoin de vérifier la demande/URL affichée pour vérifier la #nom à la fin, puis redirigez vers cette URL.

Vous pouvez faire de même avec Javascript et un champ caché, en le mettant à jour sur l'onglet click et en vérifiant sur le serveur.

En outre, vous pouvez modifier la sortie sur la vue pour définir celle sélectionnée en fonction de l'URL/champ caché publié, si vous souhaitez que vos URL soient plus propres et plus simples à coder.