Добрый день. Мне нужна помощь от знающих 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)})
})
