One of Ajax notes: build the first Ajax webpage

First, prepare the environment and download asp from Microsoft. net Ajax 1.0 Extentions (Web site: http://asp.net/ajax/downloads/default.aspx), of course, first install vs2005, on 2003 is feasible, I do not know, because I have not tried.

After the installation is complete, open vs2005 and create a new website, and you will see an additional "ASP. net Ajax-enabled web site ", select this item, OK, you will see the generated default. aspx, at the top of the detail page, there is an invisible control: scriptmanager, which is a control to be included on every page, so the default page is added directly.

Open the toolbox and you will see an additional Ajax Extentions tab, which contains the Ajax-specific control. Drag an updatepanel to the page and drag a button and a label to the updatepanel, in the Click Event of the button, write label1.text + = "Hi". You can compile and run it. Run it first.

Compile and run, click the button constantly, and you will find that there are more and more hi on the label, but there is no trace of refreshing the whole page, cool.

Now let's look at this small program: updatepanel is the most basic control, which is the refresh unit. The reason why Ajax web pages can not be returned is that only one updatepanel is refreshed each time, however, the refresh is invisible. Of course, this is achieved through DHTML.

Now let's make some modifications to this applet.

Delete the Click Event function of the original button1, move button1 from updatepanel1, put it at the top of the page, add another button, and add another updatepanel on the page, in addition, it is also named "label" (updatepanel2, button2, label2, respectively) and then written in the load function of the page:
Label1.text + = "hi ";
Label2.text + = "hi"; in this way, only one function in default. aspx. CS is the load function,

Then start processing the ASPX page: Set the childrenastriggers attributes of updatepanel1 and updatepanel2. to false, set the updatemode attribute to conditional, switch to the XHTML code page, and add the triggers node on the contenttemplate node. For example, the code of my updatepanel1 is as follows:

 

<Asp: updatepanel id = "updatepanel1" runat = "server">
<Triggers>
<Asp: asyncpostbacktrigger controlid = "button1" eventname = "click"/>
</Triggers>

<Contenttemplate>
<Asp: Label id = "label1" runat = "server"> </ASP: Label>
</Contenttemplate>
</ASP: updatepanel>

 

Of course, you can also directly edit the triggers attribute in the "design" view, which is the same effect.
Updatepanel2. then, re-compile and run: Click button1 three times, four "hi" appears on label1, and label2 still has only one (written at the first load), and then click button2, label2 immediately becomes five hi.

The two buttons are placed out of updatepanel. If there is no "<triggers>" section, clicking them will definitely cause a full page return. However, after the <triggers> section is added, When you click them, it is asynchronous callback, and it is interesting that the page_load function will still be executed because it is actually carried out, but the page will not be refreshed immediately after execution. when you click button1, updatepanel1 will be refreshed, but 2 will not. Therefore, although two labels are added with a hi at the same time, only label1 changes will be seen. -------- this is why we set updatemode to conditional. If it is the default always, the two labels will be updated at the same time.

Updatemode controls when the updatepanel will be returned. If it is always, any event that causes the return will be automatically updated. If it is conditional, it will be returned unless displayed, or the whole page is returned, otherwise it will keep the current status of keep.

However, the childrenastriggers attribute does not actually play a role here. When this attribute is set to true, its subcontrols can cause panel updates, but set it to false.

Paste the complete sample code below:

 

<% @ Page Language = "C #" autoeventwireup = "true" codefile = "default. aspx. cs" inherits = "_ default" %>

<% @ Register Assembly = "system. Web. Extensions, version = 2.0.0.0, culture = neutral, publickeytoken = 31bf3856ad364e35"
Namespace = "system. Web. UI" tagprefix = "asp" %>

<! Doctype HTML public "-// W3C // dtd xhtml 1.1 // en" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> untitled page </title>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Asp: scriptmanager id = "scriptmanager1" runat = "server"/>
<Br/>
<Asp: button id = "button1" runat = "server" onclick = "button#click" text = "button"/>
<Asp: button id = "button2" runat = "server" onclick = "button#click" text = "button"/> <br/>
<Div>
<Asp: updatepanel id = "updatepanel1" runat = "server">
<Triggers>
<Asp: asyncpostbacktrigger controlid = "button1" eventname = "click"/>
</Triggers>

<Contenttemplate>
<Asp: Label id = "label1" runat = "server"> </ASP: Label>
</Contenttemplate>
</ASP: updatepanel>
<Asp: updatepanel id = "updatepanel2" runat = "server">
<Triggers>
<Asp: asyncpostbacktrigger controlid = "button2" eventname = "click"/>
</Triggers>
<Contenttemplate>
& Nbsp; <br/>
<Asp: Label id = "label2" runat = "server"> </ASP: Label>
</Contenttemplate>
</ASP: updatepanel>
</Div>
</Form>
</Body>
</Html>

 

 

 

 

Protected void page_load (Object sender, eventargs E)
{
Label1.text + = "hi ";
Label2.text + = "hi ";
}