добавить шаблонный div на страницу несколько раз с разными идентификаторами

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>

Предполагается, что нажатие кнопки добавляет шаблонную версию div-элемента ContactDetailsEntry на страницу. Однако я также должен убедиться, что индекс каждого идентификатора увеличивается.

Мне удалось сделать это с помощью следующей функции, которая срабатывает при нажатии кнопки:

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 () для этого, но у меня есть три проблемы:

РЕДАКТИРОВАТЬ: я нашел ответы на вопросы, как показано ниже:

1. (это общая проблема, на которую я не могу найти ответ) как мне создать селектор для идентификаторов, которые содержат угловые скобки, так как jquery использует их для селектора атрибута. РЕДАКТИРОВАТЬ: Ответ с помощью \, чтобы выйти за скобки, т. Е. $('#id\\[0\\]')
2. как мне изменить идентификаторы в дереве.

РЕДАКТИРОВАТЬ: Я создал функцию следующим образом:

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.

3. как мне клонировать из шаблона, т.е. не из активного набора полей, в который уже введены данные, или вернуть полям их значения по умолчанию в клонированном наборе.

Answer 1

Итак, у меня есть решение, которое работает в моем случае, но потребует некоторой корректировки, если включены другие типы элементов или если другие атрибуты установлены с включенным индексом.

Я отвечу на мои вопросы по очереди:

1. Чтобы выбрать элемент, который содержит квадратные скобки в его атрибутах, избегайте квадратных скобок, используя двойные косые черты следующим образом: var clone = $ ("# contactFields \ [0 \]"). Clone ();

2. & 3. Изменение идентификаторов в дереве я реализовал с помощью следующей функции, где clone - это переменная clone (в 1), а count - это количество клонированных операторов.

   функция updateAttributes (клон, счетчик) { var attribute = ['id', 'for', 'name']; var f = clone.find ('*'). andSelf (); f.each (функция (я) {

                   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("");
    }
   });
   

   }

Возможно, это не самый эффективный или лучший способ, но он работает в моих случаях, в которых я его использовал. Массив атрибутов может быть расширен, если требуется, и дополнительные элементы должны быть включены в действие по умолчанию на конец, например для флажков.

Answer 2

Вы можете просто назвать поле ввода одинаковым для всех записей, сделать комбо ввода select и дать ему непротиворечивое имя, так что измените код:

       <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 для создания первой записи на странице, готовой, а затем есть только 1 место для пересмотра 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*]

Надеюсь, это понятно.