YallaTech: 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:

Start Microsoft Visual Studio 2010 from Start | All Programs | Microsoft Visual Studio 2010.
Open solution from last post Ajax Fundamentals part 1 or download it from this link
http://ul.to/3v69hdzj
Right click on TrainingAjax and select Add new Item and select from template Web Form name it Time.aspx

Add ASP.NET web form
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>
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();

        }

    }

}
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.
Right click on TrainingAjax and select Add new Item and select from template Web Form name it TimeAjax.aspx
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>
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() + " .";

        }

    }

}
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

YallaTech

Friday, February 8, 2013

Ajax Fundamentals part 2

Web Form Processing

1 comment:

YallaTech Facebook page