Question

我正在开发一个mvc5应用程序。在视图中，使用jquery i动态生成html元素（下拉列表和文本框）。

简要查看

@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>

    @Html.TextBoxFor(a=>a.ItemName, new { Class = "form-control", placeholder = " Item Name", TextMode = "MultiLine2", onkeyup = "return validateChar(this)", style = "width:175px;height:25px;" })

    <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 label = u.Name;
                var name = 'Field' + l;
                var label = $('<label></label>').text(label).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");
        }
    });
});

ItemViewModel

public class ItemViewModel
{
    public string ItemName { get; set; }

    public int MainGrpId { get; set; }

    public int SubGrpId { get; set; }

    public string Field0 { get; set; }
    public string Field1 { get; set; }
    public string Field2 { get; set; }
    public string Field3 { get; set; }
    public string Field4 { get; set; }
    public string Field5 { get; set; }

}

动态生成的ddls +文本框的总数等于或小于6.我想要做的是当用户从ddl中选择一个项目或将值输入到texbox时，该特定元素（字符串）中的值应该是显示在＆＃39; ItemName＆＃39;文本框。用户可以继续这样添加。每个附加值（字符串）应以“项目名称”中的空格分隔显示。文本框。

每个ddl和文本框（只有动态生成的一个-Field0，Field1，Field2，Field3，Field4，Field5）应该逐个启用（一个接一个），允许用户选择（ddls）/ enter（文本框）。但我正在努力为整个场景开发正确的jquery函数。请帮我解决这个问题。谢谢！

使用jquery mvc5处理动态生成的html元素

0 个答案: