Question

C＃MVC Web应用程序

我有一个按钮，可以在表单上动态添加输入字段到我的网页。我特意为动态添加的元素提供一个id和名称以符合我的模型，以便它们作为类似项的集合传回，以匹配模型中的“Artists”集合属性。

因此输入元素名称和ID例如是

Artists[0].artist
Artists[1].artist
Artists[2].artist

在我的模特中，我有：

   public Collection<Artist> Artists { get; set; }

    public class Artist
    {
        public string artist { get; set; }
    }

这是我添加删除元素的脚本：

var artists = new Array();

var AddArtist = function (e) {
    artistname = $("#artistinput").val();
    artists.push($("#artistinput").val());
    var addDiv, artistVal;
    addDiv = $("#artist");
    artistVal = $("#artistinput").val();

    var input_append = $('<div />'),
     label = $('<input />', {
         style: 'background-color:#e0ffff',
         Value: artistVal,
         id: 'artists[' + (artists.length - 1) + '].artist',
         name: 'artists[' + (artists.length - 1) + '].artist',
         readonly: true
     }),
     image = $('<img />', {
         id: 'removeartist',
         src: '/Content/bootstrap/img/cross-button.png',
         on: {
             click: function () {
                 input_append.remove();
                 artists.splice(artists.length - 1, 1);
                 var test = (artists.length - 1);
                 alert(test);
             }
         }
     }
                     );

    addDiv.append(input_append.append(label, image));

};

我可以添加/删除实际页面上的元素。问题是，如果我从中间或开头删除一个元素，名称ID的序列就会被破坏，当集合传递回我的模型时，Artists集合现在是空的。

所以而不是

Artists[0].artist
Artists[1].artist
Artists[2].artist

这可以传回来：

Artists[0].artist
Artists[2].artist

这不再是基于视图如何映射到模型的集合。

删除项目后，我需要按顺序重命名所有名称/ ID。

解决此问题的最简单方法是什么。

这样就会传回来

Artists[0].artist
Artists[1].artist

Answer 1

好的，这是我在之前的一个项目中用来修改输入的ID和名称，以便在发布到MVC控制器时允许模型绑定。

第一个函数接受一个对象并搜索其中包含的所有输入，选择和textareas。您传递的对象可能是包含每位艺术家所有相关输入的行或div。

// Applies new id and name with correct number sequence to set fields
function reviseFieldNameAndId(obj, newNumber) {
    obj.find('input,select,textarea').each(function () {
        var parts = this.id.split(/_[\d+]__/); // Everything can be obtained from id only
        this.id = parts[0] + '_' + newNumber+ '__' + parts[1]; // Payments_0__PaymentReasonId
        this.name = parts[0] + '[' + newNumber+ '].' + parts[1]; // eg. Payments[0].PaymentReasonId
    });
}

function reviseAllFieldNamesAndIds() {
    $('#artists .row').each(function (index) {
        reviseFieldNameAndId($(this), index);
    });
}

使用第二个函数遍历所有行并执行应用新序列。

PS - 您的回答与此相近，但仅适用于艺术家，而我的将使用不同的名称和ID

Answer 2

我为每个动态添加的输入项提供了相同的类名，然后使用JavaScript更新并按顺序重新排序每个元素的id和名称：

 $('.divArtist').each(function (i, obj) {
                     this.id = 'artists[' + i + '].artist';
                     this.name = 'artists[' + i + '].artist';
                 });

如何重命名元素ID以符合模型序列集合

2 个答案: