JQuery MVC集合名称属性

本文关键字:属性 集合 MVC JQuery | 更新日期: 2023-09-27 18:12:02

我有一个表,并且我已经动态地从中添加/删除了行。该表包含的字段将作为一个集合发送回MVC。在这个场景中,使用jquery更新表意味着我使用包含不完整集合的集合,例如…

function add() {
     $.ajax({
            url: "GetRow",
            type: 'post',
            dataType: 'html',
            timeout: 30000,
            data: {
                RowIndex: otherRows.length,
                "Item.Property1": $("option:selected", dropDown).text(),
                "Item.Property2": $("option:selected", dropDown).val()
            },
            success: function (result) {
                var newRow = $(result);
                tableBody.append(newRow);
            }
        });
}

这个函数使一个ajax调用去得到一个mvc动作结果,返回一行的结果在给定的索引和另外设置一些默认值从下拉菜单在我的页面。

现在让我们假设我有一个类似的函数名为"delete",其中使用jquery删除一行,此时表有3行(当然忽略头行),我要删除的行是中间行。

这意味着行中的字段最终看起来像这样…

//Row 1:
<input type="text" name="SomeCollection[0].Property1" /> 
//Row 2:
   Nothing, deleted of course
//Row 3: 
<input type="text" name="SomeCollection[2].Property1" /> 

所以如果我现在做一个回发,因为不一致的id范围,MVC模型绑定器只会为我绑定项目1,而项目2(实际上是客户端删除之前的项目3)没有映射。

这个想法是,我希望我的服务器逻辑做一个非常简单的"如果我的集合项目的id不在post数据中,从数据库中删除它",这样所有的集合操作都可以完全在客户端保存在这个非常沉重的页面上不断回发。

所以我开始在jquery中组合一个函数来解决这个问题…

function updateNames(table) {
    var rows = $("tr", table);
    var index = 0;
    rows.each(function () {
        var inputFields = $("input");
        inputFields.each(function (){
          //replace name="bla[<any number>].Anything" with 
          //        name="bla[" + index + "].Anything"        
        });
        index++;
    });
}
所以我的问题是……我怎么说jquery"替换[]在名称属性与[索引]"?

我知道这不能解决嵌套集合/其他复杂场景的问题,但是一旦我解决了这个函数,我就可以在以后扩展它,我的需求还没有涉及到。

编辑:

关于我当前思维模式的一些额外细节…好还是坏?

如果我抓住名称属性值和"走字符",直到我找到第一个"["和下一个"]",然后替换之间的一切,它应该解决我的问题,但这种类型的东西在IE上可能慢如地狱。

有人得到了一个简洁的"调用这个聪明的函数"类型的答案吗?(如果有的话)

编辑2:

哇,我真的要更努力地看…我现在感觉自己像个傻瓜,有两个原因(没有看,正则表达式是一个明显的解决方案)

JQuery:如何替换某些字符之间的所有?

如果我能找出正确的正则表达式,我已经得到了我的解决方案(也许这是我应该问的问题,因为我经常被正则表达式的疯狂所困扰)。

但是regex的功能不可低估:)

JQuery MVC集合名称属性

这应该可以为您工作:

function updateNames(table) {
    var rows = $("tr", table);
    var index = 0;
    rows.each(function () {
        var inputFields = $(this).find("input");
        inputFields.each(function (){
            var currentName = $(this).attr("name");
            $(this).attr("name", currentName.replace(/'[(.*?)']/, '['+index+']')); 
        });
        index++;
     });
}

如果每行有多个输入,你只是想更新一个,然后考虑使用'start with' jQuery选择器:http://api.jquery.com/attribute-starts-with-selector/.

虽然您已经有了解决方案,但我认为如何从头开始实现此功能的工作演示可能会很有用。

假设您在每一行上都有一个delete类的按钮,您可以使用以下命令实现:

$('.delete').click(function(e) {
    // Get table body and rows
    var body = $(this).closest('tbody');
    // Remove current row
    $(this).closest('tr').remove();
    // Get new set of rows from table body
    var rows = body.find('tr')
    // Update all indeces in rows
    var re = new RegExp(/'[[0-9]+']/);
    var index = 0;
    rows.each(function () {
        $(this).find('input').each(function (e) {
            var input = $(this).attr('name');
            if (input) {
                $(this).attr('name', input.replace(re, '['+index+']'));
            }
        });
        index ++;
    });
});

这应该删除行并更新其余行中每个输入的所有索引,以便它们再次正确地增加(因此将被模型绑定器正确绑定)。此外,它应该限制在当前表中。