Introduction
To populate the multiple dropdown list box values through AJAX call.
In the below example I’ve populated the 2 dropdown values on tab out of first textbox.
JQuery plugin: jquery-2.1.4.min.js.
Client side
- function <FUNCTION NAME> (<PARAMETER OPTIONAL>) {
-
- $.ajax({
-
- type: <GET/POST>,
- contentType: "application/json; charset=utf-8",
-
- url: <TARGET URL>\<SERVER SIDE METHOF NAME>,
-
- data: JSON.stringify({ <PARAMETER TO SEND>: <VALUE> }),
- async: <true/false>,
- dataType: "json",
-
- success: function (data) {<TO DO>
- returnflag = true;
- },
-
- error: function (result) {
- returnflag = null;
- }
- });
Example
Script: by using JSON object bind the values to dropdown,
- <script src="Script/jquery-2.1.4.min.js"></script>
- <script>
- function PopulateMultipleDDL() {
- var tranTypes = '';
- var returnflag;
- tranTypes = 'aa';
-
- $.ajax({
-
- type: "POST",
- contentType: "application/json; charset=utf-8",
-
- url: "WebForm1.aspx/getSourceName",
-
- data: JSON.stringify({ tranType: tranTypes }),
- async: false,
- dataType: "json",
-
- success: OnSuccess
- });
- }
- function OnSuccess(data) {
-
- var Result = JSON.parse(data.d);
-
-
- $('#DropDownList1').empty();
- $('#DropDownList2').empty();
-
-
- $.each(Result, function (key, value) {
- $("#DropDownList1").append($("<option></option>").val
- (value.ID).html(value.Name));
-
- $("#DropDownList1 option[value='']").remove();
-
- $("#DropDownList2").append($("<option></option>").val
- (value.ID1).html(value.Name1));
-
-
- $("#DropDownList2 option[value='']").remove();
- })
- returnflag = true;
-
- }
-
- </script>
ASPX controls
- <asp:TextBox ID="txtbx" runat="server" onblur="PopulateMultipleDDL();" />
-
- <asp:DropDownList ID="DropDownList1" ClientIDMode="Static" runat="server">
- </asp:DropDownList>
- <asp:DropDownList ID="DropDownList2" ClientIDMode="Static" runat="server">
- </asp:DropDownList>
In Server side:
Here I’m creating a dataset with 2 data tables.
The first data table is binded to the DropDownList1 and the second data table is binded to the DropDownList2.
Name spaces:
- using System;
- using System.Collections.Generic;
- using System.Data;
- using System.Web.Script.Serialization;
- using System.Web.Services;
-
- [WebMethod]
- public static string getSourceName(string tranType)
- {
-
- DataRow _dataRow0, _dataRow1, _dataRow2, _dataRow3, _dataRow4, _dataRow5, _dataRow02, _dataRow12;
- DataTable _datatable = new DataTable();
- DataTable _datatable2 = new DataTable();
- _datatable.Columns.Add("Name");
- _datatable.Columns.Add("ID");
- _datatable2.Columns.Add("Name1");
- _datatable2.Columns.Add("ID1");
-
- _dataRow0 = _datatable.NewRow();
- _dataRow0[0] = "Arun";
- _dataRow0[1] = 1;
-
-
- _dataRow1 = _datatable.NewRow();
- _dataRow1[0] = "Aruna";
- _dataRow1[1] = 2;
-
-
- _dataRow2 = _datatable.NewRow();
- _dataRow2[0] = "Arun";
- _dataRow2[1] = 3;
-
- _dataRow3 = _datatable.NewRow();
- _dataRow3[0] = "Aswin";
- _dataRow3[1] = 4;
-
-
- _dataRow4 = _datatable.NewRow();
- _dataRow4[0] = "Senthil";
- _dataRow4[1] = 5;
-
- _dataRow5 = _datatable.NewRow();
- _dataRow5[0] = "ArunKUMARI";
- _dataRow5[1] = 5;
-
- _datatable.Rows.Add(_dataRow0);
- _datatable.Rows.Add(_dataRow1);
- _datatable.Rows.Add(_dataRow2);
- _datatable.Rows.Add(_dataRow3);
- _datatable.Rows.Add(_dataRow4);
- _datatable.Rows.Add(_dataRow5);
-
- _dataRow02 = _datatable2.NewRow();
- _dataRow02[0] = "Thava";
- _dataRow02[1] = 1;
-
- _dataRow12 = _datatable2.NewRow();
- _dataRow12[0] = "Santhose";
- _dataRow12[1] = 2;
-
- _datatable2.Rows.Add(_dataRow02);
- _datatable2.Rows.Add(_dataRow12);
-
- DataSet _dataset = new DataSet();
- _dataset.Tables.Add(_datatable);
- _dataset.Tables.Add(_datatable2);
-
- JavaScriptSerializer JSSerializer = new JavaScriptSerializer();
-
- List<Dictionary<string, object>> DtRows = new List<Dictionary<string, object>>();
- Dictionary<string, object> newrow = null;
- int i = 0;
-
- foreach (DataTable dt in _dataset.Tables)
- {
- foreach (DataRow drow in _dataset.Tables[i].Rows)
- {
- newrow = new Dictionary<string, object>();
- foreach (DataColumn col in _dataset.Tables[i].Columns)
- {
- newrow.Add(col.ColumnName.Trim(), drow[col]);
- }
- DtRows.Add(newrow);
- }
- i ++;
- }
-
- return JSSerializer.Serialize(DtRows);
-
- }
The JSON output:
- "[{\"Name\":\"Arun\",\"ID\":\"1\"},{\"Name\":\"Aruna\",\"ID\":\"2\"},{\"Name\":\"Arun\",\"ID\":\"3\"},{\"Name\":\"Aswin\",\"ID\":\"4\"},{\"Name\":\"Senthil\",\"ID\":\"5\"},{\"Name\":\"ArunKUMARI\",\"ID\":\"5\"},{\"Name1\":\"Thava\",\"ID1\":\"1\"},{\"Name1\":\"Santhose\",\"ID1\":\"2\"}]"
The above data is parsed and binded to two DDL’s.
- function OnSuccess(data) {
-
- var Result = JSON.parse(data.d);
-
-
- $('#DropDownList1').empty();
- $('#DropDownList2').empty();
-
-
- $.each(Result, function (key, value) {
- $("#DropDownList1").append($("<option></option>").val
- (value.ID).html(value.Name));
-
- $("#DropDownList1 option[value='']").remove();
-
- $("#DropDownList2").append($("<option></option>").val
- (value.ID1).html(value.Name1));
-
-
- $("#DropDownList2 option[value='']").remove();
- })