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

我希望用户能够在表单上动态添加或删除控件。 用户可能有多个地址。因此，我创建了一个列表，其中包含

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; }
    }

意见如下:

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" })
}

@model WebAPI.ViewModels.SupplierInformationViewModel
@{
ViewBag.Title=“供应商信息”；
}
供应商详细信息
@使用（Html.BeginForm（“保存”、“供应商信息”、FormMethod.Post））
{
@Html.Label（“组织名称”）
@Html.Kendo（）.TextBoxFor（model=>model.OrganizationName）.Name（“OrganizationName”）.HtmlAttributes（需要新的{@class=“k-textbox”，placeholder=“OrganizationName”}）
@对于（int i=0；imodel.CommunicationDetailsViewModel[i].CountryId）.DataTextField（“CountryName”）.DataValueField（“Id”）.BindTo（model.CommunicationDetailsViewModel[i].Country））
@Html.Label（“State”）
@（Html.Kendo（）.DropDownListFor（model=>model.CommunicationDetailsViewModel[i].StateId）.DataTextField（“StateName”）.DataValueField（“Id”）.BindTo（model.CommunicationDetailsViewModel[i].State））
@Html.Label（“城市”）
@（Html.Kendo（）.DropDownListFor（model=>model.CommunicationDetailsViewModel[i].CityId）.DataTextField（“CityName”）.DataValueField（“Id”）.BindTo（model.CommunicationDetailsViewModel[i].City））
@Html.Label（“地址”）
@Html.Kendo（）.TextBoxFor（model=>model.CommunicationDetailsViewModel[i].Address）.Name（“Address”）.HtmlAttributes（需要新的{@class=“k-textbox”，placeholder=“Address”，@maxlength=“32”}）
@Html.Label（“建筑物名称”）
@Html.Kendo（）.TextBoxFor（model=>model.CommunicationDetailsViewModel[i].BuildingName）.Name（“BuildingName”）.HtmlAttributes（需要新的{@class=“k-textbox”，placeholder=“Address”，@maxlength=“32”}）
}
@Html.Kendo（）.Button（）.Name（“btnSave”）.Content（“Save”）.HtmlAttributes（新的{type=“submit”，@class=“k-Button k-primary”}）
}

在

添加新地址

按钮上单击，我想生成一些字段，如国家下拉列表、州下拉列表、城市下拉列表，其中包含用于建筑名称、地址等的值和expty文本框。 当用户发布此表单时，应发布所有这些新添加的字段。这些字段是

通信Detailsviewmodel

的一部分。 因此，在我的操作中，我应该能够获得现有的以及新添加的字段

---

你知道如何实现这一点吗？

Razor本身并不擅长从这个意义上操纵DOM。您最好使用一些JavaScript或jQuery来获得您想要的效果。就我个人而言，我会在razor中创建字段，但设置样式，使它们在默认情况下隐藏。然后，您可以将单击处理程序附加到

addnewaddress

按钮，该按钮将调用一个函数来更改输入的样式以显示它们。如果需要验证消息，甚至可以使用jQuery在字段中添加和删除验证逻辑。但是，如果您想允许用户需要多少新地址，那么这种方法将不能很好地工作。在这种情况下，JS add new address函数必须动态地向表单中添加新字段，而不仅仅是显示隐藏的字段。希望这是有帮助的

参考一些选项和使用

BeginCollectionItem

的详细实现，我还认为创建字段并将其样式设置为隐藏是一个不错的选择。我必须在max与客户确认他要添加多少地址。但现在的问题是如何将所有这些控件的值发布到操作中？这些值是否属于

通信的tailsviewmodel

？