How to display data on textbox on basis of dropdown selection using Ajax and WCF?



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"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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 />
&nbsp;&nbsp;&nbsp;
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>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: