JSON (JavaScript Object Notation) is a lightweight data-interchange format. For
more information About JSON Please see
http://www.json.org/
jQuery is a library that makes it quicker and easier to build JavaScript
webpages and web application.
The jQuery library actually comes in 2 forms.
- Uncompressed .js
-
Minified .js
For more information about jQuery and its plugin
http://plugins.jquery.com/
In this project we use Newtonsoft.Json library makes working with JavaScript and
JSON formatted data in .NET simple. Quickly read and write JSON using the
JsonReader and JsonWriter or serialize your .NET objects with a single method
call using the JsonSerializer.
For more Information about Json.NET http://json.codeplex.com/
Your aspx Page like
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD
XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>JSON
Example By Jayendra</title>
<styletype="text/css">
.style1
{
width: 100%;
}
.style2
{
width: 64px;
}
</style>
<scriptlanguage="javascript"type="text/javascript"src="JScript/jquery-1.2.6.js"></script>
<scripttype="text/javascript">
$(document).ready(function()
{
$('#<%=ddlState.ClientID %>').change(function()
{
var
id = $('#<%=ddlState.ClientID %>').val();
if
(id != "--Select State--") {
$('#<%=ddlCity.ClientID %>').html("");
$.getJSON("Responce.aspx?id="
+ id, function(citys) {
$.each(citys, function()
{
$('#<%=ddlCity.ClientID
%>').append($("<option></option>").val(this['ID']).html(this['CityName']));
});
});
}
});
$('#<%=ddlCity.ClientID %>').change(function()
{
var
cityid = $('#<%=ddlCity.ClientID %>').html();
alert(cityid);
});
});
</script>
</head>
<body>
<formid="form1"runat="server">
<div>
<tableclass="style1">
<tr>
<tdclass="style2">
State:
</td>
<td>
<asp:DropDownListID="ddlState"runat="server">
</asp:DropDownList>
</td>
</tr>
<tr>
<tdclass="style2">
City:
</td>
<td>
<asp:DropDownListID="ddlCity"runat="server">
</asp:DropDownList>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Your .cs file
using
System;
using
System.Configuration;
using
System.Data;
using
System.Linq;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.HtmlControls;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Xml.Linq;
publicpartialclass_Default
: System.Web.UI.Page
{
protectedvoid
Page_Load(object sender,
EventArgs e)
{
if
(!IsPostBack)
{
FillStateDropdownlist();
ddlCity.Items.Insert(0,"--Select City--");
}
}
privatevoid
FillStateDropdownlist()
{
using(DataClassesDataContext
db = newDataClassesDataContext())
{
var
info = from p in
db.States
orderby p.ID
select
p;
if(info
!= null&& info.Count() > 0)
{
ddlState.DataSource = info;
ddlState.DataTextField = "StateName";
ddlState.DataValueField = "ID";
ddlState.DataBind();
}
ddlState.Items.Insert(0, "--Select
State--");
}
}
}
For binding city dropdownlist we use Response
page.
Your response page .cs files as under.
using
System;
using
System.Collections;
using
System.Configuration;
using
System.Data;
using
System.Linq;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.HtmlControls;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Xml.Linq;
using
Newtonsoft.Json;
using
System.Collections.Generic;
publicpartialclassResponce
: System.Web.UI.Page
{
#region City Class
privateclassCitys
{
publicint ID {
get; set; }
publicstring
CityName { get; set;
}
}
#endregion
List<Citys>
citylist = newList<Citys>();
protectedvoid
Page_Load(object sender,
EventArgs e)
{
if
(Request["id"] !=
null&& Request["id"].ToString() !=
"")
{
Response.Clear();
Response.Write(GetCity(Convert.ToInt32(Request["id"].ToString())));
Response.End();
}
}
privatestring
GetCity(int StateID)
{
using
(DataClassesDataContext db =
newDataClassesDataContext())
{
var
info = from p in
db.Cities
where
p.StateID.Equals(StateID)
orderby p.ID
//select p;
selectnew {
p.ID,
p.CityName
};
if
(info != null&& info.Count() > 0)
{
Citys myCity1 =
newCitys();
myCity1.ID = 0;
myCity1.CityName = "--Select
CityName--";
citylist.Add(myCity1);
foreach (var
item in info)
{
Citys myCity =
newCitys();
myCity.ID = item.ID;
myCity.CityName = item.CityName.Trim();
citylist.Add(myCity);
}
}
}
string
json = JsonConvert.SerializeObject(citylist,
Formatting.Indented);
return
json;
}
}