SharePoint and Ajax technology (1): Ajax technology learning

 

SharePoint and Ajax technology (1): Ajax technology learning

 

The previous article introduced how to build an Ajax environment on vs2008. This article can be said to be a learning note. I read the content of the learning video http://www.asp.net/ajax.

1. Open the last created Ajax 1.0-enabled ASP. NET 2.0 web site. Open default. on the ASPX page, under the design view, you can see that there is a scriptmanager control on the page. This control must exist on every page with Ajax functions to provide Ajax support, each page has only one scriptmanager.

<! -- [If! VML] -->
<! -- [Endif] -->

 

The entire experiment in the video is like this. The author places three label controls on the page to display the current time, and then places a button control on the page, the click event is used to trigger the event. The function of the Callback Server is used to display the current time on the three labels. Note that the page is refreshed.

Experiment 1 process:

2. Drag and Drop three labels on the page.

<! -- [If! VML] -->
<! -- [Endif] -->

3. Double-click the button control to add its click event.

<! -- [If! VML] -->
<! -- [Endif] -->

4. Press F5 to run. Click OK.

<! -- [If! VML] -->
<! -- [Endif] -->

5. click the button on the page. A callback occurs on the page, that is, refresh. The current time is displayed on the page.

<! -- [If! VML] -->
<! -- [Endif] -->

 

Experiment 2: updatepanel is added to the page, and the buttons of the content to be updated and the callback event method are put into updatepanel to update the partial content of the page without page refreshing.

6. Open the default. aspx page and add an updatepanel control under the first label.

<! -- [If! VML] -->
<! -- [Endif] -->

7. Drag the second label and button into the updatepanel.

<! -- [If! VML] -->
<! -- [Endif] -->

8. Press F5 to run.

9. After clicking the button, it is found that only the second label content in updatepanel is updated, and the page is not refreshed, and the content of the other two labels is not updated.

<! -- [If! VML] -->
<! -- [Endif] -->

 

Experiment 3: drag the button from updatepanel, leaving only the second label in updatepanel, how can we enable the updatepanel external controls to update the internal content of updatepanel without refreshing a new page When Triggering an event. Trigger.

10. Drag the button from updatepanel and put it at the bottom of the page.

<! -- [If! VML] -->
<! -- [Endif] -->

11. view the HTML source code on the page. Find the added updatepanel. You can see that the label is in contenttemplate. Press ENTER <under this node to display a smart prompt. Select triggers.

12. Add ASP: asyncpostbacktrigger to triggers. In addition, the Control ID of the trigger event is button1 (if you haven't changed it), and the event to be triggered is click, which can be found in the Properties window of the button.

<! -- [If! VML] -->
<! -- [Endif] -->

13. After the updatepanel node is added, the content of the updatepanel node is as follows, and the red letter indicates the added content.

<Asp: updatepanel id = "updatepanel1" runat = "server"> <Contenttemplate> <Asp: Label id = "label2" runat = "server" text = "label"> </ASP: Label> </Contenttemplate> <Triggers> <Asp: asyncpostbacktrigger controlid = "button1" eventname = "click"/> </Triggers> </ASP: updatepanel>

14. Press F5 to run. After clicking the button, the page is successfully refreshed, the content of the second label is updated, and the content of the other two labels is not updated.

<! -- [If! VML] -->
<! -- [Endif] -->

Complete.

 

Source: http://www.cnblogs.com/Bear-Study-Hard/archive/2008/07/22/1243084.html