Question

我正在使用ASP.Net MVC和Jquery创建一个页面，其中包含一个联系人详细信息部分，允许用户输入不同的联系人详细信息：

           <div id='ContactDetails'>

                <div class='ContactDetailsEntry'>
                <select id="venue_ContactLink_ContactDatas[0]_Type" name="venue.ContactLink.ContactDatas[0].Type"><option>Email</option>
                    <option>Phone</option>
                    <option>Fax</option>
                </select>
                <input id="venue_ContactLink_ContactDatas[0]_Data" name="venue.ContactLink.ContactDatas[0].Data" type="text" value="" />
                </div>  
            </div>
            <p>
                <input type="submit" name="SubmitButton" value="AddContact" id='addContact'/>
</p>

按下该按钮应该将一个模板化版本的ContactDetailsEntry分类div添加到页面中。但是，我还需要确保每个id的索引递增。

我已设法使用以下功能执行此操作，该功能在单击按钮时触发：

function addContactDetails()
    {
        var len = $('#ContactDetails').length;

        var content = "<div class='ContactDetailsEntry'>";
            content += "<select id='venue_ContactLink_ContactDatas["+len+"]_Type' name='venue.ContactLink.ContactDatas["+len+"].Type'><option>Email</option>";
             content += "<option>Phone</option>";
             content += "<option>Fax</option>";
             content += "</select>";
             content += "<input id='venue_ContactLink_ContactDatas["+len+"]_Data' name='venue.ContactLink.ContactDatas["+len+"].Data' type='text' value='' />";
             content += "</div>";
        $('#ContactDetails').append(content);
    }

这很好用，但是如果我更改html，我需要在两个地方更改它。

我考虑过使用clone（）来做这件事但有三个问题：

编辑：我找到了问题的答案，如下所示：

（这是一个我无法找到答案的常见问题）如何为包含有角度括号的id创建选择器，因为jquery将这些用于属性选择器。 编辑：回答使用\来转义括号，$('#id\\[0\\]')
如何更改树中的ID。

编辑：我创建了一个函数，如下所示：

function updateAttributes(clone, count) { 
        var f = clone.find('*').andSelf();
        f.each(function(i){
                        var s = $(this).attr("id");
        if (s!=null&& s!="")
        {
        s = s.replace(/([^\[]+)\[0\]/, "$1["+count+"]");
        $(this).attr("id", s);
        }});

使用克隆集和该集的现有版本计数调用时，这似乎有效。它并不理想，因为我需要为名称和属性执行相同的操作。我将继续努力，并在我有一个答案时添加答案。我很感激任何进一步的评论，我将如何改进它，以便对asp.net mvc可能创建的所有标签和属性进行通用。

如何从模板克隆，即不从已输入数据的活动字段集克隆，或将字段返回到克隆集上的默认值。

Answer 1

您可以为所有条目命名输入字段相同，选择一个输入组合并给出一致的名称，以便修改您的代码：

       <div id='ContactDetails'>

            <div class='ContactDetailsEntry'>
            <select id="venue_ContactLink_ContactDatas_Type" name="venue_ContactLink_ContactDatas_Type"><option>Email</option>
                <option>Phone</option>
                <option>Fax</option>
            </select>
            <input id="venue_ContactLink_ContactDatas_Data" name="venue_ContactLink_ContactDatas_Data" type="text" value="" />
            </div>  
        </div>
        <p>
            <input type="submit" name="SubmitButton" value="AddContact" id='addContact'/>
</p>

我可能会使用Javascript在页面上创建第一个条目，然后只有一个地方可以修改HTML。

提交时，您会得到两个数组名称“venue_ContactLink_ContactDatas_Type”和“venue_ContactLink_ContactDatas_Data”，其中包含联系对的匹配标记，即

venue_ContactLink_ContactDatas_Type[0], venue_ContactLink_ContactDatas_Data[0]
venue_ContactLink_ContactDatas_Type[1], venue_ContactLink_ContactDatas_Data[1]
...
venue_ContactLink_ContactDatas_Type[*n*], venue_ContactLink_ContactDatas_Data[*n*]

希望这很清楚。

Answer 2

所以，我有一个在我的情况下有效的解决方案，但如果包含其他元素类型，或者如果其他属性由包含索引设置，则需要进行一些调整。

我将依次回答我的问题：

要选择包含方括号的元素，其属性使用双反斜杠转义方括号，如下所示：var clone = $（“＃contactFields \ [0 \]”）。clone（）;

＆安培; 3.使用以下函数更改树中的ID，其中clone是变量clone（在1中），count是克隆语句的计数。

function updateAttributes（clone，count）{ var attribute = ['id'，'for'，'name']; var f = clone.find（'*'）。andSelf（）; f.each（功能（I）{

                var tag = $(this);

        $.each(attribute, function(i, val){

                var s = tag.attr(val);
                if (s!=null&& s!="")
                    {
                    s = s.replace(/([^\[]+)\[0\]/, "$1["+count+"]");
                    tag.attr(val, s);
                    }
        });
 if ($(this)[0].nodeName == 'SELECT')
 { $(this).val(0);}
 else
 {
     $(this).val("");
 }
});

}

这可能不是最有效的方式或最好的方式，但它确实适用于我使用过的情况。如果需要，可以扩展属性数组，并且需要在默认操作中包含更多元素结束，例如对于复选框。

使用不同的ID多次将模板div添加到页面

2 个答案: