Skip to main content

Use json to return list from database and append result in dropdown or use it in your own way

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());
                     
                    }

                }
            })

        }


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

Popular posts from this blog

show image in asp.net form from database

In order to show image from database to webform first add an image control in webpage.   <asp:Image ID="imgStudentImage" runat="server" Height="157px" Width="160px" /> Then add new webform to read image from database for example displayimage.aspx and in code behind model write the following code. public string str = //your string     public SqlConnection conn;     public SqlCommand sql = new SqlCommand();     public SqlDataReader dr;     public string strSQL;     protected void Page_Load(object sender, EventArgs e)     {         conn = new SqlConnection(str);         conn.Open();         long id = Convert.ToInt64(Request.QueryString["mId"]);         strSQL = "";         strSQL = strSQL + " SELECT snap from S...

Export Doc,Access,Image,CSV,Excel,Pdf,XML,HTML,Text,Print of Gridview in Asp.net

First import itextsharp.dll in the solution and use three namespces (basically for pdf) using iTextSharp.text; using iTextSharp.text.pdf; using iTextSharp.text.html.simpleparser;          Then Use the following code :- on each button  click  protected void Page_Load(object sender, EventArgs e)         {             if (!Page.IsPostBack)             {                 BindGridDetails(GridView1);             }         }                 protected DataTable BindGridDetails(GridView GridView1)         {   ...

Advent of code 2022 day 22 part 1

  function main(input, input1) {     let grid = input.split( '\n' );     grid.shift();     // only in big input     for ( let i = 0 ; i < 100 ; i++) {         grid[i] = '                                                  ' + grid[i];     }     //console.log(grid[100])     grid = grid.map(x => x.split( '' ))     // find first left top allowed     let temppos = - 1 ;     grid[ 0 ].forEach((element, i) => {         if (temppos == - 1 && element == '.' ) {             temppos = i;         }     });     let initpos = new pos(temppos, 0 )     // console.log(initpos)     // make grid equal shape     let...