Friday, February 8, 2013

Ajax Fundamentals part 2

Web Form Processing

  • Major change in Ajax is in page processing and we have two options:
    • traditional full - page processing
    • AJAX partial - page processing
  • Initially full page comes from the server and then can use either full partial - page processing
  • ASP.NET web forms use full - page processing and after initial load we can update small sections.
Now we can have example about how use Ajax in ASP.NET web forms:
  1. Start Microsoft Visual Studio 2010 from Start | All Programs | Microsoft Visual Studio 2010.
  2. Open solution from last post Ajax Fundamentals part 1  or download it from this link
    http://ul.to/3v69hdzj
  3. Right click on TrainingAjax and select Add new Item and select from template Web Form  name it Time.aspx
    Add ASP.NET web form
    Add ASP.NET web form
  4. Write the following Code in the Time.aspx page:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Time.aspx.cs" Inherits="TrainingAjax.Time" %>

    <!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>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <h3>Page Postback vs Ajax</h3>
            <asp:Label ID="TimeLabel" runat="server" Text="Click the button for the server time" ></asp:Label>
            <br />
            <br />
            <asp:Button ID="PostBackButton" runat="server" Text="Postback Time"
                onclick="PostBackButton_Click" />
        </div>
        </form>
    </body>
    </html>
  5. And Write the following code in Time.aspx.cs page:
    using System;

    namespace TrainingAjax
    {
        public partial class Time : System.Web.UI.Page
        {
            protected void PostBackButton_Click(object sender, EventArgs e)
            {
                TimeLabel.Text = "Server postback time is " + DateTime.Now.ToLongTimeString();
            }
        }
    }
  6. Right click on Time.aspx and select show in browser, then click the Postback Time button and you can see that the page post back to get the time.
  7. Right click on TrainingAjax and select Add new Item and select from template Web Form  name it TimeAjax.aspx
  8. Write the following code in the TimeAjax.aspx:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TimeAjax.aspx.cs" Inherits="TrainingAjax.TimeAjax" %>

    <!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>Page Postback vs Ajax</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <h3>Page Postback vs Ajax</h3>
            <asp:Label ID="TimeLabel" runat="server" Text="Click the button forserver time"></asp:Label>
            <br />
            <br />
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="AjaxTimeLabel" runat="server" Text="Click the button for the Ajax server time"></asp:Label>
                <br />
                <br />
                <asp:Button ID="AjaxButton" runat="server" Text="Ajax Time"
                    onclick="AjaxButton_Click"  />

            </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        </form>
    </body>
    </html>
  9. And in TimeAjax.aspx.cs write the following code:
    using System;

    namespace TrainingAjax
    {
        public partial class TimeAjax : System.Web.UI.Page
        {
            protected void AjaxButton_Click(object sender, EventArgs e)
            {
                AjaxTimeLabel.Text = "Server AJAX time is " + DateTime.Now.ToLongTimeString() + " .";
            }
        }
    }
  10. Right click on TimeAjax.aspx and select show in browser, then click the Ajax Time button and you can see that the page get the time without post back.
Note:
When we Add ScriptManager in VS it add JavaScript code in page, We can see that in source code of page on browser 

1 comment:

Automatic Traffic Exchange

YallaTech Facebook page