First Asp.Net Ajax Program

By: Rajesh P.S.

Ajax introduces a revolutionary approach to web pages by enabling Partial-page rendering, which allows for updating specific portions of a webpage without requiring a complete page refresh. The following example illustrates the difference between Partial-page rendering and the traditional method of page updates within the same web page.

ScriptManager control

In order to use the capabilities of ASP.NET AJAX Extensions, the essential core component is the ScriptManager control. In almost every Ajax application, the usage of a ScriptManager control is imperative. In the provided example, we have included a ScriptManager control, an UpdatePanel control, two buttons (Ajax-Button and Non-Ajax-Button), and two label controls within a form.

UpdatePanel control

The first button, Ajax-Button, is situated within the UpdatePanel control area, while the second button, Non-Ajax-Button, is placed outside of the UpdatePanel control area. When running this application and clicking the Ajax-Button, you will observe that only the first label control is updated to display the current server time. Conversely, when clicking the Non-Ajax-Button, both label controls will be updated with the current server time.

This behavior occurs due to the placement of the first button (Ajax-Button) and the associated label control inside the UpdatePanel control area, which triggers Partial-page rendering. Consequently, only the portion of the webpage enclosed within the UpdatePanel is refreshed when the Ajax-Button is clicked. Conversely, when the Non-Ajax-Button is clicked, both labels are updated, as it operates in a traditional manner, resulting in a full page refresh or postback to the web server.

Default.aspx

<!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>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div>  <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <asp:Button ID="Button1" runat="server" Text="Ajax - Button" onclick="Button1_Click" /> </ContentTemplate> </asp:UpdatePanel>  <br /><br />  <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label> <asp:Button ID="Button2" runat="server" Text="Non - Ajax - Button" onclick="Button2_Click" />  </div> </form> </body> </html>

When you copy and paste the above Default.aspx code put the appropriate header like .. if you using c# add the following line at the top of Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

or if you r using vb.net add the following line at the top of Default.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

Full Source | C#

using System.Web; using System.Web.UI; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); Label2.Text = DateTime.Now.ToString(); } protected void Button2_Click(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); Label2.Text = DateTime.Now.ToString(); } }

Full Source | VB.NET

Partial Class _Default Inherits System.Web.UI.Page Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click Label1.Text = DateTime.Now.ToString() Label2.Text = DateTime.Now.ToString() End Sub Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click Label1.Text = DateTime.Now.ToString() Label2.Text = DateTime.Now.ToString() End Sub End Class

Conclusion

Ajax empowers developers to employ Partial-page rendering, updating specific portions of a webpage without requiring a complete refresh. By utilizing the ScriptManager control and UpdatePanel control, developers can selectively update content and enhance the user experience. The example provided demonstrates the distinction between Partial-page rendering and the conventional approach, illustrating how Partial-page rendering achieves targeted updates while minimizing the need for full page refreshes.

Next > ASP.NET Ajax UpdateProgress

Related Topics

More Related Topics.....