ASP.net Страница загрузки всплывающих окон - PullRequest
1 голос
/ 16 июня 2009

Мне было интересно, возможно ли, чтобы при загрузке страницы отображался модалпоп, говоря, что страница загружается. У меня есть страница, которая получает много данных из внешнего источника, что означает, что требуется некоторое время, прежде чем любой из элементов управления будет фактически заполнен. Я хотел бы иметь всплывающее окно или что-то подобное, которое сообщает пользователю, что страница загружается.

Я пробовал это:

<ajax:ModalPopupExtender ID="mpeLoader" runat="server" TargetControlID="btnLoader"
    PopupControlID="pnlLoading" BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlLoading" runat="server" Width="100px" Style="display: none;">
    <div class="detailspopup">
        <table>
            <tr>
                <td><asp:Image ID="imgLoader" runat="server" ImageUrl="~/App_Themes/Main/img/loading.gif" /></td>
            </tr>
            <tr>
                <td>Loading...</td>
            </tr>
        </table>
    </div>
</asp:Panel>

с фиктивной кнопкой btnLoader, позволяющей мне получить доступ к шоу и скрыться от кода позади. Я играл с методом .show в жизненном цикле страницы, но я не могу найти способ показать poopup, когда страница загружается (и исчезает, когда загрузка завершена). Это также потребуется при фильтрации данных, что позволяет получать новые данные на основе данных фильтра.

Ответы [ 3 ]

1 голос
/ 16 июня 2009

Рассматривали ли вы использование jQuery? Есть несколько отличных модальных диалоговых плагинов. В прошлом я широко использовал SimpleModal Эрика Мартина и был очень доволен этим. Он имеет хуки для обратных вызовов как до, так и после отображения диалогового окна, поэтому вы можете выполнять любые проверки, которые вам нужны, с помощью функций.

Используя маршрут jQuery - у вас может быть div, который окружает весь контент, который все еще загружается, и затемняется / отключается с помощью модального диалога, показывающего ваше сообщение «загрузка страницы». Затем вы можете использовать функциональность $ document.ready () в jQuery, чтобы определить, когда страница будет загружена. На этом этапе вы можете удалить диалоговое окно и скрыть страницу.

1 голос
/ 16 июня 2009

Трудно сказать, что является лучшим решением без дополнительной информации, но один из возможных способов - заставить первую страницу действовать как «загрузчик», содержащий диалог и некоторый javascript, который будет загружать реальную страницу с помощью ajax.

Как я уже писал ранее, очень многое зависит от того, чего вы пытаетесь достичь :-)!

Но один из способов сделать это с помощью jQuery, если страница, которую вы пытаетесь загрузить, очень проста, как список без каких-либо элементов управления состоянием / обратной передачей, - создать страницу «Loader», такую ​​как код belov, и использовать UrlToLoad параметр запроса для динамически загружаемой страницы.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>

    <script src="jquery.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function()
        {
            $("form").load("<%= this.Request["UrlToLoad"] %> form");
        });
    </script>
</head>

<body>
    <form runat="server">           
        Loading...
    </form>
</body>

0 голосов
/ 22 июня 2009

Что я сделал, так это создал страницу PreLoader.aspx, которая будет «держать» до тех пор, пока не будет загружена нужная страница:

<script type="text/javascript" language="javascript">
window.onload=function()
{
    $get("ctl00_ContentPlaceHolder1_btnNav",document).click();
    setTimeout('document.images["Loader"].src="App_Themes/Main/img/loading.gif"', 200);         
}
</script>

кнопка на самом деле делает перевод

<asp:Label ID="lblLoading" runat="server" Text="Loading the requested page. Please wait ..." />
            <asp:Button ID="btnNav" Style="display: none;" runat="server" OnClick="NavTo" />

protected void NavTo(object sender, EventArgs e)
    {
        Response.Redirect(Request.QueryString["url"].ToString());
    }

Мне нравится это, так как его можно использовать для каждой страницы с тяжелыми данными ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...