當頁面有多個表單時，在回發後恢復活動引導標籤

我有一個ASP.Net MVC 5項目，該項目有一個帶有2個引導選項卡的頁面。每個選項卡有兩種形式，共有4種形式。我的視圖模型具有4種形式中所有字段的超集。當頁面有多個表單時，在回發後恢復活動引導標籤

當我發佈表單時，我希望響應視圖顯示發佈表單時顯示的相同標籤。此SO回答Remain bootstrap tab after postback c#表示我應該將活動選項卡設置在隱藏字段中，在視圖模型中將其返回，然後在回發時將其恢復。

This SO answer asp.net MVC 4 multiple post via different forms指示返回的字段必須在我返回的表單中。這提出了一個問題，因爲隱藏領域需要在所有形式的範圍內。

回發時，如何在頁面上有多個表單時顯示與表單發佈時顯示的標籤相同的標籤？

來源

2017-02-03 d ei

我解決了這個問題，通過刪除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); 
     } 

    } 
}

最後查看 - 型號：

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

    } 
}

來源

2017-02-09 22:23:10

當頁面有多個表單時，在回發後恢復活動引導標籤

回答

相關問題