Динамическое добавление полей и формирование 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)})
    })

В общем добавляю таким образом:

var timer=0;
$(".plus").off("click").on("click",function(){
  timer++;
  $(".details").append(`         <input class="copy-input" type="text" name="details_name${timer}" />
            <input class="copy-input" type="text" name="details_value${timer}" />`)
})

разметку чуть изменил:

<div class="details">
            <input class="copy-input" type="text" name="details_name" />
            <input class="copy-input" type="text" name="details_value" />
        </div>

Осталось как-то отправить это все дело на сервер.

fieldset является элементом формы, а не наоборот.

laimas,
спасибо за замечание, поправил

Ну а об остальном, так это сначала нужно задаться вопросом "что такое товар" и только затем как его добавлять.

Товары описаны в базе, и это несколько основных полей - наименование, цена, описание. С этой таблицей могут быть связаны таблицы "Производитель", "Характеристики", "Изображения" и т.п.

Это значит, что при добавлении товара сервер возвращает готовую форму, а речь о добавлении поля для формы может возникнуть тогда, когда например товар имеет характеристику, которая не описана в базе. Но в этом случае нужно добавлять новую характеристику в таблицу "Характеристики" (редактирование таблицы), а не в форму добавления товара.

С какой стати возникает потребность добавления поля описания товара, которое уже должно быть в форме?

laimas,
Вы все верно описали, так и есть. У меня таблица Товаров связана с таблицами "Категории", "Производители", и "Изображения". А динамически добавляются поля, для таблицы "Характеристики".
Добавлять новые поля получилось. Теперь проблема в том, что при отправлении на сервер, эти новые поля до него не доходят. Я так понимаю, что необходимо сформировать JSON объект, но не получается.

Если говорить о добавлении характеристик во время добавления товара, то добавление должно быть в случае если в базе таковых нет. Это означает, что в форме есть список имеющихся характеристик и кнопка "Добавить новую" или подобная. Такого в вашей форме не наблюдается, да и такое добавление должно базироваться на проверке сервером добавляемых характеристик налету, так как само добавление товара может порождать ошибки, а значит сам диалог клиент-сервер обрабатывающий примем формы будет не простым. То есть вполне возможны ситуации когда могут появится несвязанные данные. Но если прием построен по уму, можно и так, вот только name="details_name", это как посмотреть, все зависит от серверного языка, так что вполне можно получить последнюю даже если добавлялась дюжина.

Серверу для приема формы никакого JSON не требуется, отправляя форму естественным образом сервер получает же не JSON. Код отправки формы покажите.

laimas,
на id не обращайте внимание, это для проверки просто

[HttpPost]
        public ActionResult CreatePart(AddPartViewModel model, HttpPostedFileBase uploadImage)
        {
            ViewBag.Categories = new SelectList(_db.bs_categories, "categories_id", "categories_name");
            ViewBag.Brands = new SelectList(_db.bs_brands, "brands_id", "brands_name");
            if (ModelState.IsValid && model.part != null)
            {
                model.part.parts_brand_id = 3;
                model.part.parts_category_id = 3;
                _db.bs_parts.Add(model.part);
                if (model.detail != null)
                {
                    foreach (var details in model.detail)
                    {
                        details.details_part_id = 8;
                        _db.bs_details.Add(details);
                        _db.SaveChanges();
                    }
                }
                if (ModelState.IsValid && uploadImage!=null)
                {
                    byte[] imageData = null;
                    using (var binaryReader = new BinaryReader(uploadImage.InputStream))
                    {
                        imageData = binaryReader.ReadBytes(uploadImage.ContentLength);
                    }
                    model.image.image_part_id = model.part.parts_id;
                    model.image.images_image = imageData;
                    _db.bs_images.Add(model.image);

                }
                //добавить else if () {...} если модель есть, а изображения нет
                _db.SaveChanges();
                return RedirectToAction("Main");
            }
            return View(model);
        }

Вот что сейчас приходит на сервер:

У вас используется ASP .NET?

laimas,
да