How to bind a HTML Drop Down List with Web Services in ASP.NET using C#

CodeProject Introduction :
In this article I will show you how to bind a Drop Down List in ASP.NET site with a web services. Before starting we need to know what is a Web Services is. Then we will know how to bind the Drop Down List with the help of that Web Service.

Web Services :
According to Tutorials point Web Services are self-contained, modular, distributed, dynamic applications that can be described, published, located, or invoked over the network to create products, processes, and supply chains. These applications can be local, distributed, or Web-based. Web services are built on top of open standards such as TCP/IP, HTTP, Java, HTML, and XML.

In web services we use WebMethod to call with parameter and to do operations. A web Services is inherited by class System.Web.Services.WebService. To check my Web Service article click here.

Starting With a Web Service : 
To start process with a Web Service create a new project, add a new Web Form. To add a new Web Service go to Add New Item. And then add a new Web Service (.asmx). Name it as you want.

 Now in the Web Form add a new HTML  Drop Down List. We will use the Web Service to bind the HTML Drop Down List.

Now we will check the following JQuery json code.

$(document).ready(function () {
            load_ddlFrom();
        });

function load_ddlFrom() {
  $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "services/Bind.asmx/LoadddlForm",
                data: "{}",
                dataType: "json",
                success: function (Result) {
                    Result = Result.d;
                    $.each(Result, function (key, value) {
                        $("#ddlFrom").append($("").val
                        (value.Id).html(value.Stopage));
                    });
                },
                error: function (Result) {
                    alert("Error");
                }
            });
        }

Lets check the url carefully  services/Bind.asmx/LoadddlForm 
services is the folder name where all the services are stored, I didn't use any thing before it because it is locketed in the root folder. Then Bind.asmx is the name of the web services that you are accessing. And the last one  LoadForm. It is the method name that you are invoking.  So lets check what is written in the LoadForm method.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Web.Configuration;

namespace Demo.services
{
    /// 

    /// Summary description for Bind
    /// 
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]
    public class Bind : System.Web.Services.WebService
    {
        public class CountryInfo
        {
            public int Id { get; set; }
            public string Stopage { get; set; }
        }
        public List CountryInformation { get; set; }

        [WebMethod]
        public List LoadddlForm()
        {
            CountryInfo ci = new CountryInfo();
            List CountryInformation = new List();
            DataSet ds;
            using (SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["booking"].ToString()))
            {
                using (SqlCommand cmd = new SqlCommand("select Id,Stopage from tblStopageMeta where isdelete=0", con))
                {
                    con.Open();
                    cmd.Connection = con;
                    cmd.CommandType = CommandType.Text;
                    using (SqlDataAdapter da = new SqlDataAdapter(cmd))
                    {

                        ds = new DataSet();
                        da.Fill(ds);
                    }
                }
            }
            try
            {
                if (ds != null)
                {
                    if (ds.Tables.Count > 0)
                    {
                        if (ds.Tables[0].Rows.Count > 0)
                        {
                            foreach (DataRow dr in ds.Tables[0].Rows)
                            {
                                CountryInformation.Add(new CountryInfo()
                                {
                                    Id = Convert.ToInt32(dr["Id"]),
                                    Stopage = dr["Stopage"].ToString()
                                });
                            }
                        }
                    }
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }
            return CountryInformation;
        }
    }
}

Now run your project and check whether it is binding your HTML Drop Down List or not. But before that one create your database and database connection in Web.Config.