Implementation: Let’s create a sample web page to check the concept in action.
But first of all create a table (tbDepartment) with the columns and their data type as shown below
Column Name
|
Data Type
|
DeptId
|
Int (primary key. Set is identity=true)
|
DeptName
|
varchar(50)
|
Then insert some dummy data into this table.
Now in web.config file create the connection string as:
<connectionStrings>
<add name="conStr" connectionString="Data Source=Lalit;Initial Catalog=DbEmployee;Integrated Security=True"/>
</connectionStrings>
Note: Change Data Source and Initial Catalog as per your database.
HTML Source Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Populate DropDownList dynamically from Sql server database using jquery ajax json</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
//url is the path of our web method (Page name/function name)
url: "Default.aspx/PopulateDropDownList",
data: "{}",
dataType: "json",
//called on jquery ajax call success
success: function (result) {
$('#ddlDepartments').empty();
$('#ddlDepartments').append("<option value='0'>--Select--</option>");
$.each(result.d, function (key, value) {
$("#ddlDepartments").append($("<option></option>").val(value.DeptId).html(value.DeptName));
});
},
//called on jquery ajax call failure
error: function ajaxError(result) {
alert(result.status + ' : ' + result.statusText);
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width:310px;">
<legend>Populate DropDownList using jQuery AJAX</legend>
Select Department: <asp:DropDownList ID="ddlDepartments" runat="server" Width="160px" />
</fieldset>
</div>
</form>
</body>
</html>
Asp.Net C# Code to fill dropdownlist dynamically using jquery ajax and json
In code file (Default.aspx.cs) write the code:
First of all include required namespaces
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
then write the code as:
protected void Page_Load(object sender, EventArgs e)
{
}
public class Department
{
public int DeptId { get; set; }
public string DeptName { get; set; }
}
[WebMethod]
public static List<Department> PopulateDropDownList()
{
DataTable dt = new DataTable();
List<Department> objDept = new List<Department>();
using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conStr"].ConnectionString))
{
using (SqlCommand cmd = new SqlCommand("SELECT DeptId,DeptName FROM tbDepartment", con))
{
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
objDept.Add(new Department
{
DeptId = Convert.ToInt32(dt.Rows[i]["DeptId"]),
DeptName = dt.Rows[i]["DeptName"].ToString()
});
}
}
return objDept;
}
}
}
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.