Question

嗨，实际上我需要每次都用数据填充一个下拉列表单击一个按钮，在我的代码中，我有这个添加的函数方法每次按钮时，在2个文本框中和下拉列表中作为数组点击，但问题是我需要能够填充带数据的下拉列表..

function AddCust() {
        var m = $('#divcust input:last-child').attr('name');
        var v = $('#divcust input:last-child').attr('name');
        var c = $('#divcust input:last-child').attr('name');
        var index = 0;
        var index2 = 0;
        var index3 = 0;
        if (m != null && m.length > 0) {
            index = m.split('custmodel.CustList[')[1].replace('].DrugName', '');
            index2 = v.split('custmodel.CustList[')[1].replace('].Quantity', '');
            index3 = c.split('custmodel.CustList[')[1].replace('].Dosage', '');
            index++;
            index2++;
            index3++;
        }


        var html = '<table class=\"table table-striped table-bordered table-hover table-responsive\"><tr><td><label for=\"custmodel.CustList_' + index + '__DrugName\">DrugName</label>' +
           '<input title=\"The Drug Name field is required\" required id=\"custmodel.CustList_' + index + '__DrugName\" class=\"text-box single-line\"' +
           ' type=\"select\" value=\"\" name=\"custmodel.CustList[' + index + '].DrugName\"></td>'+
            '<td><label for=\"custmodel.CustList_' + index2 + '__Quantity\">Quantity</label>' +
           '<input title=\"The Quantity field is required\" required id=\"custmodel.CustList_' + index2 + '__Quantity\" class=\"text-box single-line\"' +
           ' type=\"text\" value=\"\" name=\"custmodel.CustList[' + index2 + '].Quantity\"</td>' +

            '<td><label for=\"custmodel.CustList_' + index3 + '__Dosage\">Dosage</label>' +
           '<input required title=\"The Dosage field is required\" id=\"custmodel.CustList_' + index3 + '__Dosage\" class=\"text-box single-line\"' +
           ' type=\"text\" value=\"\" name=\"custmodel.CustList[' + index3 + '].Dosage\"></td></tr><table>';
        $('#divcust').append(html);


    };

这是我的表类

public class Drug
{
    public string drugname {get;set;}
}

Answer 1

亲爱的以下方式您可以轻松实现。这是通过使用PartialView。

将表单设计为服务器中的部分视图
在此添加您需要的文本框，DropDownList，验证等 form也可以通过这种方式从服务器填充DropDownList。
通过jQuery Ajax调用从服务器获取表单。

请您使用以下代码

添加GetFomRowControl.cshtml并粘贴以下代码

@model IEnumerable<ProjectName.Models.Drug>

@{
    Layout = null;
}
<div class="col-md-12">

    <table>
        <tr>
            <td>
                @Html.LabelFor(model => model.drugname, "Drug Name", new { @class = "frmLabel"})
                @Html.TextBoxFor(model => model.QTitle, new { type = "string", @class = "inpDrugName" })                                
            </td> 
            <td>
                @Html.LabelFor(model => model.Quantity, "Quantity", new { @class = "frmLabel"})
                @Html.TextBoxFor(model => model.Quantity, new { type = "string", @class = "inpQty" })                                
            </td> 

            <td>
                @Html.LabelFor(model => model.DropItem, "Drop Down", new { @class = "frmLabel"})

                @Html.DropDownListFor(model => model.DropDownField,
                new SelectList(ViewBag.DropDownItems, "KeyColumnName from table", "value Column From Table"),"--Select--",new {@class="dropItem"})

            </td>
        </tr>
    </table>

</div>

在控制器中添加属性DropDownField 并添加以下方法

 [HttpPost]
 public ActionResult GetFomRowControl()
 {
            var DropItemsFromDB = dbContext.TableName();
            ViewBag.DropDownItems = DropItemsFromDB;
            return PartialView();
 }

使用时按“添加”按钮调用下面的jQuery Ajax函数

function GetDetailsHTML() {
    $.ajax({
        url: "/Drug/GetFomRowControl/" , 
        type: 'POST',
        data: JSON.stringify({}),
        dataType: 'html', //recicinvg type
        contentType: 'application/json; charset=utf-8',//sending type
        //contentType: 'html',
        success: function (htmlForm) {
           $(htmlForm).appendTo('#divcust');
        },
        error: function (a, b, c, d) {
            //alert(JSON.stringify(a));
            //alert(JSON.stringify(b));
        }
    });

    return false;
}

使用mvc javascript中的数据填充下拉列表

1 个答案: