Here I am using JSON to fetch state as per country selected in dropdownlist without any refresh or postback and append all states belong to that contry to another dropdown List.
First create one class in .cs file in order to fetch array type data or any number data from server like state name and state value as per country selected :
public class getdata
{
private string _State;
private string _StateCode;
public string State
{
get
{
return _State;
}
set
{
_State = value;
}
}
public string StateCode
{
get
{
return _StateCode;
}
set
{
_StateCode = value;
}
}
}
Then create webservice in asp.net.cs file as follow :
[WebMethod]
public static List<getdisttdata> getdisttt(string prefixText)
{
List<getdisttdata> li = new List<getdisttdata>();
try
{
if (connection.State == ConnectionState.Closed)
connection.Open();
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "sql query";
cmd.Connection = connection;
cmd.CommandType = CommandType.Text;
SqlDataAdapter adp = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
adp.Fill(ds);
connection.Close();
foreach (DataRow dr in ds.Tables[0].Rows)
{
getdisttdata bkl = new getdisttdata();
bkl.distt = dr["District"].ToString();
bkl.disttcode = dr["CityCode"].ToString();
li.Add(bkl);
}
}
catch (Exception ex)
{
// return null;
}
return li;
}
Now list is returned from webserver by webmethod
Then Create javascript in client side as follow :-
function getCstate() {
var statecod = $("#<%=ddlCCountry.ClientID %>").val();
$("#<%=txtCCity .ClientID %>").css("display", "none");
$.ajax({
type: "POST",
url: "frmAdmissionForm.aspx/getstate",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ prefixText: statecod }),
dataType: "json",
success: function (response) {
$("#ctl00_ContentPlaceHolder1_ddlCState").find('option').remove().end();
$("#ctl00_ContentPlaceHolder1_ddlCDistt").find('option').remove().end();
$("#ctl00_ContentPlaceHolder1_ddlCCity").find('option').remove().end();
$('<option value=0>-Select-</option>').appendTo("#ctl00_ContentPlaceHolder1_ddlCDistt");
$('<option value=0>-Select-</option>').appendTo("#ctl00_ContentPlaceHolder1_ddlCCity");
var teams = response;
for (var i = 0; i < teams.length; i++) {
statename = teams[i].State;
stateid = teams[i].StateCode;
$('<option value="' + stateid + '">' + statename + '</option>').appendTo("#ctl00_ContentPlaceHolder1_ddlCState");
}
$("#<%=hdnCcountry.ClientID %>").val($("#<%=ddlCCountry.ClientID %>").val());
if ($("#<%=hdnCstate.ClientID %>").val() != "" && check == 'F') {
$("#<%=ddlCState.ClientID %>").val($("#<%=hdnCstate.ClientID %>").val());
}
}
})
}
First create one class in .cs file in order to fetch array type data or any number data from server like state name and state value as per country selected :
public class getdata
{
private string _State;
private string _StateCode;
public string State
{
get
{
return _State;
}
set
{
_State = value;
}
}
public string StateCode
{
get
{
return _StateCode;
}
set
{
_StateCode = value;
}
}
}
Then create webservice in asp.net.cs file as follow :
[WebMethod]
public static List<getdisttdata> getdisttt(string prefixText)
{
List<getdisttdata> li = new List<getdisttdata>();
try
{
if (connection.State == ConnectionState.Closed)
connection.Open();
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "sql query";
cmd.Connection = connection;
cmd.CommandType = CommandType.Text;
SqlDataAdapter adp = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
adp.Fill(ds);
connection.Close();
foreach (DataRow dr in ds.Tables[0].Rows)
{
getdisttdata bkl = new getdisttdata();
bkl.distt = dr["District"].ToString();
bkl.disttcode = dr["CityCode"].ToString();
li.Add(bkl);
}
}
catch (Exception ex)
{
// return null;
}
return li;
}
Now list is returned from webserver by webmethod
Then Create javascript in client side as follow :-
function getCstate() {
var statecod = $("#<%=ddlCCountry.ClientID %>").val();
$("#<%=txtCCity .ClientID %>").css("display", "none");
$.ajax({
type: "POST",
url: "frmAdmissionForm.aspx/getstate",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ prefixText: statecod }),
dataType: "json",
success: function (response) {
$("#ctl00_ContentPlaceHolder1_ddlCState").find('option').remove().end();
$("#ctl00_ContentPlaceHolder1_ddlCDistt").find('option').remove().end();
$("#ctl00_ContentPlaceHolder1_ddlCCity").find('option').remove().end();
$('<option value=0>-Select-</option>').appendTo("#ctl00_ContentPlaceHolder1_ddlCDistt");
$('<option value=0>-Select-</option>').appendTo("#ctl00_ContentPlaceHolder1_ddlCCity");
var teams = response;
for (var i = 0; i < teams.length; i++) {
statename = teams[i].State;
stateid = teams[i].StateCode;
$('<option value="' + stateid + '">' + statename + '</option>').appendTo("#ctl00_ContentPlaceHolder1_ddlCState");
}
$("#<%=hdnCcountry.ClientID %>").val($("#<%=ddlCCountry.ClientID %>").val());
if ($("#<%=hdnCstate.ClientID %>").val() != "" && check == 'F') {
$("#<%=ddlCState.ClientID %>").val($("#<%=hdnCstate.ClientID %>").val());
}
}
})
}
You can call this function on blur or onchange event of country dropdownlist as follow :
<asp:DropDownList ID="ddlCCountry" runat="server" DataSourceID="sqlCCountry" onblur="getCstate('T')"
TabIndex='1' Width='255px' DataTextField="country" DataValueField="CountryCode"
ToolTip="Select Country">
</asp:DropDownList>
All done Thanks :) dont forgot to follow this blog :)
Comments
Post a Comment