UpdatePanel a very important control in Atlas, powerful and easy to use, allows us to add Ajax to an existing ASP.net site with little change. With the advice of dflying, I am also a world of UpdatePanel into Atlas. This article will add UpdatePanel to an existing ASP.net application in both visual and code ways.
Main content
1 . UpdatePanel Overview
2 . Using visual methods
3 . Using Code Methods
one. UpdatePanel Overview
UpdatePanel a very important control in Atlas, powerful and easy to use, allows us to add Ajax to an existing ASP.net site with little change. With the advice of dflying, I am also a world of UpdatePanel into Atlas. This article will add UpdatePanel to an existing ASP.net application in both visual and code ways. Look at a small section of the UpdatePanel sample program:
< Atlas:updatepanel ID = "UpdatePanel1" runat = "Server" Mode = "Always" >
< triggers >
< Atlas:controleventtrigger ControlID = "DropDownList1" EventName = "SelectedIndexChanged" />
</ triggers >
< ContentTemplate >
< Asp:label ID = "Label1" runat = "Server" Width = "164px" Font-bold = "True" ></ Asp:label >
</ ContentTemplate >
</ Atlas:updatepanel >
What we need to be aware of is:
1 . There are two ways to update UpdatePanel, that is, the mode above
Update mode |
Description |
Always |
updates the panel's content every time Ajax postback or regular postback
Mode = "Always" |
Conditional |
the contents of the panel are updated only if one of the following conditions is true:
when a control in a panel throws a postback
when a trigger specified by the panel is raised
when the panel's update () method is invoked in Codebehind
Mode =" Conditional " |
2 . The triggers element specifies the event source in which the action occurs, and UpdatePanel provides two kinds of trigger that cause the asynchronous postback:
triggers |
Description |
Controlvaluetrigger |
updates when a specified property of a control changes.
< Atlas : Controlvaluetrigger ControlID= "DropDownList1" propertyname= "SelectedValue" / > |
Controleventtrigger |
is updated when a control issues a specified event.
< Atlas : Controleventtrigger ControlID= "DropDownList1" EventName= "SelectedIndexChanged" /> |
3 . The ContentTemplate element specifies the part that you want to update, and the controls that need to be updated dynamically are placed in the ContentTemplate. Here we'll look at how to use UpdatePanel by visualizing and coding the two ways.
two. Add by using the visual method
1 . Create a new Web site project, add a DropDownList and a label, and add some simple items for DropDownList:
< asp:dropdownlist ID = "DropDownList1" runat = "Server" Width = "167PX" AutoPostBack = "True" onselectedindexchanged = "DropDownList1_SelectedIndexChanged" >
< Asp:listitem > Nancy </ Asp:listitem >
< Asp:listitem > Andrew </ Asp:listitem >
< Asp:listitem > Janet </ Asp:listitem >
< Asp:listitem > Margaret </ Asp:listitem >
</ asp:dropdownlist >
Set the AutoPostBack property of DropDownList to True and add the following code to the SelectedIndexChanged event:
protected void dropdownlist1_selectedindexchanged ( Object sender, EventArgs e)
{
this. Label1.Text = "Selected: " + this. Dropdownlist1.selectedvalue;
}
2 . Run the program, this is a standard asp.net application, the label will display different text according to the DropDownList choice, but this page is completely refreshed, in the selection, the browser's status bar will display a progress bar, as shown in the following figure:
Below we will add the Atlas UpdatePanel to the application visually.
3 . Dragging a UpdatePanel control onto the page, how to add the Atlas control to the Toolbox please refer to add "Atlas" controlsto the Toolbox, The Microsoft.Web.Atlas.dll is automatically added to the project.
4 . Add ScriptManager to the page.
5 . Set the EnablePartialRendering property to True.
6 . Drag the Label control to UpdatePanel and set the UpdatePanel properties and triggers.
at this point, we have visualized the way to complete the addition of UpdatePanel, run the program will see the effect.
three. Adding using code Methods
With the second step above, let's take a look at adding specific code. After adding the Microsoft.Web.Atlas.dll references, add the following in the page:
<% @ Register Assembly="Microsoft.Web.Atlas" Namespace ="Microsoft.Web.UI" TagPrefix="Atlas " %>
Remember to add the ScriptManager control and set the EnablePartialRendering property to True! For a detailed introduction to ScriptManager, refer to the Atlas Learning notes (2): A comprehensive understanding of ScriptManager.
< Atlas:scriptmanager ID = "ScriptManager1" runat = "Server" enablepartialrendering = "true" >
</ Atlas:scriptmanager >
The following is the protagonist UpdatePanel debut, where you need to set Triggers,triggers specifies the event source where the action occurs, or you can set the UpdatePanel update mode.
< Atlas:updatepanel ID = "UpdatePanel1" runat = "Server" >
< triggers >
< Atlas:controlvaluetrigger ControlID = "DropDownList1" PropertyName = "SelectedValue" />
</ triggers >
< ContentTemplate >
< Asp:label ID = "Label1" runat = "Server" Width = "164px" Font-bold = "True" ></ Asp:label >
</ ContentTemplate >
</ Atlas:updatepanel >
Here we set the Controlvaluetrigger, if you want to set the Controleventtrigger, the code is as follows:
< Atlas:updatepanel ID = "UpdatePanel1" runat = "Server" >
< triggers >
< Atlas:controleventtrigger ControlID = "DropDownList1" EventName = "SelectedIndexChanged" />
</ triggers >
< ContentTemplate >
< Asp:label ID = "Label1" runat = "Server" Width = "164px" Font-bold = "True" ></ Asp:label >
</ ContentTemplate >
</ Atlas:updatepanel >
all the steps here are done, the operation will be able to realize the effect. In the process, we did not consider any XMLHttpRequest or ActiveX objects, and did not write any client script code, all of which Atlas has been fully done for us.
