如何在asp.net中更改其局部视图时使表单提交更新的值?

时间:2014-07-10 20:11:37

标签: javascript asp.net asp.net-mvc asp.net-mvc-partialview

我正在加载一个部分视图,这取决于下拉列表选择,就像这里描述的那样: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>

PartialView:

@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>

控制器:

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

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

我无法正常工作的一件事:我可以看到的部分视图是表单的一部分。下拉列表中的表单内容更新完美更改。但是,当我单击表单的提交按钮时,它会发布过时的数据而不是用SelectInfo()方法替换的数据!我认为这是因为在部分视图更新时整个视图的ParentModel没有得到更新。有什么选择来解决这个问题?

1 个答案:

答案 0 :(得分:1)

这是我认为正在发生的事情。首先,在选择任何下拉列表之前,请加载页面并查看源代码。请注意不同输入的Name属性。它们将类似于

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

注意名称。 Info.House。该名称是推动MVC ASP.net中模型绑定的原因。现在请注意,您的局部视图直接采用Info模型。不是父模型。因此,一旦您选择了下拉项并填充了部分视图,您现在可以输入如下内容:

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

现在请注意新名称。生成的html试图将DIRECTLY绑定到名为&#34; House&#34;的属性。所以它假设你的模型有类似Model.House的东西。但是你的父模型没有。它有Model.Info.House

所以您需要做的是以下内容。在您的控制器中

<强>控制器

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

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

现在在你的局部视图中你会有

部分视图(请注意,部分视图现在采用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>