部分视图中的 ASP.NET MVC 4 Html.BeginForm，发布后的值不正确答案

【问题标题】：ASP.NET MVC 4 Html.BeginForm in Partial View , values after post not right部分视图中的 ASP.NET MVC 4 Html.BeginForm，发布后的值不正确
【发布时间】：2013-11-12 08:58:30
【问题描述】：

主页 -> 第 1 部分（有一些下拉菜单和保存按钮）

        <div id="tab-section1">
            @{Html.RenderPartial("_Section1", Model.Section1);}
        </div>
        <div id="tab-section2">
            <div id="section2">
                @{Html.RenderPartial("_Section2", Model.Section2);}
            </div>
            @{Html.RenderPartial("_SubSection2", Model.SubSection2);}
        </div>

第 1 节的内容放置在带有 @Html.BeginForm 的局部视图中。并使用@Html.RenderPartial 在主视图上呈现

@using MyData
@model Section1ViewModel
@using(Html.BeginForm("EditSection1", "Project", FormMethod.Post, new { id = "section1-form", name = "section-form" }))
{
    @Html.HiddenFor(model => model.ProjectID)
 <table id="modules">
        <tr>
            <td class="bold" colspan="2">Modules
            </td>
        </tr>
        <tr>
            <td>
                @Html.DropDownListFor(m => m.SubmittedModules, new MultiSelectList(Model.AvailableModules, "ModuleID", "ModuleName", Model.SelectedModules.Select(m => m.ModuleID)),
                new { multiple = "multiple", @class = "multiselectb" })
            </td>
            <td>
                <input type="button" id="btnAddModule" value=" + " />
            </td>
        </tr>

        @foreach (Module b in @Model.SelectedModules)
        {
            <tr>
                <td colspan="2">
                    @b.ModuleName
                </td>
            </tr>
        }
   </table>
}

当我在局部视图中单击保存按钮时，它应该更新自己的内容以及其他局部视图 SubSection2 应该被刷新。

在 action 方法中，我返回新值，对于第二次局部视图更新，我创建了一个 ajax 提交函数，我在其中执行 #secondpartialview.load 行动：

[HttpPost]
        public ActionResult EditSection1(Section1ViewModel viewModel)
        {
            Section1Data section1Data = new Section1Data(_UnitOfWork);
            // save changes
            section1Data.SaveSection1(viewModel);

            viewModel = section1Data.GetSection1ViewModel(viewModel.ProjectID);
            return PartialView("_Section1", viewModel);
        }

Ajax 提交：

$("#section1-form").submit(function () {

        $("#section1-saving").html("<img src='../../Images/ajax-loader.gif' />");

        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                $("#section1-saving").html("Saved!");
                $.ajaxSettings.cache = false;

                // Refresh the sub section 2 on the Section 2 tab
                $("#subSection2").load('../../Projects/subSection2/' + $("#ProjectID").val());
            },
            error: function (jqXHR, textStatus, errorThrown) {
                $("#section1-saving").html("Error: " + textStatus + " " + errorThrown);
            }
        });
        return false;
    });

问题是：DEBUGGER 在操作方法中向我显示 selectedModules 的更新值，但不在 UI 上。

我错过了什么？

【问题讨论】：

能贴出HTML、JavaScript和动作方法代码吗？
贴出相关代码位
您将结果加载到 id 为 'subSection2' 的元素中，这是在 _SubSection2 partial 中定义的吗？
正确。并且完美呈现。问题是在第 1 节的 UI 中未更新 SelectedModules，而在调试时给出了正确的值。
我看不到任何可以更新第 1 节的内容，除了会导致整个页面重新加载的表单提交。我总是参考这个链接通过 AJAX 重新加载独立面板：codeproject.com/Articles/460893/…

标签： asp.net-mvc-4 asp.net-mvc-partialview

【解决方案1】：

当我在一个父视图中有多个部分视图时，我遇到了这种问题。你应该做的是，在父视图中调用 Section1 部分视图喜欢

 <div id="tab-section1">
            @{Html.RenderPartial("_Section1", Model.Section1);}
        </div>

现在在 _Section1 局部视图中调用您的 _Section2 局部视图

<div id="section2">
                @{Html.RenderPartial("_Section2", Model.Section2);}
            </div>

在局部视图中使用这种局部视图方法，您将能够从您的 UI 中获取值。这适用于父视图中的多个局部视图。我也喜欢称我的部分观点为

@Html.Partial("ViewName",Model.ModelName)

【讨论】：