1

C# MVC Web 应用程序

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

所以输入元素名称和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
4

2 回答 2

1

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

第一个函数接受一个对象并搜索其中包含的所有输入、选择和文本区域。您传递的对象可能是包含每个艺术家所有相关输入的行或 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

于 2013-09-03T08:48:35.837 回答
0

我为每个动态添加的输入项赋予相同的类名，然后使用 JavaScript 以有序序列更新和重新排序每个元素 id 和名称：

 $('.divArtist').each(function (i, obj) {
                     this.id = 'artists[' + i + '].artist';
                     this.name = 'artists[' + i + '].artist';
                 });
于 2013-09-03T02:23:01.660 回答