Monday, February 1, 2016

Fill dropdownlist using Jquery and JSON

In this article I am going to explain how to fill (bind) the dropdownlist using Jquery and JSON.

We create a Webmethod to fill the Dropdownlist items. Data will be in JSON format.

I have created a table Tb_Country and insert some dummy records.


Complete HTML Markup of webform:
<html xmlns="">
<head runat="server">
  <script type="text/javascript" src=""></script>
    $(document).ready(function () {
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "DorpdownJquery.aspx/GetCountry",
            data: "{}",
            dataType: "json",
            success: function (data) {
                $('#ddlCountry').append("<option value='0'>--Select--</option>");
                $.each(data.d, function (key, value) {
            error: function (result) {
    <form id="form1" runat="server">
        <asp:DropDownList ID="ddlCountry" runat="server">

Add the namespace
C# Code:

using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;
using System.Data; Code:
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.Services

Create Webmethod
Write the below given in code file:
C# Code:
public class country
        public int Id { get; set; }
        public string CountryName { get; set; }

    public static country[] GetCountry()
        List<country> list = new List<country>();
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
        using (SqlCommand cmd = new SqlCommand("select Id,CountryName from Tb_Country", con))
        SqlDataAdapter adp = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();
        foreach (DataRow dtrow in dt.Rows)
            country ctry = new country();
            ctry.Id = Convert.ToInt32(dtrow["Id"].ToString());
            ctry.CountryName = dtrow["CountryName"].ToString();
        return list.ToArray();
    } Code:
  Public Class country
        Public Property Id() As Integer
                Return m_Id
            End Get
            Set(value As Integer)
                m_Id = Value
            End Set
        End Property
        Private m_Id As Integer
        Public Property CountryName() As String
                Return m_CountryName
            End Get
            Set(value As String)
                m_CountryName = Value
            End Set
        End Property
        Private m_CountryName As String
    End Class

    <WebMethod()> _
    Public Shared Function GetCountry() As country()
        Dim list As New List(Of country)()
        Dim con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())
        Using cmd As New SqlCommand("select Id,CountryName from Tb_Country", con)
            Dim adp As New SqlDataAdapter(cmd)
            Dim dt As New DataTable()
            For Each dtrow As DataRow In dt.Rows
                Dim ctry As New country()
                ctry.Id = Convert.ToInt32(dtrow("Id").ToString())
                ctry.CountryName = dtrow("CountryName").ToString()
        End Using
        Return list.ToArray()
    End Function

Build, run the application and check it.
Fill dropdownlist using Jquery and JSON
   In this article we have learn how to fill dropdownlist using Jquery Ajax and JSON (C#, I hope you enjoyed this article. Please post you comment, query and feedback about this article. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.  

No comments:

Post a Comment