Using the UpdatePanel AJAX Control in Visual Studio Web Developer 2010


V4 Ajax Tutorials

Using the UpdatePanel AJAX Control in Visual Studio Web Developer 2010

 

Using the UpdatePanel Control in Visual Studio Web Developer 2010
Microsoft Server-Side AJAX Framework consists of one main control: the UpdatePanel Control. The UpdatePanel Control enables you to update a portion of a page without updating the entire page. In other words it enables you to performance partial page rendering.
If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.
 
Step 1
Let’s open a new website and name it UpdatePanelSimple. Hopefully by now you will have remembered how to open a new website. If not you can check in the beginner tutorials.
The <asp:UpdatePanel> tag has two childtags - the ContentTemplate and the Triggers tags. The ContentTemplate tag is required, since it holds the content of the panel. The content can be anything that you would normally put on your page, from literal text to web controls. The Triggers tag allows you to define certain triggers which will make the panel update its content. The following example will show the use of both childtags.
Step 2 I have copied the code over and go ahead and copy it over to your source code as it looks.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="EmailForm.WebForm1" %>
 
<!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>UpdatePanel Simple</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat ="server"/>
 
    Page Time: <%= DateTime.Now.ToString("T") %>
    <br /><br />
 
    <asp:UpdatePanel
        id="up1"
        runat="server">
        <ContentTemplate>
        UpdatePanel Time <%= DateTime.Now.ToString("T") %>
        <br />
        <asp:Button
            id="btn"
            Text="Update"
            runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
           
    <div>
   
    </div>
    </form>
</body>
</html>
 
 
 
As you can see in the code or when switch over to design view you will see we have added a ScriptManager , and an UpdatePanel as well. The UpdatePanel contains a single Button Control, when you click the button only the content contained in the UpdatePanel control is refreshed.
The Page in the listing displays the current time both inside and outside the Update Control Panel Control. When you click the button, only the time within the UpdatePanel control is refreshed.
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!
In our Next tutorial Regarding the Microsoft AJAX UpdatePanel we will take a more realistic approach that just begs for AJAX control over it.
 
 


Comments

There are no comments yet...Kick things off by filling out the form below.


Leave a Comment