Hi
Recently in one of my project, there was requirement to populate the dropdown from database and on basis of dropdown selection we have to display data on textbox without post back.
There are so many methods to do this task, but one of the easiest methods to solve using
“Ajax enabled WCF”, JavaScript and Ajax ScriptManger Control.
Step1: Create one “Ajax Enable WCF” and write the method like this
using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
// Add [WebGet] attribute to use HTTP GET[OperationContract]
public string GetEmpSal(string Name)
{
string a;
using (SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=Test;Integrated Security=True"))
{
//for more simplicity, i have written in general sql statement
using (SqlCommand cmd = new SqlCommand("Select EmpSal from tblEmp where EmpName=@EmpName", con))
{
cmd.Parameters.AddWithValue("@EmpName", Name);
DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
if (dt.Rows.Count > 0)
{
a = dt.Rows[0]["EmpSal"].ToString();
}
else
{
a = string.Empty;
}}
}
return a;
}[OperationContract]
public List<Emp> FetchEmpName()
{
List<Emp> EmpNames = new List<Emp>();
using (SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=Test;Integrated Security=True"))
{
//for more simplicity, i have written in general sql statement
using (SqlCommand cmd = new SqlCommand("Select EmpName from tblEmp", con))
{
con.Open();
using (SqlDataReader dr = cmd.ExecuteReader())
{if (dr != null)
{while (dr.Read())
{
Emp emp1 = new Emp();
emp1.EmpName = dr["EmpName"].ToString();
EmpNames.Add(emp1);
}}
}
}
}
return EmpNames;
}}
Step 2: In default page, keep one asp.net dropdown, Textbox, Ajax Script Manager Control and write the code like this
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="WCF_Test_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title><script language="javascript" type="text/javascript">
function ShowEmpSal()
{//Here we are passing the dropdown selected value to WCF
Service.GetEmpSal(document.getElementById(‘DropDownList1’).value, onSuccess, null, null);}
function onSuccess(result)
{
//Here we are displaying the result on basis of selection
$get("TextBox1").innerText = result;
}</script>
</head>
<body><form id="form1" runat="server">
<div><asp:ScriptManager ID="ScriptManager1" runat="server">
<Services><asp:ServiceReference Path="~/Service.svc" />
</Services>
</asp:ScriptManager>EmpName: <asp:DropDownList ID="DropDownList1" onchange="return ShowEmpSal()" Width="150Px" runat="server">
</asp:DropDownList>
<br />
<br />
<br />
EmpSal: <asp:TextBox ID="TextBox1" runat="server" Width="149px"></asp:TextBox>
<br />
<br />
<br />
<br /><%– This javascript is used to populate the dropdown on pageload only–%>
<script type="text/javascript">
Sys.Application.add_load(function() {
Service.FetchEmpName(function(result) {
var ddl = document.getElementById(‘<%=DropDownList1.ClientID %>’);for (var i = 0; i < result.length; i++) {
ddl.options[i] = new Option(result[i].EmpName, result[i].EmpName);}
ddl.options[0] = new Option("Select", "");ddl.options[0].selected = true;
});
});
</script></div>
</form>
</body>
</html>
Chandradev's Blog 