Показать сообщение отдельно
  #1 (permalink)  
Старый 03.05.2017, 09:31
Аспирант
Отправить личное сообщение для Scantraxx Посмотреть профиль Найти все сообщения от Scantraxx
 
Регистрация: 11.12.2016
Сообщений: 47

Динамическое добавление полей и формирование JSON
Добрый день. Мне нужна помощь от знающих js, так как я полный наб.
Делаю форму добавления товара в интернет-магазин. Форма является частичным представлением на странице, по этому хочу использовать AJAX, чтобы добавлять поля динамически, без обновления страницы.
<fieldset>
        <form>
        <legend>Добавить деталь</legend>
        <div>
            <p>
                Выбрать категорию:
                @Html.DropDownList("Categories");
            </p>
        </div>

        <div>
            <p>
                Выбрать производителя:
                @Html.DropDownList("Brands");
            </p>
        </div>

        <div>
            <p>
                Название модели:
                @Html.EditorFor(model=>model.part.parts_model)
                @Html.ValidationMessageFor(model=>model.part.parts_model)
            </p>
        </div>

        <div>
            <p>
                Цена:
                @Html.EditorFor(model=>model.part.parts_price)
                @Html.ValidationMessageFor(model=>model.part.parts_price)
            </p>
        </div>

        <div>
            <p>
                Количество:
              @Html.EditorFor(model=>model.part.parts_amount)
              @Html.ValidationMessageFor(model=>model.part.parts_amount)  
            </p>
        </div>

            <div class="details">
                <input type="text" name="details_name" />
                <input type="text" name="details_value" />
                </div>
            <div><p><a class="plus">Добавить описание</a></p></div>

        <div>
            <input type="file" name="uploadImage" />
        </div>
            </form>

        <div>
            <input type="submit" value="Сохранить" />
        </div>
    </fieldset>


После нажатия на "Добавить описание", необходимо добавить 2 поля, аналогичные классу "details". После submit, соответственно сформировать json и отправить на сервер.
Не знаю, можно ли сформировать JSON из Razor элементов, может по другому как-то сделать, может обойтись без JSON.
Получалось добавлять товар, вручную задавая количество полей и задавая им индексы:
<div>
<p>
     Название характеристики:
     Html.EditorFor(model=>model.detail[0].details_name)
     </p>
     </div>

<div>
<p>
      Значение:
      Html.EditorFor(model=>model.detail[0].details_value)
      </p>
      </div>


Пытаюсь добавлять поля таким образом:
$(function() {
        $('form').on('click', 'a.plus', function() {
            var fld = $(this).closest('div').prev().find('div.details').last(), add=fld.clone().val('');
            fld.after(add)})
    })
Ответить с цитированием