MVC如何动态地将输入字段添加到视图模型中

本文关键字：添加 字段 输入 视图 模型 何动态 动态 MVC | 更新日期: 2023-09-27 18:19:45

嗨，我有一个使用以下视图模型的表单

    public class MainViewModel
    {
        public int Id { get; set; }
        public List<LotViewModel> Lots { get; set; }
        [DisplayName("Number of Lots")]
        public int NumberOfFields { get; set; }
    }

NumberOfFields在for循环中用于渲染LotViewModels。用户从下拉列表中选择1->4中的一个数字。有一个JS函数，它使用AJAX调用Controller方法来呈现包含正确数量字段的部分视图。当下拉列表发生变化时，会触发此JS函数。

这是控制器方法

[HttpPost]
public PartialViewResult AddLotFields(int numberOfFields)
{
    var viewModel = new MainViewModel
    {
        Lots = new List<LotViewModel>(),
        NumberOfFields = numberOfFields
    };
    return PartialView("~/Areas/Admin/Views/MainController/_LotForm.cshtml", viewModel);
}

这是Javascript

$(function() {
$("#numberOfLotsDD").change(function(event) {
    $.ajax({
        url: window.g_baseUrl + "MainController/AddLotFields/",
        data: {
            numberOfFields: $(this).val()
        },
        cache: false,
        type: "POST",
        dataType: "html",
        success: function(data, textStatus, XMLHttpRequest) {
            $("#LotFields").html(data);
        }
    });
});
});

这很好，但当您提交表单时，viewModel在Lots中不包含任何元素。

呈现输入字段的局部视图是

@model MainViewModel
@for (var i = 0; i < Model.NumberOfFields; i++)
{
    Model.Lots.Add(new LotViewModel());
    <div class="row">
        <div class="col-md-6">
            <div class="form-group ">
                @Html.LabelFor(model => model.Lots.Last().BatchIdLocation)
                @Html.TextBoxFor(model => model.Lots.Last().BatchIdLocation, new { @class = "form-control", @placeholder = "Enter Batch Id tag" })
                @Html.ValidationMessageFor(model => model.Lots.Last().BatchIdLocation)
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group ">
                @Html.LabelFor(model => Model.Lots.Last().QuantityLocation)
                @Html.TextBoxFor(model => Model.Lots.Last().QuantityLocation, new { @class = "form-control", @placeholder = "Enter Quantity tag" })
                @Html.ValidationMessageFor(model => Model.Lots.Last().QuantityLocation)
            </div>
        </div>  
    </div>
}

我想了几种方法来保存这种表格，但都没用。

我知道如果我真的陷入困境，我可以使用JQuery将表单输入值发送到我的控制器。但如果可能的话，我想避免这种情况，并将解决方案限制在c#和剃刀

MVC如何动态地将输入字段添加到视图模型中

您的字段名需要采用Lots[N].PropertyName的形式，但您的字段名称仅生成为PropertyName。

不使用model.Lots.Last()，而是使用实际索引，即model.Lots[i]。

Suggestion-您可以在服务器端自己创建集合中的项，而不是传递一个标志来查看以生成项数。

[HttpPost]
public PartialViewResult AddLotFields(int numberOfFields)
{
    var lots = new List<LotViewModel>();
    for (int index = 0; index < numberOfFields; index++)
    {
        lots.Add(new LotViewModel());
    }
    return PartialView("~/Areas/Admin/Views/MainController/_LotForm.cshtml", lots);
}

这也将使您能够使用外部因素相关值初始化视图模型属性。

因此，视图的变化如下：

@model List<LotViewModel>
@for (var i = 0; i < Model.Count; i++)
{
    <div class="row">
        <div class="col-md-6">
            <div class="form-group ">
                @Html.LabelFor(model => model.Lots[i].BatchIdLocation)
                @Html.TextBoxFor(model => model.Lots[i].BatchIdLocation, new { @class = "form-control", @placeholder = "Enter Batch Id tag" })
                @Html.ValidationMessageFor(model => model.Lots[i].BatchIdLocation)
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group ">
                @Html.LabelFor(model => model.Lots[i].QuantityLocation)
                @Html.TextBoxFor(model => model.Lots[i].QuantityLocation, new { @class = "form-control", @placeholder = "Enter Quantity tag" })
                @Html.ValidationMessageFor(model => model.Lots[i].QuantityLocation)
            </div>
        </div>  
    </div>
}

上述更改还将在html中为每个字段创建适当的名称，以便在表单post中适当地发布数据。

相关文章：