CODEWITHSUNDEEP
c#asp.netajax
RnR
RnR

Reputation: 209

AutoPopulate DropDownList Using Ajax

I have 2 dropdownlist which is already binded on pageload , i want to rebind these two dropdownlist after firing a ajax function.Here i have written a sql server stored procedure to get the data which is needed to dropdownlists.But how i will get the value to dropdownlist,so that it can bind the new data using ajax function.The screen is developed by using Asp.net C# coding.

Upvotes: 2

Views: 4460

Answers (3)

Ivan Golović
Ivan Golović

Reputation: 8832

You can try the following as a demo. Server side DropDownLists are replaced with HTML select elements so that exception "Invalid postback or callback argument" doesn't happen. Drawback in this demo is that the values are not restored on form after postback. You can put this inside a form in Default.aspx:

<script type="text/javascript" 
 src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    function populate(populateInitial) {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: '/Default.aspx/populate',
            data: "{'populateInitial': '" + populateInitial + "'}",
            dataType: "json",
            async: false,
            success: function(result) {
                var ddlItems = document.getElementById('ddlItems');
                ddlItems.options.length = 0;
                $.each(result.d, function(key, item) 
                 { ddlItems.options[key] = new Option(item); });
            }
        });
    }
</script>

<form id="form1" runat="server">
<div>     
    <select id="ddlItems" name="ddlItems">
    </select>
    <br />
    <input type="button" onclick="populate('0');" value="Change values" />
    <br />
    Selected item: 
      <asp:Label ID="lblSelectedItem" runat="server" Text=""> </asp:Label>
    <br />
    <asp:Button ID="Button1" runat="server" 
     Text="Write out selected item text" />
</div>

<script type="text/javascript">
    populate('1');
</script>

And you put these methods inside Default.aspx.cs:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            lblSelectedItem.Text = Request["ddlItems"].ToString();
        }
    }

    [System.Web.Services.WebMethod()]
    [System.Web.Script.Services.ScriptMethod()]
    public static List<string> populate(string populateInitial)
    {
        if (populateInitial == "1")
            return (new string[] { "a", "b" }).ToList();
        else
            return (new string[] { "c", "d", "e", "f" }).ToList();
    }

Upvotes: 2

naval
naval

Reputation: 1413

Here is the drop down list of the asp.net

<asp:DropDownList id="ddlCourse" runat="server" AutoPostBack="false" 
                                    Height="28px" title="Select Course" Width="290px" 
      ></asp:DropDownList>

and here is the jquery method that is calling the web service method 

function BindCourse() {
    $.ajax({
        type: "POST",
        url: "/WebService/CollegeWebService.asmx/GetCourseDetails",
        data: "{}",
        async: true,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnCoursePopulated,      
        error: function (xml, textStatus, errorThrown) {
            alert('error');
            alert(xml.status + "||" + xml.responseText);
        }
    });
}

This is the method to That is used in the ajex call method and call the PopulateControl method to bind the Drop down List

function OnCoursePopulated(response) {

    PopulateControl(response.d,   $('#<%=ddlCourse.ClientID %>'));

}

Here is the description of the PopulateControl Method

function PopulateControl(list, control) {

    if (list.length > 0) {

        control.removeAttr("disabled");

        control.empty().append('<option selected="selected" value="0">Please select</option>');
        $.each(list, function () {


            control.append($("<option></option>").val(this['Value']).html(this['Text']));

        });
    }
    else {
        control.empty().append('<option selected="selected" value="0">Not available<option>');
    }
}

Thus you finally bind the drop down list

Upvotes: 3

levi
levi

Reputation: 3521

You should make Ajax call to some sort of page (I advice you to add Generic Hanlder) which responses xml or json or even html, of drop down values and textfield values, than read it in javascript jquery and generate html for your drop down which is the following

   <select id="ddl">
        <option value="value">text</option>
    </select>

you should read "value" & text and generate this> <option value="value">text</option> and append to ddl

Upvotes: 1

Related Questions