This tutorial will explore Partial Page Updates with ASP.NET AJAX. C#
In this tutorial we will explore ASP.NET AJAX Extensions ability to do a partial or incremental page update without doing full postbacks to the server, without any code changes and with minimal markup changes.
The ability to integrate partial page rendering is integrated into ASP.NET with small changes to your project. Let’s start by integrating partial rendering into an existing project. Assuming that you have Visual Studio 2008 you can start.
Need help with Windows Dedicated Hosting? Try Server Intellect I'm a happy customer!
To begin, start Visual Studio 2008, and create a new page by clicking File > New > Web Site > ASP.NET and name it AjaxPPRender or whatever you would like. Now you are in front of a blank default.aspx page with basic markup. First, drag and drop a Label control (lblLabel), and a Button control (btnButton) onto the page with the form element.
Set the Label text properties to “Congradulations! You have clicked the Button!” and the Button text to “Click”. Now navigate to the code behind view or double click the btnButton to generate the button handler. Then set the lblLabel.Text to “Congradulations! You have clicked the Button!”. The default.aspx markup should look similar to example below:
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblLabel" runat="server" Text="This is a label!">
<asp:Button ID="btnButton" runat="server" Text="Click Me" OnClick="btnButton_Click" />
</div>
</form>
</body> |
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
The default.aspx.cs page should look similar to this example below:
protected void btnButton_Click(object sender, EventArgs e)
{
lblLabel.Text ="Congradulations! You have clicked the button!"
} |
Now you can Save and Run and Test. Click the button and notice how the page refreshes to change the text in the label, or if there is a little flicker as the page is redrawn. Close your browser window and return to Visual Studio and navigate to “AJAX Extensions”.
Next, create some whitespace before the lblLabel and as shown above locate the UpdatePanel within the AJAX Extensions and place it there or you can do so by doing the following to your default.aspx markup:
<asp:UpdatePanel ID="upUpdatePanel" runat="server">
<ContentTemplate>
<asp:ScriptManager ID="smScriptManager" EnablePartialRendering="true" runat="server">
</asp:ScriptManager>
<asp:Label ID="lblLabel" runat="server" Text="Label">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel> |
**Important: Either way drag or type in the closing tag past the end of the button element so that the lblLabel and btnButton controls are wrapped. Then after that tag, open a new tag called .. This tag should wrap around the lblLabel and btnButton tag as well.
Anywhere within the element inlcude a ScriptManager control by simply double clicking it in the toolbox. After you place that tag in change include the attribute EnablePartialRendering=”true”.
<form>
<br />
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Integrating Partial Page Rendering </head>
<body>
<form id="myForm" runat="server">
<div>
<asp:UpdatePanel ID="upUpdatePanel" runat="server">
<contentTemplate>
</div>
<asp:ScriptManager ID="smScriptManager" EnablePartialRendering="true" runat="server">
</asp:ScriptManager>
<asp:Label ID="lblLabel" runat="server" Text="Label">
<br />
<asp:Button ID="btnButton" runat="server" onclick="btnButton_Click" Text="Click" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html> |
Notice if you open your web.config file you should notcie that Visual Studio has automatically added a complilation reference to System.Web.Extensions.dll. Now if you run your Web site you can notice how no source code changes were required to support partial page rendering; only the markup was changed.
We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!
Notes:
The ScriptManager control is a very important control within the ASP.NET AJAX Extensions. It provides access to the script library, supports partial rendering, and provides extensive support for additional ASP.NET services. Some of those services include authentication and profiling. It also provides globalization and localization support for the client scripts.
Learn How to Handle Custom Errors for UpdatePanels
We will quickly go over how to handle custom errors for UpdatePanels. Despite that updates are handled by triggers determined by UpdatePanel controls, the support for error and custom error handling messages is by a page’s ScriptManager control instance. By exposing an event, AsyncPostBackError, to the page can appropriately provide custom exception handling logic.
When applying a AsyncPostBackError event, specify the AsyncPostBackErrorMessage property, which will then prompt an alert box to be raised upon completion of the callback. Also, client side customization is also possible instead of the default alert box. For example, if you want to display a customized element rather than box. In a case like that you might handle the error like this example below:
| <script type=”text/javascript”> |
The code script above registers a callback with the client side AJAX runtime after the asynchronous request has been complete. Then it checks for an error, if so, processes, then indicates to the runtime that the error was handled in a custom script.
We moved our Web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
