如何使用对象列表将剃刀视图绑定到模型？

如何解决如何使用对象列表将剃刀视图绑定到模型？

使用 Razor 代码，如何将小部件列表绑定到模型中的 List<WidgetModel>？我认为有一种简单的标准方法可以做到这一点，因为这似乎是一个常见的场景。

我有一个包含小部件列表的模型，如下所示：

public class CustomerModel
{
    public List<WidgetsModel> widgets { get; set; }
}

我还有一个用户可以添加小部件的视图

<input type="button" id="add-link" value="Add"/>

<div class="widget-wrapper">

    <p>Widget Name:</p>
    @Html.TextBoxFor(m => m.widgets.name)

    <p>Widget Price:</p>
    @Html.TextBoxFor(m => m.widgets.price)
  
    <hr>
</div>

<script type="text/javascript">
    $('#add-link').on('click',function(){
        var x = $('.widget-wrapper')[0].outerHTML;
        $(x).insertAfter(this);
    });
</script>

解决方法

这是一个工作演示。当点击添加按钮时，它会创建一个名称输入和一个价格输入。如果填写输入，然后点击提交按钮，它会将整个数据发布到操作中。

型号：

public class CustomerModel
    {
        public List<WidgetsModel> widgets { get; set; }
    }
    public class WidgetsModel {
        public string name { get; set; }
        public int price { get; set; }

    }

查看：

<form method="post">
    <input type="button" id="add-link" value="Add" />
    <div class="widget-wrapper">
        @for (var i = 0; i < Model.widgets.Count(); i++)
        {


            <p>Widget Name:</p>
            @Html.TextBoxFor(m => m.widgets[i].name)

            <p>Widget Price:</p>
            @Html.TextBoxFor(m => m.widgets[i].price)

            <hr>


        }

    </div>
    <input type="submit" id="add-link" value="Submit" />
</form>
<script type="text/javascript">
    
    $('#add-link').on('click',function () {
        var count = $('input[name*="name"]').length;
        var html = '<p>Widget Name:</p><input id = "widgets_' + count + 'name" name = "widgets[' + count + '].name" type = "text" ><p> Widget Price:</p> <input id="widgets_' + count + '__price" name="widgets[' + count + '].price" type="text" ><hr>';
        $('.widget-wrapper').append(html);
    });
</script>

控制器：

[HttpGet]
        public IActionResult TestCustomerModel() {
            CustomerModel c = new CustomerModel { widgets = new List<WidgetsModel> { new WidgetsModel { name = "w1",price = 1 },new WidgetsModel { name = "w2",price = 2 },new WidgetsModel { name = "w3",price = 3 } } };
            return View(c);
        }
        [HttpPost]
        public IActionResult TestCustomerModel(CustomerModel c)
        {
           
            return Ok();
        }

结果：

,

你能详细说明一下这个问题吗？你到底想做什么。您想在视图中显示小部件列表吗？

你可以参考这个线程。它可以解决你的问题 IOException: The process cannot access the file 'file path' because it is being used by another process