Question

我的视图模型中有一个Guitar对象列表。

 public List<Guitar> Guitars { get; set; }

用户可以通过单击按钮创建这些（感谢JQuery clone（））。我注意到他们是否删除了第一个列表项（[0]）模型返回一个空列表，或者如果它们删除了列表中间的东西，如[1]，模型只返回列表中的项目[0]。 p>

我在原始请求中看到所有项目都存在，所以我猜我有两个选择 - 也许有人有不同的方法？

1。在控制器中的原始Request数组上操作，如下所示：

[HttpPost]
public ActionResult Index(CustomerViewModel customer)
{

        var guitars = new List<Guitar>();
        var listValues = new List<string>();
        var numGuitars = 0;

        //Loop through all Request keys in the POST
        foreach (string key in Request.Form.AllKeys)
        {

            //Save any that are part of the Guitar object
            if (key.StartsWith("Guitars["))
            {
               listValues.Add(key);
            }

       }

       //Guitar object has 3 properties so divide by 3 to get total object count
       numGuitars = (int)Math.Ceiling(listValues.Count / 3.0);

        for (int i = 0; i < numGuitars; i++)
        {

            var guitarMake = Request["Guitars[" + i + "].Make"];
            var guitarModel = Request["Guitars[" + i + "].Model"];
            var guitarProductonYear = Request["Guitars[" + i + "].ProductionYear"];

            if (!String.IsNullOrEmpty(guitarMake) &&
                !String.IsNullOrEmpty(guitarModel) &&
                !String.IsNullOrEmpty(guitarProductonYear))
            {
                var g = new Guitar
                    {
                        Make = guitarMake,
                        Model = guitarModel,
                        ProductionYear = Int32.Parse(guitarProductonYear)
                    };
                guitars.Add(g);
            }
        }

2。当用户删除项目时，使用JQuery重新分配列表索引，这样我们就是顺序的。

第3。还有什么吗？

表单HTML

 <div id="guitars_1" style="display: block;">
    <input type="text" value="" name="Guitars[0].Make" id="Guitars_0__Make" placeholder="Make">
    <input type="text" value="" name="Guitars[0].Model" id="Guitars_0__Model" placeholder="Model">
</div>
 <div id="guitars_2" style="display: block;">   
    <input type="text" value="" name="Guitars[1].Make" id="Guitars_1__Make" placeholder="Make">
    <input type="text" value="" name="Guitars[1].Model" id="Guitars_1__Model" placeholder="Model">
</div>
    <div id="guitars_3" style="display: block;">
    <input type="text" value="" name="Guitars[2].Make" id="Guitars_2__Make" placeholder="Make">
    <input type="text" value="" name="Guitars[2].Model" id="Guitars_2__Model" placeholder="Model">
</div>

<!-- Start Add Guitar Row Template -->
<div style="display:none">
     <div id="guitarsTemplate">
            <div class="formColumn1"><label>Guitar</label></div>
            <div class="formColumn2">@Html.TextBoxFor(model => model.Guitars[0].Make, new { Placeholder = "Make" })
                 <div class="messageBottom"> 
                             @Html.ValidationMessageFor(model => model.Guitars[0].Make)
                  </div>
             </div>
            <div class="formColumn3">@Html.TextBoxFor(model => model.Guitars[0].Model, new { Placeholder = "Model" })
                <div class="messageBottom"> 
                    @Html.ValidationMessageFor(model => model.Guitars[0].Model)
                </div>
            </div>
             <div class="formColumn4">@Html.TextBoxFor(model => model.Guitars[0].ProductionYear, new { Placeholder = "Production Year" })
                         <div class="messageBottom"> 
                             @Html.ValidationMessageFor(model => model.Guitars[0].ProductionYear)
                         </div><a class="icon delete">Delete</a>
                      </div>

      </div>
</div>    
<!-- End Add Guitar Row Template -->

克隆和删除项目的JS

  $(document).ready(function() {
        var uniqueId = 1;
        var ctr = 0;
        $(function() {
            $('.js-add-guitar-hyperlink').click(function() {

                var copy = $("#guitarssTemplate").clone(true).appendTo("#addGuitarSection").hide().fadeIn('slow');
                var guitarDivId = 'guitars_' + uniqueId;
                var copyText = copy.html();

                copyText = copyText.replace(/Guitars\[0\]/g, 'Guitars[' + ctr + ']');
                copyText = copyText.replace('Guitars_0', 'Guitars_' + ctr);
                copy.html(copyText);
                $('#guitarsTemplate').attr('id', guitarDivId);

                var deleteLink = copy.find("a.icon.delete");
                deleteLink.on('click', function() {
                    copy.fadeOut(300, function() { $(this).remove(); }); //fade out the removal

                });

                $('#' + cosponsorDivId).find('input').each(function() {
                    //$(this).attr('id', $(this).attr('id') + '_' + uniqueId);
                   // $(this).attr('name', $(this).attr('name') + '_' + uniqueId);



                });

                uniqueId++;
                ctr++;
            });
        });
    });

Answer 1

对于MVC中的这种动态列表管理，你可能会比看看BeginCollectionItem HtmlHelper更糟糕：

模型中的非顺序列表

1 个答案: