Восстановить активную загрузочную вкладку после обратной передачи, когда страница имеет несколько форм

Question

У меня есть проект ASP.Net MVC 5, который имеет страницу с двумя вкладками начальной загрузки. Каждая вкладка имеет две формы для всего 4 формы на странице. Моя модель просмотра имеет надмножество всех полей в 4 формах.

Когда я отправляю форму, я хочу, чтобы в виде ответа отображалась та же вкладка, которая показывалась при отправке формы. Этот ответ SO Remain bootstrap tab after postback c# указывает, что я должен установить активную вкладку в скрытом поле, вернуть ее в модель представления, а затем восстановить ее при обратной передаче.

Этот ответ asp.net MVC 4 multiple post via different forms указывает, что возвращаемые поля должны быть в форме, которую я возвращаю. Это представляет проблему, поскольку скрытое поле должно быть в пределах всех форм.

На обратной стороне, как мне отобразить ту же вкладку, которая показывалась, когда форма была опубликована, когда у меня есть несколько форм на странице?

Answer 1

Я решил эту проблему, удалив 4 формы и заменив их на одну форму, которая охватывала предыдущие 4. Чтобы получить форму для возврата к правильному контроллеру/действию, я написал несколько javascript, который вызывается, когда один из 4 кнопок отправки.

Он устанавливает действие новой формы на соответствующий контроллер/действие и затем отправляет форму. Таким образом, есть только 1 форма и 1 скрытое поле, чтобы удерживать активную вкладку, и правильное действие все равно вызывается на пост-обратно. Тестовая программа, с 2-мя вкладками и (для простоты), только 2 действия здесь:

Вид:

@model MultiPostDestinations.Models.HomeVM 
@{ 
    ViewBag.Title = "Home Page"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
<br/><br /><br /><br /> 
<div class="row"> 
    <div class="col-md-4"> 
     @using (Html.BeginForm("SubmitForm", "Home", FormMethod.Post, new { id = "submitForm", enctype = "multipart/form-data" })) { 
      @Html.HiddenFor(m => m.ActiveTab) 
      <div id="Tabs" role="tabpanel" class="container" style="width: 1000px"> 
       <!-- Nav tabs --> 
       <ul class="nav nav-tabs" role="tablist"> 
        <li class="active"><a href="#details" aria-controls="details" role="tab" data-toggle="tab">Details</a></li> 
        <li><a href="#history" aria-controls="history" role="tab" data-toggle="tab">Historic Model Analysis</a></li> 
       </ul> 
       <!-- Tab panes --> 
       <div class="tab-content"> 
        <div id="details" role="tabpanel" class="tab-pane fade in active"> 
         <h2>Details Tab</h2> 
         <h4>label: @Model.F1</h4><br /><br /> 
         @Html.DisplayFor(m => m.F1)<br /><br /> 
         @Html.EditorFor(m => m.F1)<br /><br /> 
         @Html.ActionLink("ActionLink Submit form", "SubmitGet", "Home", new { @class = "btn btn-default" })<br /><br /> 
         <input type="submit" value="input SubmitForm" class="btn btn-default" /><br /><br /> 
         <input id="submitButton1" type="button" value="javascript input to /Home/Submit1" class="btn btn-default" /><br /><br /> 
        </div> 
        <div id="history" role="tabpanel" class="tab-pane fade"> 
         <h2>Historic Model Analysis tab</h2> 
         <h4>label: @Model.F2</h4><br /><br /> 
         @Html.DisplayFor(m => m.F2)<br /><br /> 
         @Html.EditorFor(m => m.F2)<br /><br /> 
         <input type="submit" value="input SubmitForm" class="btn btn-default" /><br /><br /> 
         <input id="submitButton2" type="button" value="javascript input to /Home/Submit2" class="btn btn-default" /><br /><br /> 
        </div> 
       </div> 
      </div> 
     } 

    </div> 
</div> 

@section scripts { 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#submitButton1').click(function (e) { 
       e.preventDefault(); // recommended in SO, does not appear to be required 
       $('#submitForm').attr('action', '/Home/Submit1'); 
       $('#submitForm').submit(); 
      }); 
      $('#submitButton2').click(function (e) { 
       e.preventDefault();  // recommended in SO, does not appear to be required 
       $('#submitForm').attr('action', '/Home/Submit2'); 
       $('#submitForm').submit(); // previous doesn't work - why? 
      }); 

      var lastActiveTab = ($('#ActiveTab').val() !== '') ? $('#ActiveTab').val() : 'details'; 
      $('#Tabs a[href="#' + lastActiveTab + '"]').tab('show'); 
      $("#Tabs a").click(function() { 
       $('#ActiveTab').val($(this).attr("href").replace("#", "")); 
      }); 

     }); 
    </script> 
} 

Вот контроллер с 2 действия:

using MultiPostDestinations.Models; 
using System.Web.Mvc; 

namespace MultiPostDestinations.Controllers { 
    public class HomeController : Controller { 
     public ActionResult Index() { 
      var vm = new HomeVM() { F1 = "Index-F1", F2 = "Index-F2", ActiveTab = "" }; 
      return View("Index", vm); 
     } 

     [HttpPost] 
     public ActionResult Submit1(HomeVM vm) { 
      System.Diagnostics.Debug.WriteLine("HomeVM.Submit1: F1={0}, F2={1}", vm.F1 ?? string.Empty, vm.F2 ?? string.Empty); 
      // ModelState.Clear();   // uncomment if you want Html.EditorFor() fields to update on postback 
      return View("Index", vm); 
     } 

     [HttpPost] 
     public ActionResult Submit2(HomeVM vm) { 
      System.Diagnostics.Debug.WriteLine("HomeVM.Submit2: F1={0}, F2={1}", vm.F1 ?? string.Empty, vm.F2 ?? string.Empty); 
      //ModelState.Clear();   // uncomment if you want Html.EditorFor() fields to update on postback 
      return View("Index", vm); 
     } 

    } 
} 

И, наконец, view- модель:

namespace MultiPostDestinations.Models { 
    public class HomeVM { 
     public string ActiveTab { get; set; } 
     public string F1 { get; set; } 
     public string F2 { get; set; } 

    } 
}