How to Bind a HTML Dropdown List with Web Services in ASP.NET using C#

Introduction

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

Web Services

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.

<select id="ddlFrom">
</select>

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($("<option></option>").val
                        (value.Id).html(value.Stopage));
                    });
                },
                error: function (Result) {
                    alert("Error");
                }
            });
        }

Let's 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 let's 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
{
[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.