在 MVC 中动态生成控件并发布其值

Question

我希望用户能够在窗体上动态添加或删除控件。 用户可能有多个地址。所以我创建了一个CommunicationDetailsViewmodel列表。CommunicationDetailsViewmodel如下：

public class CommunicationDetailsViewModel
{
public string OrganizationName { get; set; }
public List<Country> Country { get; set; }
public List<State> State { get; set; }
public List<City> City { get; set; }
[Display(Name = "Id")]
public int CountryId { get; set; }
[Display(Name = "Id")]
public int StateId { get; set; }
[Display(Name = "Id")]
public int CityId { get; set; }
[StringLength(32), Required(ErrorMessage = "Address is required")]
public string Address { get; set; }
}

SupplierInformationViewmodel如下：

public class SupplierInformationViewModel
{
public SupplierInformationViewModel()
{
CommunicationDetailsViewModel = new List<ViewModels.CommunicationDetailsViewModel>();
}
[StringLength(50, ErrorMessage = "Organization name cannot be greater than 50 characters"), Required(ErrorMessage ="Organization name is required")]
public string OrganizationName { get; set; }
public List<CommunicationDetailsViewModel> CommunicationDetailsViewModel { get; set; }
}

视图如下：

@model WebAPI.ViewModels.SupplierInformationViewModel
@{
ViewBag.Title = "Supplier Information";
}
<h4>Supplier Details</h4>
@using (Html.BeginForm("Save", "SupplierInformation", FormMethod.Post))
{
<div class="demo-section k-content">
<div class="form-group">
@Html.Label("Organization name")
@Html.Kendo().TextBoxFor(model => model.OrganizationName).Name("OrganizationName").HtmlAttributes(new { @class = "k-textbox required", placeholder = "Organization Name" })
</div>
@for (int i = 0; i < Model.CommunicationDetailsViewModel.Count; i++)
{
<div class="form-group">
@Html.Label("Country")
@(Html.Kendo().DropDownListFor(model => model.CommunicationDetailsViewModel[i].CountryId).DataTextField("CountryName").DataValueField("Id").BindTo(Model.CommunicationDetailsViewModel[i].Country))
</div>
<div class="form-group">
@Html.Label("State")
@(Html.Kendo().DropDownListFor(model => model.CommunicationDetailsViewModel[i].StateId).DataTextField("StateName").DataValueField("Id").BindTo(Model.CommunicationDetailsViewModel[i].State))
</div>
<div class="form-group">
@Html.Label("City")
@(Html.Kendo().DropDownListFor(model => model.CommunicationDetailsViewModel[i].CityId).DataTextField("CityName").DataValueField("Id").BindTo(Model.CommunicationDetailsViewModel[i].City))
</div>
<div class="form-group">
@Html.Label("Address")
@Html.Kendo().TextBoxFor(model => model.CommunicationDetailsViewModel[i].Address).Name("Address").HtmlAttributes(new { @class = "k-textbox required", placeholder = "Address", @maxlength = "32" })
</div>
<div class="form-group">
@Html.Label("Building name")
@Html.Kendo().TextBoxFor(model => Model.CommunicationDetailsViewModel[i].BuildingName).Name("BuildingName").HtmlAttributes(new { @class = "k-textbox required", placeholder = "Address", @maxlength = "32" })
</div>
}
<input type="button" value="Add New Address" />
</div>
@Html.Kendo().Button().Name("btnSave").Content("Save").HtmlAttributes(new { type = "submit", @class = "k-button k-primary" })
}

单击Add New Address按钮时，我想生成诸如国家/地区下拉列表、州下拉列表、城市下拉列表等字段，其中包含建筑物名称、地址等的值和文本框。 当用户发布此表单时，所有这些新添加的字段都应发布。这些字段是CommunicationDetailsViewModel的一部分。 因此，在我的操作中，我应该能够获得现有字段以及新添加的字段。

知道我该如何实现这一目标吗？

Answer 1

Razor 本身并不擅长从这个意义上操作 DOM。 你最好的选择是使用一些JavaScript或jQuery来获得你想要的效果。 就个人而言，我会在 razor 中创建字段，但设置样式以便默认情况下隐藏它们。 然后，您可以将单击处理程序附加到Add New Address按钮，该按钮将调用函数来更改输入的样式以显示它们。 如果需要验证消息，您甚至可以使用 jQuery 在字段中添加和删除验证逻辑。 但是，如果要允许用户所需的任意数量的新地址，则此方法将无法很好地工作。 在这种情况下，您的JS添加新地址函数必须动态地向表单添加新字段，而不仅仅是显示隐藏的字段。 希望这是有帮助的！