Documentation for: ASP.NET Ajax Version 1.0

This documentation is for a previous version. For the current released version, see the ASP.NET Ajax documentation on MSDN.

 

 

 

 

 

 

 

Skip Navigation Links.
Tutorials
Sample ASP.NET AJAX Application
ASP.NET AJAX and JavaScript
Extending JavaScript with ASP.NET AJAX
Creating Custom Client Script in ASP.NET AJAX
Dynamically Assigning ASP.NET AJAX Script References
Globalizing a Date by Using Client Script
Embedding a JavaScript File as a Resource in an Assembly
Embedding Localized Resources for a JavaScript File
Adding Localized Resources to a JavaScript File
Creating Custom Client Events
The UpdatePanel Control
Introduction to the UpdatePanel Control
Creating a Simple ASP.NET Page with Multiple UpdatePanel Controls
Using the UpdatePanel Control with Data-Bound Controls
Using the UpdatePanel Control with Master Pages
Using the UpdatePanel Control with User Controls
Using the UpdatePanel Control with a Web Service
Customizing Error Handling for UpdatePanel Controls
Animating UpdatePanel Controls
Canceling an Asynchronous Postback
Giving Precedence to a Specific Asynchronous Postback
Working with PageRequestManager Events
The UpdateProgress Control
Introduction to the UpdateProgress Control
Programming UpdateProgress Controls in Client Script
The Timer Control
Introduction to the Timer Control
Using the Timer Control with Multiple UpdatePanel Controls
ASP.NET Application Services
Using Forms Authentication
Using Profile Information
Web Services
Exposing Web Services to Client Script
Calling Web Services from Client Script
ASP.NET AJAX Extensibility
Creating Custom ASP.NET AJAX Non-Visual Client Components
Creating Custom ASP.NET AJAX Client Controls
Creating an Extender Control
Adding Client Capabilities to a Web Server Control
Creating a Client Component Class Using the Prototype Model
Defining Custom Component Properties and Raising PropertyChanged Events
Releasing Component Resources

Using the ASP.NET UpdatePanel Control with Master Pages

Introduction

Any ASP.NET page that includes an UpdatePanel control also requires a ScriptManager control. To use UpdatePanel controls with master pages, you can put a ScriptManager control on the master page. In this scenario, the master page provides a ScriptManager control for every content page. If you do not want partial-page updates enabled for individual content pages, you can disable partial-page updates for those pages.

Alternatively, you can put the ScriptManager control on each content page. You might do this if only some of the content pages will contain UpdatePanel controls.

You can see the code in action in this tutorial by clicking the Run It buttons. To implement the procedures in your own development environment you need:

  • Visual Web Developer Express Edition or Microsoft Visual Studio 2005.

  • The latest release of Microsoft ASP.NET AJAX installed and configured. For more information, see Installing ASP.NET AJAX.

  • An ASP.NET AJAX Web site.

To add an UpdatePanel control to a content page

  1. Create a new master page and switch to Design view.

  2. In the AJAX Extensions tab of the toolbox, double-click the ScriptManager control to add it to the page. Make sure that you add the ScriptManager control outside the ContentPlaceHolder control.

  3. Outside the ContentPlaceHolder control, add the text Master Page.

  4. From the HTML tab of the toolbox, drag a Horizontal Rule element after the text.

    UpdatePanel Tutorial
  5. Create a content page for the master page.

    In Solution Explorer, right-click the name of the project, and then click Add New Item. In the Add New Item dialog box, select the Select master page check box, and then click OK.

  6. Inside the Content control, type the text Content Page and then from the toolbox add an UpdatePanel control.

    UpdatePanel Tutorial
  7. Add a Calendar control inside the UpdatePanel control.

    UpdatePanel Tutorial
  8. Save your changes and then press CTRL+F5 view the page in a browser.

  9. Click the next and previous month controls on the calendar.

    The calendar changes without refreshing the whole page. This behavior is what you expect when the calendar is inside an UpdatePanel control on a page that is not associated with a master page.

    To see the full example in action, click the Run It button. The example is styled to better show the region of the page that the UpdatePanel control represents.

Refreshing the UpdatePanel from the Master Page

In this part of the tutorial you will add controls to the master page that cause an asynchronous postback and then refresh the UpdatePanel control on the content page.

To enable partial-page updates for all content pages

  1. In the master page, switch to Design view.

  2. Add text and two buttons after the ScriptManager control on the master page.

  3. Set the ID of one button to DecrementButton and its Text value to "-". Set the ID of the other button to IncrementButton and set its Text value to "+".

    UpdatePanel Tutorial

    The buttons will increment and decrement the selected date on the calendar in the content page.

  4. Select the + (plus) button, and then in the toolbar of the Properties window, click the Events button and enter MasterButton_Click in the Click box.

    UpdatePanel Tutorial
  5. Repeat the previous step for the - (minus) button.

  6. Double-click the page outside the controls to create a Page_Load event handler.

  7. Add the following code in the handler to register the two buttons as asynchronous postback controls:

    CS

    protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager1.RegisterAsyncPostBackControl(DecrementButton);
        ScriptManager1.RegisterAsyncPostBackControl(IncrementButton);
    }
    
    

    VB

    Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
        ScriptManager1.RegisterAsyncPostBackControl(DecrementButton)
        ScriptManager1.RegisterAsyncPostBackControl(IncrementButton)
    End Sub
    
    
  8. Add the following code to create a Click handler named MasterButton_Click:

    CS

    protected void MasterButton_Click(object sender, EventArgs e)
    {   
        switch (((Control)sender).ID)
        {
            case "IncrementButton":
                this.Offset = this.Offset + 1;
                break;
            case "DecrementButton":
                this.Offset = this.Offset - 1;
                break;
        }
        ((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();
        Calendar cal = ((Calendar)ContentPlaceHolder1.FindControl("Calendar1"));
        DateTime newDateTime = DateTime.Today.Add(new TimeSpan(Offset, 0, 0, 0));
        cal.SelectedDate = newDateTime;
    }
    
    

    VB

    Protected Sub MasterButton_Click(ByVal Sender As Object, ByVal E As EventArgs)
    
        Select Case Sender.ID
    
            Case "IncrementButton"
                Me.Offset = Me.Offset + 1
            Case "DecrementButton"
                Me.Offset = Me.Offset - 1
        End Select
        Dim upl As UpdatePanel
        upl = ContentPlaceHolder1.FindControl("UpdatePanel1")
        upl.Update()
        Dim cal As Calendar
        cal = ContentPlaceHolder1.FindControl("Calendar1")
        Dim newDateTime As DateTime
        newDateTime = DateTime.Today.Add(New TimeSpan(Offset, 0, 0, 0))
        cal.SelectedDate = newDateTime
    End Sub
    
    
  9. Add the following code to create a public property named Offset in the master page that tracks the difference between today's date and the selected date.

    CS

    public Int32 Offset
    {
        get
        { return (Int32)(ViewState["Offset"] ?? 0);}
        set
        { ViewState["Offset"] = value;}
    }
    
    

    VB

    Public Property Offset() As Integer
        Get
            If ViewState("Offset") Is Nothing Then
                Return 0
            Else : Return ViewState("Offset")
            End If
        End Get
        Set(ByVal value As Integer)
            ViewState("Offset") = value
        End Set
    End Property
    
    
  10. In the content page, switch to Design view and then double-click the Calendar control to create an event handler for the SelectionChanged event.

  11. Add the following code to the SelectionChanged event handler to set the Offset property when the user selects a date.

    CS

    protected void Calendar1_SelectionChanged(object sender, 
        EventArgs e)
    {
        DateTime selectedDate = Calendar1.SelectedDate;
        Master.Offset =
           ((TimeSpan)Calendar1.SelectedDate.Subtract(
           DateTime.Today)).Days;
    }
    
    

    VB

    Protected Sub Calendar1_SelectionChanged(ByVal Sender As Object, ByVal E As EventArgs)
        Dim selectedDate As DateTime
        selectedDate = Calendar1.SelectedDate
        Master.Offset = _
           Calendar1.SelectedDate.Subtract(DateTime.Today).Days
    
    End Sub
    
    
  12. Switch to the content page and add a Page_Load event handler that sets the selected date of the calendar to the current date.

    CS

    protected void Page_Load(object sender, EventArgs e)
    {
        DateTime newDateTime = 
            DateTime.Today.Add(new 
            TimeSpan(Master.Offset, 0, 0, 0));
        Calendar1.SelectedDate = newDateTime;
    }
    
    

    VB

    Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
        Dim newDateTime As DateTime
        newDateTime = DateTime.Today.Add(New TimeSpan(Master.Offset, 0, 0, 0))
        Calendar1.SelectedDate = newDateTime
    End Sub
    
    
  13. Add an @ MasterType directive to the page so that you can refer to the master page Offset property as a strongly typed property.

    CS

    <%@ MasterType VirtualPath="MasterPage.master" %>
    
    

    VB

    <%@ MasterType VirtualPath="MasterPage.master" %>
    
    
  14. In the content page, switch to Design view and select the UpdatePanel control.

  15. In the Properties window, set the UpdatePanelUpdateMode property to Conditional.

    UpdatePanel Tutorial
  16. Save your changes and then press CTRL+F5 view the page in a browser.

  17. Click the next and previous month controls on the calendar.

    The calendar changes without refreshing the whole page.

  18. Select a date on the calendar and then click the buttons on the master page to change the selected date.

    These changes occur without refreshing the whole page.

    To see the full example in action, click the Run It button. The example is styled to better show the region of the page that the UpdatePanel control represents.

Disabling Partial-Page Updates for a Content Page

If you add a ScriptManager control to a master page, by default partial-page updates are enabled for all content pages. If do not want to enable partial updates for an individual content page, you can disable that capability. You might do this is if your content page contains custom controls that are not compatible with partial-page updates.

To disable partial-page updates for a content page

  1. In the content page, create a handler for the page's Init event that sets the ScriptManager control's EnablePartialRendering property to false.

    You must change the state of the EnablePartialRendering property during or before the content page's Init event.

Review

This tutorial shows how to use an UpdatePanel control in master pages. If there is a ScriptManager control on the master page, you can use UpdatePanel controls on content pages without declaring a ScriptManager control in the content page.

To disable partial-page rendering for an individual content page whose master page has partial-page rendering enabled, programmatically disable partial-page rendering for the content page.