发布与动态创建的html元素mvc5相关的数据

Question

Im developing a mvc5 application. In a view i dynamically generate html elements(textboxes and dropdownlists) using a returned json result and jquery. Now what i want to do is posting the selected data id's from ddls and entered texts in textboxes to server. Both id's and texts are saved in database in nvarchar format. The number of ddls and textboxes generated dynamically is varying based on json result.

This is the json result

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

View briefly

@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 string type properties for ddls selected and textboxes entered values, only few fields of those 6 will be utilized while saving, sequence is not relevant)

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(incomplete)

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

    public int SubGrpId { get; set; }
}

Could anyone please guide me on how to organize the viewmodel to capture dynamic html elements and how to do the save functionality.

Answer 1

The current code is giving the form elements a name attribute equal to the AtributeName property of your query which does not relate to your model. The name attributes need to be name="Field01" , name="Field02" etc.

Change you script to

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);
        ....

Your form controls will now bind to a POST method which has a parameter Item - eg public ActionResult Edit(Item model)