ASP. NET AJAX Starter Series (9): Using UpdatePanel in master Pages

This article briefly describes the use of UpdatePanel controls in master pages, translated from official documents.

Main content

1. Adding UpdatePanel controls to the content Page

2. Refresh UpdatePanel with master page

A Adding UpdatePanel controls to Content-page

1. Add a new master Page and switch to Design view.

2. In the Toolbox, under the AJAX Extensions tab, double-click the ScriptManager control to add to the page, and make sure that the ScriptManager control is added outside the ContentPlaceHolder control.

3. Add the text "Master Page" to the ContentPlaceHolder control.

4. Under the HTML tab of the Toolbox, drag horizontal Rule (horizontal line) to the text and the page looks like this:

5. Create a content page and select its master page for the page we just created.

Right-click in the Solution Manager and select the Add New Item menu command, select the Select Master page in the Add New Item dialog box and click the OK button.

6. Enter the content page in the content control in the content page, and add a UpdatePanel control.

7. Add the Calendar control in the UpdatePanel control .

8. Save and press CTRL + F5 to run.

9. When you click the last month and next month buttons in the Calendar control, the page does not have a full page refresh.

Two Refresh UpdatePanel with master page

In this example we will add some controls to the master page that will raise an asynchronous commit and refresh UpdatePanel in the content page.

1. Switch to Design view in the master page.

2. Add some text and two buttons to the page, set the ID property of a button and the Text property to Decrementbutton and "-" respectively, set the ID property of the other button and the Text property to Incrementbutton and "+", respectively.

3. Select the + button, enter Masterbutton_click in the Click event box of the Properties window , and repeat once for the button.

4. Double-click the page outside the control to add Page_Load event handling.

5. Add the following code to the Page_Load event handler, registering the two button as the asynchronous Submit button.

protected void Page_Load (object  sender, EventArgs e) {    Scriptmanager1.registerasyncpostbackcontrol ( Decrementbutton);    Scriptmanager1.registerasyncpostbackcontrol (Incrementbutton);}

6. Add the following code to create a Masterbutton_click event handler.

{
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< Span style= "color: #000000;" >, 0
    cal. Selecteddate = newdatetime;

protected voidMasterbutton_click (Objectsender, EventArgs e) {    Switch((Control) sender) { 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 (NewTimeSpan (Offset,0,0,0)); Cal. SelectedDate=Newdatetime;}

< Span style= "color: #000000;" >7 Create a public property offset in master page to display the difference between the selected date and day.

 Public Int32 offset{    get    return (Int32) (viewstate["Offset " 0 ); }    set    {viewstate["Offset"] = value;}}

8. In the content page, switch to Design view and double-click the Calendar control to add a SelectionChanged event handler that sets the offset property when the user selects the date.

9. Add the following code to the SelectionChanged event handler.

protected void Calendar1_SelectionChanged (object  Sender,eventargs e) {    = calendar1.selecteddate;     =       (TimeSpan) Calendar1.SelectedDate.Subtract (       datetime.today)). Days;}

. Add the following code to the Page_Load event in the Content page page .

protected void Page_Load (object  sender, EventArgs e) {    =        DateTime.Today.Add (new          0 0 0 ));     = newdatetime;}

One by one. Add the @ MasterType tag to the page so that you can refer to the offset property of the Master page page as a strongly typed property .

<%@ MasterType virtualpath= "Masterpage.master"%>

12. In the content page, switch to Design view and select the UpdatePanel control.

13. In the Properties window, set UpdateMode to conditional.

14. Save and press CTRL + F5 to run.

15. You can see the full page refresh by clicking the previous month and next month buttons in the Calendar control.

16. Select a date and click the button in the master page to see that there is still no full page refresh.

[translated from official documents]

ASP. NET AJAX Starter Series (9): Using UpdatePanel in master Pages