csharp

How to populate bind DropDown in asp.net using jQuery Ajax and JSON

Here I will explain How to populate bind DropDown in asp.net using jQuery Ajax and JSON. In this blog, we will learn step by step Populate(bind) DropDown in asp.net using Jquery.

Step 1:Before creating the application populate bind DropDown in asp.net using jQuery Ajax. First create the database and use this database.
[php]
create database BindDropDown
use BindDropDown
[/php]
Step 2: After that create a table named tblCountry in a database to form we show the records in a DropDownList.
[php]
create table tblCountry (
CountryId int primary key identity(1,1),
CountryName varchar(30),

)
[/php]
Step 3: After creating a table enter data into table “tblCountry”.
[php]
insert into tblCountry(CountryName) values(‘India’),(‘America’),(‘Sri Lanka’),(‘Newzeland’),(‘England’)
[/php]

Step 4.Step 1: Create Web Application
“Start”-“All Program”–>Microsoft VS 2012
“File”–>”New”–>”Project”–>Select Visual C# Web–>ASP.NET Empty website
Give the Project Name like My project Name BindDropDown or whatever you wish
Then Right click on the project then select “Add New Item” by Default new item name “Default.aspx” Page
Step 5: After that, we need to add jQuery Library to your project. Install jquery library Click on “ProjectName”
–>Select “Manage NuGet Packages..”–>Select “nuget.org” from the left menu and write “jquery” on search online(ctrl+E) search box.After successful installation new script folder is generated in your project.

Step 5. Open .aspx page and write this code.
[php]
<head runat="server">
//Here Add Reference jQuery Library
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var Idd = 0;
var Cid = 1;
$(function () {
GetCountry();
});
//Create a function for Binding the data
//In url write your page name like"Default.aspx".
//Write jQuery Ajax to call WebMethod(GetCountryData) and bind the returning data into DropDown.
function GetCountry() {
$.ajax({
url:’Default.aspx/GetCountryData’,//GetCountryData is a method name create in ".aspx.cs" page.
type: ‘post’,.
contentType: ‘application/json;charset=utf-8’,
dataType: ‘json’,
data: "{}",
success: function (_data) {
_data = JSON.parse(_data.d);
for (var i = 0; i < _data.length; i++) {

$("#ddlcountry").append($(‘<option/>’).attr("value",_data[i].CountryId).text(_data[i].CountryName));
}
},
error: function () {
alert(‘Get Country Error’);
}
});

}
</script>

<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Country:</td>
<td><select id="ddlcountry">
<option value="0">–Select–</option>
</select></td>
</tr>
</table>
</div>
</form>
</body>
</html>
[/php]

Step 6: Open web.config file and Establish a connection with database

Note

  • In initial catalog write Database Name
  • In data source you can simply write (.) /your server name/(local)
  • Integrated security for Authentication

[php]
<connectionStrings>
<add name="DBCS" connectionString="data source=.;initial catalog=BindDropDown;integrated security=true"/>
</connectionStrings>
[/php]

Step 7: Open “BindDropDown.aspx.cs” page.Put This code on “.aspx.cs” Page.
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;

namespace BindDropDown
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
//Create a static Method to return the data to Ajax Call.
//Method Should be static
//The Method should be a WebMethod.
//WebMethod is available inside “System.Web.Services” namespace.
[WebMethod]
public static string GetCountryData()
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[“DBCS”].ConnectionString);
string _data=””;
con.Open();
SqlCommand cmd = new SqlCommand(“Select * from tblCountry”,con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
if (ds.Tables[0].Rows.Count > 0)
{
_data = JsonConvert.SerializeObject(ds.Tables[0]);
}
return _data;

}
}
}

Leave a Reply

Your email address will not be published.