当页面具有多个窗体时，回发后还原活动的引导选项卡

Question

我有一个 ASP.Net 的MVC 5项目，该项目有一个包含2个引导选项卡的页面。每个选项卡有两个表单，页面上共有 4 个表单。我的视图模型具有 4 个表单中所有字段的超集。

当我发布表单时

，我希望响应视图显示与发布表单时显示的选项卡相同。这个 SO 答案在回发 c# 后保持引导选项卡指示我应该在隐藏字段中设置活动选项卡，在视图模型中返回它，然后在回发时恢复它。

这个 SO 答案 asp.net MVC 4 通过不同表单发布的多个帖子表明返回的字段必须在我要返回的表单中。这带来了一个问题，因为隐藏字段需要在所有表单的范围内。

在回发时，当我页面上有多个表单时，如何显示发布表单时显示的相同选项卡？

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);
        }
    }
}

最后是视图模型：

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