• Home
  • New Entries
  • Popular Entries
  • Submit a Story
  • About

Partial page updates using ASP.NET Ajax ...

In my previous tutorial or article i have explained how to start ASP.NET AJAX. In this ajax tutorial or ajax article i will show you how we can update partial page using asp.net ajax or how we can use multiple update panel in aspx page. Before going to an example i want to let you know some basics on partial page loading using ajax.

1. If you use muliple update panel in a page & initiate triger for this section within the update panel then you have no problem.

2. If you want to put a portion in a update panel & want ajax enabled render from an event outside of Update Panel control then you have to learn Triggers.

3. If you want to update more than one update panel control by a click event(outside of all Update Panel) its also possible.

4. Bydefault for each async or sync post back each update panel will be rendered. You can restrict the invocation by setting the UpdateMode="Conditional". Means bydefault UpdateMode="Always".

So ok we want to examine each issues by using the below example.

Add a page then copy the below HTML mark up code into your page.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PartialUpdate.aspx.cs" Inherits="PartialUpdate" %>

<!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:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label runat="server" ID="lbl1"></asp:Label>
<br /><br />
<asp:Button runat="server" ID="Button1" Text="Async PostBack 1"
onclick="Button1_Click" />
</ContentTemplate>
<Triggers><asp:AsyncPostBackTrigger ControlID="Button1_ext" EventName="Click" /></Triggers>
</asp:UpdatePanel>

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" ID="lbl2"></asp:Label>
<br /><br />
<asp:Button runat="server" ID="Button2" Text="Async PostBack 2"
onclick="Button2_Click" />
</ContentTemplate>
<Triggers><asp:AsyncPostBackTrigger ControlID="Button1_ext" EventName="Click" /></Triggers>
</asp:UpdatePanel>

<br />
<br />

<asp:Button runat="server" ID="Button1_ext" Text="Render Update Panels Content"
onclick="Button1_ext_Click" />

</div>
</form>
</body>
</html>


Server Side Code:

protected void Button1_Click(object sender, EventArgs e)
{
lbl1.Text = "Current Time Is: " + DateTime.Now;
}

protected void Button2_Click(object sender, EventArgs e)
{
lbl2.Text = "Current Time Is: " + DateTime.Now;
}

protected void Button1_ext_Click(object sender, EventArgs e)
{
lbl1.Text = "Current Time Is: " + DateTime.Now;
lbl2.Text = "Current Time Is: " + DateTime.Now;
}

Output:

Ok now run the project. What you get corresponding buttons click event updates corresponding label of its Update Panel. The third button which is outside the Update Panels will render both Update Panels without refreshing the page? Why because here i used Triggers in both Update Panel for this Button control. Now remove Triggers tag from second Update Panel & examine the output. Hope now you can understand all basic aspects on partial page loading using asp.net ajax. So keep experimenting.

 Original Source:
http://shawpnendu.blogspot.com/2009/10/partial-page-updates-using-aspnet-ajax.html

AddThis Social Bookmark Button

Posted at 09:59:42 am | Permalink | Posted in .Net  

Related Stuff

  • MooV: Using cutting edge Video phones and Software Video Phones - coupling all that with VoIP and empowering the disabled.

  • Moo Telecom: VoIP communications made easy - Ring anyway with the fun and ease of using a normal phone

  • TagR:Mobile Social Network with Real Time Locations Based services, and Ambience Intelligence, VoiP, IM, Skype, Googletalk, Mapping, Flickr, Events, Calendaring, Scheduling, SecondLife Support

  • ClearSMS : ClearSMS is a Web-based application that lets you send bulk SMS messages to your customers, contacts, or just about anyone.

  • Jajah:jah is a VoIP (Voice over IP) provider, founded by Austrians Roman Scharf and Daniel Mattes in 2005[1]. The Jajah headquarters are located in Mountain View, CA, USA, and Luxembourg. Jajah maintains a development centre in Israel.

  • Skype: It’s free to download and free to call other people on Skype. Skype the number one voice over ip software

  • PrivatePhone: a free local phone number with voicemail and messages you can check online or from any phone.

Top Stuff

e-messenger

MSN Web Messenger

eBuddy

ASP.NET Ajax CalendarExtender and Validation

AIM Express

Ajax Tools for ASP.NET Developers



About Ajaxlines

Ajaxlines is a project focused on providing its audience with a database of most of Ajax related articles, resources, tutorials and services from around the world.

Its purpose is to showcase the power of Ajax and to act as a portal to the Ajax development community.


Search


Topics

  • .Net (176)
  • Ajax (112)
  • Ajax Games (10)
  • Articles (95)
  • Bookmarking (35)
  • Calendar (21)
  • Chat (45)
  • ColdFusion (3)
  • CSS (84)
  • Email (23)
  • Facebook (84)
  • Flash (20)
  • Google (54)
  • Html (29)
  • Image (12)
  • International Calls & VOIP (7)
  • Java (58)
  • Javascript (280)
  • jQuery (200)
  • JSON (75)
  • Perl (2)
  • PHP (172)
  • Presentation (19)
  • Python (3)
  • Resources (2)
  • RSS (8)
  • Ruby (32)
  • Storage (4)
  • Toolkits (103)
  • Tutorials (227)
  • UI (11)
  • Utilities (174)
  • Web2.0 (18)
  • XmlHttpRequest (29)
  • YUI (13)

© 2006 www.ajaxlines.com. All Rights Reserved. Powered by IRange