How to Bind Country state and City in asp.net using jQuery
Aspx Code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Registration.aspx.cs" Inherits="country_state_with_jquery.Registration" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var EID = 0;
$(document).ready(function () {
Country_Bind();
Data_bind();
});
function Country_Bind()
{
$.ajax({
url: 'Registration.aspx/Fill_Country',
type: 'post',
contentType: 'application/json;charset=utf-8',
dataType: 'json',
data: "{}",
async: false,
success: function (_dt) {
_dt = JSON.parse(_dt.d);
//$("#ddlcountry").find("tr:gt:(0)").remove();
for (var i = 0; i < _dt.length; i++)
{
$("#ddlcountry").append($('<option/>').attr("value", _dt[i].Cid).text(_dt[i].Cname));
}
},
error: function ()
{
alert('Country bind error !!');
}
});
}
function bindstate(Cid) {
$.ajax({
url: 'Registration.aspx/Fill_State',
type: 'post',
contentType: 'application/json;charset=utf-8',
dataType: 'json',
data: "{A:'" + Cid + "'}",
async:false,
success: function (_dt) {
_dt = JSON.parse(_dt.d);
//$("#ddlcountry").empty();
for (var i = 0; i < _dt.length; i++) {
$("#ddlstate").append($('<option/>').attr("value", _dt[i].sid).text(_dt[i].sname));
}
},
error: function () {
alert('State bind error !!');
}
});
}
function bindcity(sid) {
$.ajax({
url: 'Registration.aspx/Fill_City',
type: 'post',
contentType: 'application/json;charset=utf-8',
dataType: 'json',
data: "{A:'" + sid + "'}",
async: false,
success: function (_dt) {
_dt = JSON.parse(_dt.d);
//$("#ddlcountry").empty();
for (var i = 0; i < _dt.length; i++) {
$("#ddlcity").append($('<option/>').attr("value", _dt[i].Cityid).text(_dt[i].Cityname));
}
},
error: function () {
alert('City bind error !!');
}
});
}
function Savedata()
{
$.ajax({
url: 'Registration.aspx/Insert',
type: 'post',
contentType: 'application/json;charset=utf-8',
datatype: 'json',
data: "{K:'" + EID + "',A:'" + $("#Textname").val() + "',B:'" + $('input:radio[Name=A]:checked').val() + "',C:'" + $("#ddlcountry").val() + "',D:'" + $("#ddlstate").val() + "',E:'" + $("#ddlcity").val() + "',F:'" + $("#Textgmail").val() + "',G:'" + $("#Textpassword").val() + "',H:'" + $("#Textcpassword").val() + "',I:'" + $("#Textage").val() + "',J:'" + $("#Textaddress").val() + "'}",
success: function () {
alert('Insert data successfull !!');
window.location.reload(true);
},
error: function () {
alert('Insert data error !!')
},
});
}
function Data_bind() {
$.ajax({
url: 'Registration.aspx/Get',
type: 'post',
contentType: 'application/json;charset=utf-8',
datatype: 'json',
data: "{}",
success: function (_dt) {
_dt = JSON.parse(_dt.d);
$("#tbl").find("tr:gt(0)").remove();
for (var i = 0; i < _dt.length; i++)
{
$("#tbl").append('<tr><td>' + _dt[i].name + '</td> <td>' + (_dt[i].Gender == "1" ? "Male" : _dt[i].Gender == "2" ? "Female" : "Other") + '</td> <td>' + _dt[i].Cname + '</td> <td>' + _dt[i].sname + '</td> <td>' + _dt[i].Cityname + '</td> <td>' + _dt[i].Gmail + '</td> <td>' + _dt[i].Age + '</td> <td>' + _dt[i].Address + '</td> <td><input type="button" id="btndelete" value="Delete" onclick="Delete_data(' + _dt[i].empid + ')" /></td> <td><input type="button" id="btnedit" value="Edit" onclick="Edit_data(' + _dt[i].empid + ')" /></td></tr>')
}
},
error: function () {
alert('Data bind error !!')
},
});
}
function Delete_data(empid) {
$.ajax({
url: 'Registration.aspx/Delete',
type: 'post',
contentType: 'application/json;charset=utf-8',
datatype: 'json',
data: "{A:'" + empid + "'}",
success: function ()
{
alert('Delete data successfull !!');
window.location.reload(true);
},
error: function ()
{
alert('Delete data error !!');
},
});
}
function Edit_data(empid) {
$.ajax({
url: 'Registration.aspx/Edit',
type: 'post',
contentType: 'application/json;charset=utf-8',
datatype: 'json',
data: "{A:'" + empid + "'}",
success: function (_dt) {
_dt = JSON.parse(_dt.d);
$("#Textname").val(_dt[0].name);
$("#ddlcountry").val(_dt[0].Country);
bindstate(ddlcountry.value);
$("#ddlstate").val(_dt[0].state);
bindcity(ddlstate.value);
$("#ddlcity").val(_dt[0].City);
$("#Textgmail").val(_dt[0].Gmail);
$("#Textpassword").val(_dt[0].password);
$("#Textcpassword").val(_dt[0].cpassword);
$("#Textage").val(_dt[0].Age);
$("#Textaddress").val(_dt[0].Address);
$("#btnsave").val("Update");
EID = empid;
},
error: function () {
alert('Delete data error !!');
},
});
}
//<td>' + _dt[i].password + '</td>
//<td>' + _dt[i].cpassword + '</td>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Name:</td>
<td><input type="text" id="Textname" /></td>
</tr>
<tr>
<td>Gender:</td>
<td><input type="radio" value="1" name="A" />Male
<input type="radio" value="2" name="A" />Female
<input type="radio" value="3" name="A" />Other
</td>
</tr>
<tr>
<td>Country:</td>
<td><select id="ddlcountry" onchange="bindstate(ddlcountry.value)">
<option value="0">--select--</option>
</select></td>
</tr>
<tr>
<td>State:</td>
<td><select id="ddlstate" onchange="bindcity(ddlstate.value)">
<option value="0">--select--</option>
</select></td>
</tr>
<tr>
<td>City:</td>
<td><select id="ddlcity">
<option value="0">--select--</option>
</select></td>
</tr>
<tr>
<td>Gmail:</td>
<td><input type="text" id="Textgmail" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="text" id="Textpassword" /></td>
</tr>
<tr>
<td>Cpassword:</td>
<td><input type="text" id="Textcpassword" /></td>
</tr>
<tr>
<td>Age:</td>
<td><input type="text" id="Textage" /></td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" id="Textaddress" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" id="btnsave" value="Save" onclick="Savedata()" /></td>
</tr>
</table>
<table id="tbl" border="1" style="background-color:pink">
<tr style="background-color:maroon;color:white">
<th>Name</th>
<th>Gender</th>
<th>Country</th>
<th>State</th>
<th>City</th>
<th>Gmail</th>
<%-- <th>Password</th>
<th>CPassword</th>--%>
<th>Age</th>
<th>Address</th>
<th></th>
</tr>
</table>
</div>
</form>
</body>
</html>
.cs page code:-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
namespace country_state_with_jquery
{
public partial class Registration : System.Web.UI.Page
{
static SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString);
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string Fill_Country()
{
string _dt = "";
con.Open();
SqlCommand cmd = new SqlCommand("usp_country_get", con);
cmd.CommandType = CommandType.StoredProcedure;
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
if (ds.Tables[0].Rows.Count>0)
{
_dt = JsonConvert.SerializeObject(ds.Tables[0]);
}
return _dt;
}
[WebMethod]
public static string Fill_State(int A)
{
string _dt = "";
con.Open();
SqlCommand cmd = new SqlCommand("usp_state_get", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@Cid", A);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
if (ds.Tables[0].Rows.Count > 0)
{
_dt = JsonConvert.SerializeObject(ds.Tables[0]);
}
return _dt;
}
[WebMethod]
public static string Fill_City(int A)
{
string _dt = "";
con.Open();
SqlCommand cmd = new SqlCommand("usp_state_city", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@sid", A);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
if (ds.Tables[0].Rows.Count > 0)
{
_dt = JsonConvert.SerializeObject(ds.Tables[0]);
}
return _dt;
}
[WebMethod]
public static void Insert(int K,string A, int B, int C, int D, int E, string F, string G, string H, int I, string J)
{
con.Open();
SqlCommand cmd = new SqlCommand("usp_employee_insrt", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@Empid", K);
cmd.Parameters.AddWithValue("@Name", A);
cmd.Parameters.AddWithValue("@Gender", B);
cmd.Parameters.AddWithValue("@Country", C);
cmd.Parameters.AddWithValue("@State", D);
cmd.Parameters.AddWithValue("@City", E);
cmd.Parameters.AddWithValue("@Gmail", F);
cmd.Parameters.AddWithValue("@Password", G);
cmd.Parameters.AddWithValue("@Cpassword", H);
cmd.Parameters.AddWithValue("@Age", I);
cmd.Parameters.AddWithValue("@Address", J);
cmd.ExecuteNonQuery();
con.Close();
}
[WebMethod]
public static string Get()
{
string _dt = "";
con.Open();
SqlCommand cmd = new SqlCommand("usp_employee_get", con);
cmd.CommandType = CommandType.StoredProcedure;
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
if (ds.Tables[0].Rows.Count > 0)
{
_dt = JsonConvert.SerializeObject(ds.Tables[0]);
}
return _dt;
}
[WebMethod]
public static void Delete(int A)
{
con.Open();
SqlCommand cmd = new SqlCommand("usp_employee_delete", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@Empid", A);
cmd.ExecuteNonQuery();
con.Close();
}
[WebMethod]
public static string Edit(int A)
{
string _dt = "";
con.Open();
SqlCommand cmd = new SqlCommand("usp_employee_edit", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@Empid", A);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
if (ds.Tables[0].Rows.Count > 0)
{
_dt = JsonConvert.SerializeObject(ds.Tables[0]);
}
return _dt;
}
}
}
2 comments:
Bro..Where is the Stored procedures..please send how to write that SP..I'm a beginer so i don't know how to write it.
create table Country
(
Cid int primary key identity(1,1),
Cname varchar(50)
)
create table Employee
(
Empid int primary key identity(1,1),
Name varchar(50)
Gender int,
Country int,
Age int,
Address varchar(50)
)
ALTER proc [dbo].[usp_country_get]
as
begin
select * from Country
end
ALTER proc [dbo].[usp_employee_delete]
@Empid int
as
begin
delete from Employee where Empid=@Empid
end
ALTER proc [dbo].[usp_employee_get]
as
begin
select Employee.*,Country.* from Employee inner join Country on Employee.Country= country.cid
end
ALTER proc [dbo].[usp_employee_ins_upd]
@Empid int,
@Name varchar(50),
@Gender int,
@Country int,
@Age int,
@Address varchar(50)
as
begin
if(@Empid=0)
begin
insert into Employee(Name,Gender,Country,Age,Address) values(@Name,@Gender,@Country,@Age,@Address)
end
else
begin
update Employee set Name=@Name,Gender=@Gender,Country=@Country,Age=@Age,Address=@Address where Empid=@Empid
end
end
Post a Comment