24 May 2018

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;
        }
    }
}
Read Complete

Popular Posts

Popular Posts

Translate

Total Pageviews