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

【问题标题】：How to bind razor view to model with list of objects?如何使用对象列表将剃刀视图绑定到模型？
【发布时间】：2021-01-27 18:39:54
【问题描述】：

使用 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>

【问题讨论】：

标签： c# asp.net-mvc asp.net-core .net-core razor

【解决方案1】：

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

型号：

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

结果：

【讨论】：

【解决方案2】：

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

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

【讨论】：