ASP.NET Tutorial/Ajax/UpdatePanel

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

Entering customer feedback into an Ajax-enabled form.

<%@ 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">
    <div>
    <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" />
        <br />
        <asp:TextBox
            id="txtName"
            Text="<%# Bind("Name") %>"
            Runat="server" />
        <br /><br />
        <asp:Label
            id="lblComment"
            Text="Comment:"
            AssociatedControlID="txtComment"
            Runat="server" />
        <asp:RequiredFieldValidator
            id="valComment"
            Text="Required"
            ControlToValidate="txtComment"
            Runat="server" />
        <br />
        <asp:TextBox
            id="txtComment"
            Text="<%# Bind("Comment") %>"
            TextMode="MultiLine"
            Columns="50"
            Rows="3"
            Runat="server" />
        <br /><br />
        <asp:Button
            id="btnSubmit"
            Text="Submit"
            CommandName="Insert"
            Runat="server" />
        </InsertItemTemplate>
    </asp:FormView>
    <br /><br />
    <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" />
    </div>
    </form>
</body>
</html>


Nesting UpdatePanel Controls

<%@ 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">
    <div>
    <asp:ScriptManager
        id="sm1"
        Runat="server" />
    Page Time: <%= DateTime.Now.ToString("T") %>
    <br />
    <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" />
    <br /><br />
    <asp:UpdatePanel ID="upOuter" UpdateMode="Conditional" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ddlProduct" />
    </Triggers>
    <ContentTemplate>
    Outer UpdatePanel Time: <%= DateTime.Now.ToString("T") %>
    <br />
    <asp:FormView
        id="frmProduct"
        DataSourceID="srcProduct"
        Runat="server">
        <ItemTemplate>
        <fieldset>
    <legend>Product</legend>
    Title: <%# Eval("Title") %>
    <br />
    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") %>
            <div id="itemContainer" runat="server">
            </div>
        </fieldset>
        </LayoutTemplate>
        <ItemTemplate>
            <div class="comment">
            <%# Eval("Comment") %>
            </div>
        </ItemTemplate>
        <InsertItemTemplate>
        <asp:Label
            id="lblComment"
            Text="Comment:"
            AssociatedControlID="txtComment"
            Runat="server" />
        <br />
        <asp:TextBox
            id="txtComment"
            Text="<%# Bind("Comment") %>"
            TextMode="MultiLine"
            Columns="40"
            Rows="3"
            Runat="server" />
        <br />
        <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>
    </div>
    </form>
</body>
</html>


Show Alert UpdatePanel

<%@ 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">
    <div>
    <asp:ScriptManager
        id="sm1"
        Runat="server" />
    <asp:UpdatePanel id="up1" runat="server">
    <ContentTemplate>
    UpdatePanel Time: <%= DateTime.Now.ToString("T") %>
    <br />
    <asp:Button
        id="btnDeleteAll"
        Text="Delete All Files"
        OnClick="btnDeleteAll_Click"
        Runat="server" />
    </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>


Specifying UpdatePanel Triggers

<%@ 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">
    <div>
    <asp:ScriptManager
        id="sm1"
        Runat="server" />
    Page Time: <%= DateTime.Now.ToString("T") %>
    <br />
    <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>
    </div>
    </form>
</body>
</html>


UpdatePanel Client-Side Page Execution Lifecycle

<%@ 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">
    <div>
        <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" />
        <br /><br />
        <textarea id="TraceConsole" cols="60" rows="10"></textarea>
    </div>
    </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>


UpdatePanel Custom Progress

<%@ 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" />
    <div id="panelContainer">
    <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>
    </div>
    </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>


UpdatePanels and JavaScript

<%@ 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">
    <div>
    <asp:Button
        id="btnDeleteAll"
        Text="Delete All Files"
        OnClick="btnDeleteAll_Click"
        Runat="server" />
    </div>
    </form>
</body>
</html>


UpdatePanel Server-Side Page Execution Lifecycle

<%@ 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">
    <div>
    <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>
    </div>
    </form>
</body>
</html>


Updating UpdatePanels Programmatically

<%@ 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">
    <div>
    <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") %>
        <br />
        <asp:GridView
            id="grdResults"
            runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>


Using the UpdatePanel Control

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") %>
    <br /><br />
    <asp:UpdatePanel
        id="up1"
        runat="server">
        <ContentTemplate>
        UpdatePanel Time: <%= DateTime.Now.ToString("T") %>
        <br />
        <asp:Button
            id="btn"
            Text="Update"
            runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>
Источник — «http://nfex.ru/index.php?title=ASP.NET_Tutorial/Ajax/UpdatePanel&oldid=3028»