using $.ajax in 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...

Did you create a PageMethod called GetCustomer on the Default.aspx page right? if yes, could you pleas post the code of that method — Jupaol
– Jupaol, Commented Jul 24, 2012 at 21:06
No I don't want to make method static.so I have not use page methods . can we make use of page methods on non-static methods ? is it better to use page method ? — S.A.Parkhid
– S.A.Parkhid, Commented Jul 24, 2012 at 21:09
No. PageMethods must be static If you do not want to use them (I would totally agree with you), then you need to create a ScriptService - traditional ASMX service or a WCF|RESTful-WCF service — Jupaol
– Jupaol, Commented Jul 24, 2012 at 21:11
You mean that every page that uses ajax and ajax loader use some WCF in asp.net ? what about other ? I Mean PHP for example. Really I should use Update panels or Directly XML HTTP Request ? so what is the job of $.ajax() ? thanks. — S.A.Parkhid
– S.A.Parkhid, Commented Jul 24, 2012 at 21:13
Well actually you can, since you can specify the data type returned from the ajax call (xml, json, script, or html). Not the traditional approach in .Net though. — Jupaol
– Jupaol, Commented Jul 24, 2012 at 21:25

Jupaol · Accepted Answer · 2012-07-24 23:28:42Z

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

enter image description here

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>

thanks for your response but consider I have a form which user selects an ID .so I want to filter tblCustomer with selected ID and dispaly all info in the caller page (Default.aspx) in label controls... so i don't want to use update panels.i want to complete that with $.ajax();
I will append , i should add following namespace : System.Web.Script.Serialization

iamruss · Accepted Answer · 2012-07-24 21:13:34Z

0

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);

answered Jul 24, 2012 at 21:13

iamruss

8125 silver badges11 bronze badges

3 Comments

S.A.Parkhid Over a year ago

you mean : success:function(){'$('lblName').text(Session["Name"]');} If yes, how can I retrive the value of session ?

iamruss Over a year ago

I mean you need your get customer page to render table with actual values and this html should be appended inside the container (that may be wrapping your table)

iamruss Over a year ago

something similar is discussed here stackoverflow.com/questions/9354659/…

Collectives™ on Stack Overflow

using $.ajax in asp.net

2 Answers 2

Output

ASPX - Target (empty, remove all html tags)

ASPX - Target code behind

ASPX - Caller

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Output

ASPX - Target (empty, remove all html tags)

ASPX - Target code behind

ASPX - Caller

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related