Как спрятать содержимое UpdatePanel пока выполняется обработка запроса?

1343111874_interact

Иногда имея панель UpdatePanel с неким содержимым мы хотим спрятать это содержимое на время выполнения AJAX запроса, а на его месте поместить, например, содержимое элемента UpdateProgress. Оказывется сделать это не так то просто.

Интересное решение предлагает автор комментария на форуме asp.net, предлагая скрывать и показывать содержимое панели в момент начала и завершения запроса соответственно:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>Untitled Page</title>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
            </ContentTemplate>

        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                Updating...
            </ProgressTemplate>
        </asp:UpdateProgress>

    </div>

                <script ENGINE="text/javascript">

    var c = new Sys.UI.Control($get("UpdatePanel1"));

    function beginRequestHandler(sender, args)
    {
        c.set_visible(false);
    }

    function endRequestHandler(sender, args)
    {
        c.set_visible(true);
    }

    function pageLoad()
    {
        Sys.WebForms.PageRequestManager.getInstance().
add_beginRequest(beginRequestHandler);
        Sys.WebForms.PageRequestManager.getInstance().
add_endRequest(endRequestHandler);
    }

    </script>
    </form>

</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(5000);
    }
}

Стоит заметить, что это решение работает, но надо иметь ввиду, что скрытие контента панели будет происходить при любом запросе отправляемом со страницы. Чтобы избежать этого, можно, например, в функции beginRequestHandler проверять была ли нажата именно кнопка Button1:

function beginRequestHandler(sender, args)
{
    if (args.get_postBackElement().id == "Button1")
    c.set_visible(false);
}

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>