javascript - 在 asp net 中，当其部分 View 发生更改时，如何使表单提交更新的值？

Question

我正在根据下拉列表选择加载部分 View ，就像此处描述的那样:Load partial view depending on dropdown selection in MVC3 。我的代码如下所示:

查看:

@....ParentModel

@using (Html.BeginForm("Method", "Controller", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <div id="info">
        <div id="info-selection">
            @Html.LabelFor(m => m.SavedInfo)
            @Html.DropDownListFor(m => m.SavedInfo , infoListItems, new { @id = "info-dropdown" })
        </div>
        <div id="info-describtion">
            @Html.EditorFor(m => m.ChildModel)
        </div>
    </div>
    <input type="submit" id="confirm_btn" value="Go!" />
}

<script>
    $('#info-dropdown').change(function () {
    var id = $(this).val();

    $.get('/Cart/SelectInfo/' + id, function (data) {
         $('#info-describtion').html(data);
         //$('#info-describtion').fadeIn('fast');
     });
     });
</script>

部分 View :

@model ...Info

@{
     List<SelectListItem> listMetroItems = new List<SelectListItem>();

     listMetroItems.Add(new SelectListItem
     {
        Text = "no metro",
        Value = "NoMetroAvailable",
        Selected = true
     });
}

<ul id="info-left">
     <li>
         @Html.LabelFor(m => m.Undegraund)
         @Html.DropDownListFor(m => m.Undegraund, listMetroItems)
     </li>
     <li>
         @Html.LabelFor(m => m.House)
         @Html.TextBoxFor(m => m.House)
     </li>
     <li>
         @Html.LabelFor(m => m.Flat)
         @Html.TextBoxFor(m => m.Flat)
     </li>
     <li>
         @Html.LabelFor(m => m.Floor)
         @Html.TextBoxFor(m => m.Floor)
     </li>
</ul>

<ul id="info-right">
      <li>
         @Html.LabelFor(m => m.Street)
         @Html.TextBoxFor(m => m.Street)
      </li>
       <li>
          @Html.LabelFor(m => m.Building)
          @Html.TextBoxFor(m => m.Building)
      </li>
      <li>
          @Html.LabelFor(m => m.Porch)
          @Html.TextBoxFor(m => m.Porch)
      </li>
      <li>
          @Html.LabelFor(m => m.IntercomCode)
          @Html.TextBoxFor(m => m.IntercomCode)
     </li>
  </ul>

Controller :

    public ActionResult SelectInfo(int id)
    {
        Info partialViewModel = new Info(id);

        return PartialView("~/Views/Shared/EditorTemplates/InfoModel.cshtml", partialViewModel);
    }

有一件事我无法正常工作:如您所见，我加载的部分 View 是表单的一部分。下拉菜单上的表单内容更新完美变化。但是，当我单击表单的提交按钮时，它会发布过时的数据，而不是用 SelectInfo() 方法替换的数据!我认为这是因为当部分 View 更新时整个 View 的 ParentModel 没有更新。有什么选择可以解决这个问题？

Answer 1

这就是我相信正在发生的事情。首先，在选择任何下拉菜单之前，加载您的页面并查看源代码。请注意不同输入的 Name 属性。他们会是这样的

<input class="text-box single-line" id="Info_House" name="Info.House" type="text" value="">

记下名字。信息之家。名称是 MVC ASP.net 中模型绑定(bind)的驱动因素。现在请注意，您的部分 View 直接采用 Info 模型。不是父模型。因此，一旦您选择一个下拉项并且您的部分 View 填充，您现在就拥有如下输入:

<input id="House" name="House" type="text" value="House">

现在记下新名称。生成的 html 尝试直接绑定(bind)到名为“House”的属性。所以它假设你的模型有类似 Model.House 的东西。但你的父模型没有。它有 Model.Info.House

因此您需要执行以下操作。在你的 Controller 中

Controller

public ActionResult SelectInfo(int id)
{
    Info info = new Info(id);
    var parentModel = new ParentModel { Info = info};

    return PartialView("~/Views/Shared/EditorTemplates/InfoModel.cshtml", parentModel);
}

现在在您的部分 View 中您将拥有

部分 View (请注意，部分 View 现在采用 ParentModel。而不是子模型。

@model MvcApplication1.Models.ParentModel
@{
    List<SelectListItem> listMetroItems = new List<SelectListItem>();

    listMetroItems.Add(new SelectListItem
    {
        Text = "no metro",
        Value = "NoMetroAvailable",
        Selected = true
    });
}

<ul id="info-left">
     <li>
         @Html.LabelFor(m => m.Info.Undergraund)
         @Html.DropDownListFor(m => m.Info.Undergraund, listMetroItems)
     </li>
     <li>
         @Html.LabelFor(m => m.Info.House)
         @Html.TextBoxFor(m => m.Info.House)
     </li>
     <li>
         @Html.LabelFor(m => m.Info.Flat)
         @Html.TextBoxFor(m => m.Info.Flat)
     </li>
     <li>
         @Html.LabelFor(m => m.Info.Floor)
         @Html.TextBoxFor(m => m.Info.Floor)
     </li>
</ul>

<ul id="info-right">
      <li>
         @Html.LabelFor(m => m.Info.Street)
         @Html.TextBoxFor(m => m.Info.Street)
      </li>
       <li>
          @Html.LabelFor(m => m.Info.Building)
          @Html.TextBoxFor(m => m.Info.Building)
      </li>
      <li>
          @Html.LabelFor(m => m.Info.Porch)
          @Html.TextBoxFor(m => m.Info.Porch)
      </li>
      <li>
          @Html.LabelFor(m => m.Info.IntercomCode)
          @Html.TextBoxFor(m => m.Info.IntercomCode)
     </li>
  </ul>