如何在删除中间的一项时绑定 ASP.NET MVC 中的对象列表

Question

我在将模型绑定到 MVC 中的列表时遇到问题。我的页面具有动态添加和删除文本框的功能。我的页面 HTML 将是

<form id="prdt">
    <div id="div_0"> <input type="text" name="products[0].Name" value="Coffee"/><button id="0" onclick="return DeleteLocation(this.id)">Delete</button></div>
    <div id="div_1"> <input type="text" name="products[1].Name" value="Tea" /><button id="1" onclick="return DeleteLocation(this.id)">Delete</button></div>
    <div id="div_2"> <input type="text" name="products[2].Name" value="Cola" /><button id="2" onclick="return DeleteLocation(this.id)">Delete</button></div>
    <div id="div_3"> <input type="text" name="products[3].Name" value="Pepsi" /><button id="3" onclick="return DeleteLocation(this.id)">Delete</button></div>
</form>

下面是删除文本框的代码

<script type="text/javascript">
    function DeleteLocation(id) {           
       $("#div_" + id).remove();
    }
</script>

但是当我删除 "Cola" 文本框并执行 ajax post 时，我的列表中只有咖啡和茶（控制器操作 Post）。即列表中省略了最后一个

同样，当我删除 "Tea" 文本框并执行 ajax post 时，我只喝咖啡。即其他三个值被排除在列表中。

我认为列表与列表索引绑定。即使删除了中间的任何项目，是否有任何方法可以获取所有值。

Answer 1

可以通过添加名为 products.Index 的特殊字段以及下一个索引的值来完成。您需要为每个新索引重复该操作：

<form id="prdt">
    <div id="div_0">
        <input type="hidden" name="products.Index" value="0" />
        <input type="text" name="products[0].Name" value="Coffee"/>
        <button id="0" onclick="return DeleteLocation(this.id)">Delete</button>
    </div>
    <div id="div_1"> 
        <input type="hidden" name="products.Index" value="1" />
        <input type="text" name="products[1].Name" value="Tea" />
        <button id="1" onclick="return DeleteLocation(this.id)">Delete</button>
    </div>
    <div id="div_2"> 
        <input type="hidden" name="products.Index" value="2" />
        <input type="text" name="products[2].Name" value="Cola" />
        <button id="2" onclick="return DeleteLocation(this.id)">Delete</button>
    </div>
    <div id="div_3"> 
        <input type="hidden" name="products.Index" value="3" />
        <input type="text" name="products[3].Name" value="Pepsi" />
        <button id="3" onclick="return DeleteLocation(this.id)">Delete</button>
    </div>
</form>

您可以在 this article 部分 'Non-Sequential Indices'

中找到更多信息

Answer 2

您可以扩展您的 javascript 功能，为您的产品系列赋予正确的名称：

<form id="prdt">
<div id="div_0">
    <input type="text" name="products[0].Name" class="product" value="Coffee"/>
    <button id="0" onclick="return DeleteLocation(this.id)">Delete</button>
</div>
<div id="div_1"> 
    <input type="text" name="products[1].Name" class="product" value="Tea" />
    <button id="1" onclick="return DeleteLocation(this.id)">Delete</button>
</div>
<div id="div_2">
    <input type="text" name="products[2].Name" class="product" value="Cola" />
    <button id="2" onclick="return DeleteLocation(this.id)">Delete</button>
</div>
<div id="div_3"> 
    <input type="text" name="products[3].Name" class="product" value="Pepsi" />
    <button id="3" onclick="return DeleteLocation(this.id)">Delete</button>
</div>

<script type="text/javascript">
    function DeleteLocation(id) {
        $("#div_" + id).remove();
        $(".product").each(function(i){
            $(this).prop('name',"products["+i+"].Name" );
        }); 
    };
</script>

这是删除 'Tea' 产品和 post 控制器操作后的结果。

如何在删除中间的一项时绑定 ASP.NET MVC 中的对象列表

How to bind list of objects in ASP.NET MVC when one item in between is deleted

c#

asp.net-mvc

asp.net-mvc-3

c#-4.0

model-view-controller