using $.ajax in asp.net - asp.net

Question

I am going to use ajax for my web form app without any update panels. so I have noticed that I can use jquery ajax for this purpose.so there is a form with a dropdown box within that are some IDs.
When I select The ID from drop down, I want to show my ajax loader for moments and after that I want to show the result. the result will display in some label controls.
so this is my Default.aspx page :
<div style="text-align: center; width: 500px; margin: 0 auto 0 auto;">
<asp:DropDownList ID="idDropDownBox" runat="server" >
</asp:DropDownList>
<span>Pick ID </span>
<br />
<img alt="" id="loader" src="ajax-loader.gif" />
<table>
<tr>
<td>
<asp:Label ID="lblName" ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
</td>
<td style="font: 11px tahoma;">
Name
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblFamily" ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
</td>
<td style="font: 11px tahoma;">
Family
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblPhone" ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
</td>
<td style="font: 11px tahoma;">
Phone
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblEmail" ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
</td>
<td style="font: 11px tahoma;">
Email
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblAddress" ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
</td>
<td style="font: 11px tahoma;">
Address
</td>
</tr>
</table>
</div>
So I decided to create an another page "GetCustomer.aspx" which by a query string , fetches the ID and then , it select all info from data base and save them in sessions.
here is the code behind of GetCustomer.aspx :
protected void Page_Load(object sender, EventArgs e)
{
AppDomain.CurrentDomain.SetData("SQLServerCompactEditionUnderWebHosting", true);
if (Request.QueryString.Keys.Count > 0)
{
string id = Request.QueryString[0];
CustomersDBEntities db = new CustomersDBEntities();
IQueryable<tblCustomer> allInfo = (from x in db.tblCustomers
where x.ID == int.Parse(id)
select x);
Session["Name"] = allInfo.ElementAt(1).ToString();
Session["Family"] = allInfo.ElementAt(2).ToString();
Session["Phone"] = allInfo.ElementAt(3).ToString();
Session["Email"] = allInfo.ElementAt(4).ToString();
Session["Address"] = allInfo.ElementAt(5).ToString();
}
}
finally I started to write a javascript script like below , but in success function ! what should am I Do ?
$(document).ready(function(){
$('idDropDownBox').change(function(){
$.ajax({
type:"POST",
contentType:"application/json; charset=UTF-8",
data:"{CID:'"+ $('idDropDownBox').val() + "'}",
url:'Default.aspx/GetCustomer",
dataType:"json",
success:function(data){
//what should i do here
}
});
});
});
Thanks for responses...

Answer 1

If my understanding is correct, you want to use the output of an ASP.Net page as the source for an AJAX call.
This is not the traditional way to work with ASP.Net though, but still you can do it
This is a simple example:
Output
ASPX - Target (empty, remove all html tags)
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Empty.aspx.cs" Inherits="WebApplication1.Empty" %>
ASPX - Target code behind
protected void Page_Load(object sender, EventArgs e)
{
this.Response.ContentType = "application/json";
var id = this.Request.QueryString["id"];
// simulate your query using the id property
var q = Enumerable.Range(1, 10);
// set the following values using your real objects
var f = new
{
Name = "your name " + id,
Fam = "your family " + id,
Phone = "your phone " + id,
Email = "your email " + id,
Address = "your address" + id
};
this.Response.Write(JsonConvert.SerializeObject(f));
}
ASPX - Caller
Note, the table shown in this example, is exactly your code, I just copied
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function getData(id) {
$.ajax({
type: "GET",
url: '<%: this.ResolveClientUrl("~/Empty.aspx") %>',
dataType: "json",
data: 'id=' + id,
contentType: "application/json; charset=utf-8;",
success: function (msg) {
$("#<%: this.lblName.ClientID %>").text(msg.Name);
$("#<%: this.lblFamily.ClientID %>").text(msg.Fam);
$("#<%: this.lblPhone.ClientID %>").text(msg.Phone);
$("#<%: this.lblEmail.ClientID %>").text(msg.Email);
$("#<%: this.lblAddress.ClientID %>").text(msg.Address);
}
});
}
$(function () {
$("#<%: this.ddl.ClientID %>").change(function () {
getData($(this).val());
});
});
</script>
<asp:DropDownList runat="server" ID="ddl">
<asp:ListItem Text="1" Value="1" />
<asp:ListItem Text="2" Value="2" />
</asp:DropDownList>
<table>
<tr>
<td>
<asp:Label ID="lblName" ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
</td>
<td style="font: 11px tahoma;">
Name
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblFamily" ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
</td>
<td style="font: 11px tahoma;">
Family
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblPhone" ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
</td>
<td style="font: 11px tahoma;">
Phone
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblEmail" ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
</td>
<td style="font: 11px tahoma;">
Email
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblAddress" ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
</td>
<td style="font: 11px tahoma;">
Address
</td>
</tr>
</table>

Answer 2

Have your GetCustomer to return html portion you need to display and in success: handler of $.ajax add code that appends that html to desired container, like $('#someContainer').append(data);