在下拉列表更改事件上加载部分表单答案

【问题标题】：Load partial form on dropdownlist change event在下拉列表更改事件上加载部分表单
【发布时间】：2012-07-04 19:47:00
【问题描述】：

我有一个车牌下拉列表，其中最后一项是“新车牌”。默认情况下，表单不会显示新的车牌表单字段（新车牌的文本框，以及车牌所在州/省的下拉列表）。

如何根据“新车牌”的选择显示表格？

到目前为止，我已经创建了一个局部视图：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Namespace.ViewModels.ProfileMemberViewModel>" %>
<table cellspacing="2" cellpadding="2" width="100%" border="0" align="left">
<tr>
    <td>
        <%=Html.LabelFor(model => model.NewLicensePlate.LicensePlate, new { @class = "inputLabel" })%>
    </td>
    <td>
        <%=Html.TextBoxFor(model => model.NewLicensePlate.LicensePlate, new { @class = "inputField" })%>
    </td>
</tr>
<tr>
    <td>
        <%=Html.LabelFor(model => model.NewLicensePlate.PlateState, new { @class = "inputLabel" })%>
    </td>
    <td>
        <%=Html.DropDownListFor(model => model.NewLicensePlate.PlateState, Model.NewLicensePlate.PlateStates, new { @class = "inputField" })%>
    </td>
</tr>

父表单：

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Paysite.Providers.ViewModels.ProfileMemberViewModel>" %>
<% using (Html.BeginForm("Confirm", "Profile", FormMethod.Post, new { @id = "Profile-form" }))
   {%>
...
<tr>
    <td>
        <%=Html.LabelFor(model => model.Member.LicensePlate, new { @class = "inputLabel" })%>
        <br />
        <br />
        <span class="small">(To add, select "New License Plate")</span>
    </td>
    <td>
        <%=Html.DropDownListFor(model => model.Member.LicensePlate, Model.Member.LicensePlates, new { @class = "inputField" })%>
    </td>
</tr>
</table>
<div id="NewLicensePlate">            
</div>
...
<%
   } %>

父表单中的jQuery：

$("#Member_LicensePlate").change(function () {
  var selectedPlate = $("#Member_LicensePlate").val();
  if (selectedPlate == "New License Plate") {
    $("#NewLicensePlate").load('<%= Url.Action("NewLicensePlate") %>');
  } else {
    $('#NewLicensePlate').empty();
  }
});

视图模型：

public class ProfileMemberViewModel
{
    public ExistingMemberViewModel Member { get; set; }
    public NewLicensePlateViewModel NewLicensePlate { get; set; }
}

public class NewLicensePlateViewModel
{
    [Display(Name = "License Plate")]
    public string LicensePlate { get; set; }

    [Display(Name = "Province/State")]
    public string PlateState { get; set; }

    public IEnumerable<SelectListItem> PlateStates { get; set; }
}

控制器动作：

public ActionResult NewLicensePlate()
{
    var model = new ProfileMemberViewModel();
    model.NewLicensePlate = new NewLicensePlateViewModel();

    DataSet statesDataSet = _statesRepo.GetStates();

    model.NewLicensePlate.PlateStates =
            Enumerable.Select(statesDataSet.Tables[0].AsEnumerable(), x => new SelectListItem
        {
            Text = x.Field<string>("NAME"),
            Value = x.Field<double>("ID").ToString()
        });

    return PartialView("NewLicensePlate", model);
}

当我从父级从public ActionResult Confirm(ProfileMemberViewModel model) 发帖时，model.NewLicensePlate 没有得到绑定，它是null。我在这里做错了吗？我不确定这是否是最好的方法。

【问题讨论】：

卢克，只是为了仔细检查一下，表单标签在 NewLicensePlate div 之后确实关闭了？只是你没有在代码中显示表单标签闭包
是的，很抱歉，为简洁起见，其余的表格都省略了，但我会把它放进去。

标签： jquery asp.net asp.net-mvc asp.net-mvc-3

【解决方案1】：

我认为最简单的方法是将所有字段放在相同的（父表单）中。隐藏新印版的控件。使用 javascript，您根据“新车牌”的选择显示它们。表单发布后，如果控件已填写，您将处理新的车牌

【讨论】：

谢谢，是的，我想这样做，但想尝试一些新的东西，但我可能会保持简单。