Публикация данных, связанных с динамически создаваемыми элементами html mvc5

Question

Im разрабатывает приложение mvc5. В представлении я динамически генерирую html-элементы (текстовые поля и dropdownlists), используя возвращаемый результат json и jquery. Теперь я хочу опубликовать выбранные идентификаторы данных из ddls и ввести тексты в текстовые поля на сервер. И id, и тексты сохраняются в базе данных в формате nvarchar. Количество динамически генерируемых ddls и текстовых полей изменяется в зависимости от результата json.

Это результат JSON

var x = db.ItemTemplates.Where(a => a.MainGroupId == mnId).Where(a => a.SubGruopId == sbId).FirstOrDefault(); 
     var ids = new List<int> { x.Atribute1, x.Atribute2, x.Atribute3, x.Atribute4 }; 
var y = db.Atributes.Where(a => ids.Contains(a.AtributeId)).Select(g => new 
      { 
       Name = g.AtributeName, 
       Options = g.atributeDetails.Where(w=>w.AtributeDetailId!=null).Select(z => new 
       { 
        Value=z.AtributeDetailId, 
        Text=z.AtDetailVal 
       }) 
      }); 

Посмотреть кратко

@using (@Html.BeginForm("Save", "Item")) 
{ 
    @Html.DropDownListFor(a => a.MainGrpId, new SelectList(ViewBag.mnGrpList,  "MainGroupId", "MainGroupName"), " Select a MainGroup", new { Class = "form- control", title = "", style = "width:175px;height:30px; margin-top:6px;" }) 

    @Html.DropDownListFor(a => a.SubGrpId, new SelectList(ViewBag.sbGrpList, "SubGroupId", "SubGroupName"), " Select a SubGroup", new { Class = "form-control", title = "", style = "width:175px;height:30px; margin-top:6px;" }) 

    <div id="ss" class="col-md-6"> 

    </div> 

    <input type="submit" value="Save" class="btn btn-success" /> 

}

Jquery

var ss = $('#ss'); 
$('#SubGrpId').change(function() { 
    $('#ss').empty(); 
    $.ajax({ 
     url: '@Url.Action("FillItem", "Item")', // dont hard code your url's 
     type: "GET", 
     dataType: "JSON", 
     data: { MnId: $('#MainGrpId').val(), SbId: $(this).val() }, // pass the selected value 
     success: function (y) { 
      $.each(y, function (l, u) { 
       // add the label 
       var name = u.Name; 
       var label = $('<label></label>').text(name).attr('for', name); 
       ss.append(label); 
       if (u.Options.length==0) { 
        // There is only one item and its for generating a textbox 
        var input = $('<input>').attr({ type: 'text', id: name, name: name }); 
        ss.append(input); 
       } else { 
        // Its a select 
        var select = $('<select></select>').attr({ id: name, name: name }); 
        // add each option 
        $.each(u.Options, function (i, option) { 
         select.append($('<option></option>').val(option.Value).text(option.Text)); 
        }) 
        ss.append(select); 
       } 
      }); 
     }, 
     error: function() { 
      alert("something wrong"); 
     } 
    }); 
}); 

ItemModel (6 Свойства типа строка для DDL, выбраны и текстовое поле ое и введенные значения, только несколько полей из этих 6 будут использоваться при сохранении, последовательность не имеет значения)

public class Item 
{ 
    [Key] 
    public int ItemId { get; set; } 

    public string ItemName { get; set; } 

    public int MainGrpId { get; set; } 

    public int SubGrpId { get; set; } 

    public string Field01 { get; set; } 
    public string Field02 { get; set; } 
    public string Field03 { get; set; } 
    public string Field04 { get; set; } 
    public string Field05 { get; set; } 
    public string Field06 { get; set; } 

} 

ViewModel (неполный)

public class ItemViewModel 
{ 
    public int MainGrpId { get; set; } 

    public int SubGrpId { get; set; } 
} 

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

Answer 1

Текущий код придает элементам формы атрибут name, равный свойству AtributeName по вашему запросу, который не относится к вашей модели. В name атрибуты должны быть name="Field01", name="Field02" и т.д.

Изменить вам скрипт

var ss = $('#ss'); 
$('#SubGrpId').change(function() { 
    $('#ss').empty(); 
    $.ajax({ 
    url: '@Url.Action("FillItem", "Item")', // dont hard code your url's 
    type: "GET", 
    dataType: "JSON", 
    data: { MnId: $('#MainGrpId').val(), SbId: $(this).val() }, 
    success: function (y) { 
     $.each(y, function (l, u) { 
     // define the name attribute for the form controls 
     var name = 'Field0' + (1 + l); // generates Field01, Field02 
     // add the label 
     var label = u.Name; 
     var label = $('<label></label>').text(label).attr('for', name); 
     ss.append(label); 
     .... 

Ваши управления формы теперь будет связываться с методом POST, который имеет параметр Item - например, public ActionResult Edit(Item model)