ASP.NET Tutorial/Ajax/UpdatePanel
Содержание
- 1 Entering customer feedback into an Ajax-enabled form.
- 2 Nesting UpdatePanel Controls
- 3 Show Alert UpdatePanel
- 4 Specifying UpdatePanel Triggers
- 5 UpdatePanel Client-Side Page Execution Lifecycle
- 6 UpdatePanel Custom Progress
- 7 UpdatePanels and JavaScript
- 8 UpdatePanel Server-Side Page Execution Lifecycle
- 9 Updating UpdatePanels Programmatically
- 10 Using the UpdatePanel Control
Entering customer feedback into an Ajax-enabled form.
<source lang="csharp">
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title>Feedback</title>
</head> <body>
<form id="form1" runat="server">
<asp:ScriptManager id="sm1" Runat="server" />
<asp:UpdatePanel id="up1" Runat="server"> <ContentTemplate> <asp:FormView id="frmFeedback" DataSourceId="srcFeedback" DefaultMode="Insert" Runat="server"> <InsertItemTemplate> <asp:Label id="lblName" Text="Name:" AssociatedControlID="txtName" Runat="server" /> <asp:RequiredFieldValidator id="valName" Text="Required" ControlToValidate="txtName" Runat="server" />
<asp:TextBox id="txtName" Text="<%# Bind("Name") %>" Runat="server" />
<asp:Label id="lblComment" Text="Comment:" AssociatedControlID="txtComment" Runat="server" /> <asp:RequiredFieldValidator id="valComment" Text="Required" ControlToValidate="txtComment" Runat="server" />
<asp:TextBox id="txtComment" Text="<%# Bind("Comment") %>" TextMode="MultiLine" Columns="50" Rows="3" Runat="server" />
<asp:Button id="btnSubmit" Text="Submit" CommandName="Insert" Runat="server" /> </InsertItemTemplate> </asp:FormView>
<asp:GridView id="grdFeedback" DataSourceID="srcFeedback" AllowSorting="true" Runat="server" /> </ContentTemplate> </asp:UpdatePanel>
<asp:SqlDataSource id="srcFeedback" ConnectionString="<%$ ConnectionStrings:con %>" SelectCommand="SELECT Id,Name,Comment,DateSubmitted FROM Feedback" InsertCommand="INSERT Feedback (Name,Comment) VALUES (@Name,@Comment)" Runat="server" />
</form>
</body> </html></source>
Nesting UpdatePanel Controls
<source lang="csharp">
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body>
<form id="form1" runat="server">
<asp:ScriptManager id="sm1" Runat="server" /> Page Time: <%= DateTime.Now.ToString("T") %>
<asp:DropDownList id="ddlProduct" DataSourceID="srcProducts" DataValueField="Id" DataTextField="Title" AutoPostBack="true" Runat="server" /> <asp:SqlDataSource id="srcProducts" ConnectionString="<%$ ConnectionStrings:con %>" SelectCommand="SELECT Id, Title FROM Product" Runat="server" />
<asp:UpdatePanel ID="upOuter" UpdateMode="Conditional" runat="server"> <Triggers> <asp:AsyncPostBackTrigger ControlID="ddlProduct" /> </Triggers> <ContentTemplate> Outer UpdatePanel Time: <%= DateTime.Now.ToString("T") %>
<asp:FormView id="frmProduct" DataSourceID="srcProduct" Runat="server"> <ItemTemplate> <fieldset> <legend>Product</legend> Title: <%# Eval("Title") %>
Director: <%# Eval("Director") %> <asp:UpdatePanel ID="upInner" runat="server"> <ContentTemplate> <asp:ListView id="lstProductComments" DataSourceID="srcProductComments" InsertItemPosition="FirstItem" Runat="server"> <LayoutTemplate> <fieldset> <legend>Comments</legend> Inner UpdatePanel Time: <%= DateTime.Now.ToString("T") %>
</fieldset> </LayoutTemplate> <ItemTemplate>
</ItemTemplate> <InsertItemTemplate> <asp:Label id="lblComment" Text="Comment:" AssociatedControlID="txtComment" Runat="server" />
<asp:TextBox id="txtComment" Text="<%# Bind("Comment") %>" TextMode="MultiLine" Columns="40" Rows="3" Runat="server" />
<asp:Button id="btnInsert" Text="Add Comment" CommandName="Insert" Runat="server" /> </InsertItemTemplate> </asp:ListView> </ContentTemplate> </asp:UpdatePanel> <asp:SqlDataSource id="srcProductComments" ConnectionString="<%$ ConnectionStrings:con %>" SelectCommand="SELECT Id, Comment FROM ProductComment WHERE ProductId=@ProductId" InsertCommand="INSERT ProductComment (Comment,ProductId) VALUES (@Comment,@ProductId)" Runat="server"> <SelectParameters> <asp:ControlParameter Name="ProductId" ControlID="ddlProduct" /> </SelectParameters> <InsertParameters> <asp:ControlParameter Name="ProductId" ControlID="ddlProduct" /> </InsertParameters> </asp:SqlDataSource> </fieldset> </ItemTemplate> </asp:FormView> </ContentTemplate> </asp:UpdatePanel> <asp:SqlDataSource id="srcProduct" ConnectionString="<%$ ConnectionStrings:con %>" SelectCommand="SELECT Id, Title, Director FROM Product WHERE Id=@Id" Runat="server"> <SelectParameters> <asp:ControlParameter Name="Id" ControlID="ddlProduct" /> </SelectParameters> </asp:SqlDataSource>
</form>
</body> </html></source>
Show Alert UpdatePanel
<source lang="csharp">
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server">
protected void btnDeleteAll_Click(object sender, EventArgs e) { if (FileHelper.DeleteAll() == true) { string script = @"alert("All Files Deleted Successfully!");"; ScriptManager.RegisterStartupScript(this, this.GetType(), "filesDeleted", script, true); } }
</script> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server">
<title>Show Alert UpdatePanel</title>
</head> <body>
<form id="form1" runat="server">
<asp:ScriptManager id="sm1" Runat="server" /> <asp:UpdatePanel id="up1" runat="server"> <ContentTemplate> UpdatePanel Time: <%= DateTime.Now.ToString("T") %>
<asp:Button id="btnDeleteAll" Text="Delete All Files" OnClick="btnDeleteAll_Click" Runat="server" /> </ContentTemplate> </asp:UpdatePanel>
</form>
</body> </html></source>
Specifying UpdatePanel Triggers
<source lang="csharp">
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title>Trigger Update Panel</title>
</head> <body>
<form id="form1" runat="server">
<asp:ScriptManager id="sm1" Runat="server" /> Page Time: <%= DateTime.Now.ToString("T") %>
<asp:Button id="btnUpdate" Text="Update" Runat="server" /> <asp:UpdatePanel id="up1" Runat="server"> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnUpdate" EventName="Click" /> </Triggers> <ContentTemplate> Update Panel Time: <%= DateTime.Now.ToString("T") %> </ContentTemplate> </asp:UpdatePanel>
</form>
</body> </html></source>
UpdatePanel Client-Side Page Execution Lifecycle
<source lang="csharp">
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title>Client Lifecycle</title>
</head> <body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdatePanel ID="up1" runat="server"> <ContentTemplate> <asp:Button ID="btnAsync" Text="Async Postback" runat="server" /> </ContentTemplate> </asp:UpdatePanel> <asp:Button ID="Button1" Text="Normal Postback" runat="server" />
<textarea id="TraceConsole" cols="60" rows="10"></textarea>
</form>
</body> <script type="text/javascript">
Sys.Application.add_init(application_init); function application_init() { Sys.Debug.trace("Application.Init"); var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_initializeRequest( prm_initializeRequest ); prm.add_beginRequest( prm_beginRequest ); prm.add_pageLoading( prm_pageLoading ); prm.add_pageLoaded( prm_pageLoaded ); prm.add_endRequest( prm_endRequest ); } function pageLoad() { Sys.Debug.trace("Application.Load"); } function prm_initializeRequest() { Sys.Debug.trace("PageRequestManager.initializeRequest"); } function prm_beginRequest() { Sys.Debug.trace("PageRequestManager.beginRequest"); } function prm_pageLoading() { Sys.Debug.trace("PageRequestManager.pageLoading"); } function prm_pageLoaded() { Sys.Debug.trace("PageRequestManager.pageLoaded"); } function prm_endRequest() { Sys.Debug.trace("PageRequestManager.endRequest"); } function pageUnload() { alert("Application.Unload"); }
</script> </html></source>
UpdatePanel Custom Progress
<source lang="csharp">
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server">
protected void btnSubmit_Click(object sender, EventArgs e) { System.Threading.Thread.Sleep(2000); // sleep 2 seconds }
</script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title>UpdatePanelCustomProgress</title> <style type="text/css"> .normal { width:300px; padding:10px; margin:10px; border: solid 4px black; } .updating { width:300px; padding:10px; margin:10px; border: solid 4px orange; } .updated { width:300px; padding:10px; margin:10px; border: solid 4px green; } </style>
</head> <body>
<form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel id="up1" UpdateMode="Conditional" runat="server"> <ContentTemplate> <%= DateTime.Now.ToString("T") %> <asp:Button id="btnSubmit1" Text="Submit 1" OnClick="btnSubmit_Click" Runat="server" /> </ContentTemplate> </asp:UpdatePanel> <asp:UpdatePanel id="up2" UpdateMode="Conditional" runat="server"> <ContentTemplate> <%= DateTime.Now.ToString("T") %> <asp:Button id="btnSubmit2" Text="Submit 2" OnClick="btnSubmit_Click" Runat="server" /> </ContentTemplate> </asp:UpdatePanel>
</form> <script type="text/javascript"> var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_beginRequest(prm_beginRequest); prm.add_pageLoaded(prm_pageLoaded); function prm_beginRequest(sender, args) { var container = args.get_postBackElement().parentNode; container.className = "updating"; } function prm_pageLoaded(sender, args) { var panelsCreated = args.get_panelsCreated(); for (var k=0;k<panelsCreated.length;k++) panelsCreated[k].className = "normal"; var panelsUpdated = args.get_panelsUpdated(); for (var k=0;k<panelsUpdated.length;k++) panelsUpdated[k].className = "updated"; } </script>
</body> </html></source>
UpdatePanels and JavaScript
<source lang="csharp">
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server">
protected void btnDeleteAll_Click(object sender, EventArgs e) { if (FileHelper.DeleteAll() == true) { string script = @"alert("All Files Deleted Successfully!");"; Page.ClientScript.RegisterStartupScript(this.GetType(), "filesDeleted", script, true); } }
</script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title>Show Alert</title>
</head> <body>
<form id="form1" runat="server">
<asp:Button id="btnDeleteAll" Text="Delete All Files" OnClick="btnDeleteAll_Click" Runat="server" />
</form>
</body> </html></source>
UpdatePanel Server-Side Page Execution Lifecycle
<source lang="csharp">
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server">
public ArrayList _log = new ArrayList(); void Page_PreInit() { _log.Add("PreInit " + sm1.IsInAsyncPostBack); } void Page_Init() { _log.Add("Init " + sm1.IsInAsyncPostBack); } void Page_Load() { _log.Add("Load " + sm1.IsInAsyncPostBack); } void Page_PreRender() { _log.Add("PreRender " + sm1.IsInAsyncPostBack); // Show Lifecycle log bltLog.DataSource = _log; bltLog.DataBind(); }
</script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title>Server Lifecycle</title>
</head> <body>
<form id="form1" runat="server">
<asp:ScriptManager id="sm1" runat="server" /> <asp:UpdatePanel id="up1" runat="server"> <ContentTemplate> <asp:Button id="btnLog" Text="Show Server Page Lifecycle" Runat="server" /> <asp:BulletedList id="bltLog" Runat="server" /> </ContentTemplate> </asp:UpdatePanel>
</form>
</body> </html></source>
Updating UpdatePanels Programmatically
<source lang="csharp">
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server">
protected void btnSearch_Click(object sender, EventArgs e) { ArrayList results = Product.Search(txtSearch.Text); if (results.Count > 0) { grdResults.DataSource = results; grdResults.DataBind(); upResults.Update(); } }
</script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title>Update UpdatePanel</title>
</head> <body>
<form id="form1" runat="server">
<asp:ScriptManager id="sm1" Runat="server" /> <asp:UpdatePanel id="upSearch" Runat="server"> <ContentTemplate> <asp:TextBox id="txtSearch" Runat="server" /> <asp:Button id="btnSearch" Text="Search" OnClick="btnSearch_Click" Runat="server" /> </ContentTemplate> </asp:UpdatePanel> <asp:UpdatePanel id="upResults" UpdateMode="Conditional" Runat="server"> <ContentTemplate> Results Time: <%= DateTime.Now.ToString("T") %>
<asp:GridView id="grdResults" runat="server" /> </ContentTemplate> </asp:UpdatePanel>
</form>
</body> </html></source>
Using the UpdatePanel Control
<source lang="csharp">
The UpdatePanel control updates a portion of a page without updating the entire page. <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title>UpdatePanel Simple</title>
</head> <body>
<form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> Page Time: <%= DateTime.Now.ToString("T") %>
<asp:UpdatePanel id="up1" runat="server"> <ContentTemplate> UpdatePanel Time: <%= DateTime.Now.ToString("T") %>
<asp:Button id="btn" Text="Update" runat="server" /> </ContentTemplate> </asp:UpdatePanel> </form>
</body> </html></source>