dropdown selected index change without postback no update panel needed - asp.net

Question

i am trying to fill text box from database on dropdownlist selected index changed without page post back.
i tried the following code it does not work
<script runat="server">
private String queryString;
protected void Page_PreRender(object sender, EventArgs e)
{
if (!String.IsNullOrEmpty(queryString))
{
Class1 obj = new Class1();
if (ddlEmployee.SelectedIndex >= 0)
{
System.Data.DataSet ds = obj.BindDataSet("Select ID,Email from EmployeeDetails where ID=" + ddlEmployee.SelectedValue);
txtEmail.Text = ds.Tables[0].Rows[0][1].ToString();
}
}
}
protected void Page_Init(object sender, EventArgs e)
{
queryString = "?foo=bar;a=b";
}
</script>

Answer 1

Look into ASP.NET PageMethods. Here's a sample:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<asp:DropDownList ID="ddlEmployee" runat="server">
<asp:ListItem Selected="True" Value="1">One</asp:ListItem>
<asp:ListItem Value="2">Two</asp:ListItem>
<asp:ListItem Value="3">Three</asp:ListItem>
<asp:ListItem Value="4">Four</asp:ListItem>
<asp:ListItem Value="5">Five</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#ddlEmployee").on("change", function () {
PageMethods.SetText($(this).val(), OnSetCompleted);
});
function OnSetCompleted(result) {
$("#TextBox1").val(result);
}
</script>
In the code-behind:
[System.Web.Services.WebMethod()]
[System.Web.Script.Services.ScriptMethod()]
public static string SetText(string id)
{
//do your DB stuff here
return "You selected " + id;
}
Check these:
http://weblogs.asp.net/jalpeshpvadgama/archive/2012/01/07/asp-net-page-methods-with-parameters.aspx
http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/