ASP.NET Tutorial/Ajax/UpdatePanel

Материал из .Net Framework эксперт
Перейти к: навигация, поиск

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>
           <%# Eval("Comment") %>
       </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>