Populate a dropdownlist with data in mvc javascript

Question

Hi, Actually i need to populate a dropdownlist with data each time a button is clicked, In my code, i have this function method that adds in 2 textboxes and a dropdown list as an array each time a button is clicked, But the problem is I need to be able to populate the dropdownlist with data..

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


    };

Here is my table class

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

What you seem to be doing is completely js based and does not leverage mvc concept. You should create partial views which contains your html and have placeholders for value to be binded from the controller. — DinoMyte, Sep 03 '15 at 17:32
I've done something similar to this when trying to build a List to pass back to controller but i dont see where you're trying to add a dropdown or what you're trying to put in it? — JamieD77, Sep 03 '15 at 17:46
@JamieD77 I'm trying to add it to one of the values in the html variable declared above — Ayomide Fajobi, Sep 03 '15 at 18:32
You appear to be trying to dynamically adding new objects to a collection. Suggest you look at the answers [here](http://stackoverflow.com/questions/29161481/post-a-form-array-without-successful/29161796#29161796) and [here](http://stackoverflow.com/questions/29837547/set-class-validation-for-dynamic-textbox-in-a-table/29838689#29838689) — , Sep 04 '15 at 00:28

score 0 · Answer 1 · edited Sep 04 '15 at 00:30

Dear The following way you can achive it easly. This is by using PartialView.

Design the form as a partial View in Server
Add Your required text boxes,DropDownList,validation etc in this form Also you can fill the DropDownList from server by This way.
By jQuery Ajax call get the form from server.

Please you may use the following code

Add GetFomRowControl.cshtml and paste the below code

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

In controller add a property DropDownField and also add the below method

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

When use press the Add button call the below jQuery Ajax function

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

hey @Nizar thanks for assisting, i tried the example u gave to me, but wasn't able to get it working, dyu think there cld be anything wrong with the code ..? — Ayomide Fajobi, Sep 04 '15 at 02:03
I didn't test this ,i just posted the idea with possible flow of code. you may get the idea from this code and modify to get it working — Nizar Ahammed, Sep 04 '15 at 12:07

Populate a dropdownlist with data in mvc javascript

1 Answers1