ページに複数のフォームがあるときにポストバック後にアクティブなブートストラップタブを復元する

Question

2つのブートストラップタブを持つページを持つASP.Net MVC 5プロジェクトがあります。各タブには、ページ上に合計4つのフォームの2つのフォームがあります。私のビューモデルは、4つのフォームのすべてのフィールドのスーパーセットを持っています。

フォームを投稿すると、フォームが投稿されたときに表示されていたものと同じタブが応答ビューに表示されます。このSOの回答Remain bootstrap tab after postback c#は、私は隠しフィールドにアクティブなタブを設定し、ビューモデルでそれを返し、ポストバックでそれを復元する必要があることを示しています。

この返信asp.net MVC 4 multiple post via different formsは、返されたフィールドが返されているフォーム内にある必要があることを示しています。これは、隠れたフィールドがすべてのフォームの範囲内にある必要があるため、問題を提起します。

ポストバック時に、ページに複数のフォームがあるときにフォームがポストされたときに表示されていたものと同じタブを表示するにはどうすればよいですか？

Answer 1

4つのフォームを削除し、前の4つのフォームに置き換えることでこの問題を解決しました。適切なコントローラ/アクションにポストバックするためにフォームを取得するには、 4つの送信ボタンのうちの1つが有効になります。

新しいフォームのアクションを適切なコントローラ/アクションに設定し、フォームを送信します。この方法では、アクティブなタブを保持する1つのフォームと1つの非表示フィールドしかなく、正しいアクションはポストバック時に呼び出されます。 （単純化のために）2つのタブとを有するテストプログラムのみ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); 
     } 

    } 
} 

そして最後に[表示] - ：ここで

@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つのアクションとコントローラーですモデル：

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

    } 
}