Как показать диалог лайтбокса из ответа ASP.NET AJAX - PullRequest
Новая
       18

Как показать диалог лайтбокса из ответа ASP.NET AJAX

2 голосов
/ 02 февраля 2009

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

Первым местом, где эта функциональность понадобится, будут кнопки навигации на элементе управления asp: wizard. Когда пользователь пытается двигаться вперед, мы проверяем его выбор продукта и можем получать сообщения, которые нам нужно отобразить.

Для тестирования, так как я новичок в JQuery и Thickbox, я создал тестовую страницу. Соответствующая часть ниже: 

<asp:Panel runat="server" ID="pnl" Visible="false" style="display:none;background-color:Black;">
<div style="background-color:Black; width=300; height=200; ">
    <asp:Label runat="server" ID="lblMessage" ForeColor="White" />

    <script language="javascript" type="text/javascript">

        function showMessage()
        {
            tb_show("Message", "#TB_inline?height=200&width=300&inlineId=<%# me.pnl.ClientID %>", null);
        }

        $(document).ready(function() { showMessage(); });

    </script>
</div>

В настоящее время я получаю Thickbox для отображения в IE7, но он удвоился. Я получаю две вертикальные ячейки толщиной, собранные вместе, с кнопками заголовка и закрытия, только у верхнего есть мой контент.

В Chrome, окно получает серый фон, но окно не отображается.

Когда я оборачиваю все это в AJAX UpdatePanel, я ничего не получаю.

Что я делаю не так?

ОК, так что больше информации. Я получил и Thickbox, и еще один, называемый LightView, для своего рода работы. Следующий блок скрипта является статическим на странице (версия Thickbox): 

<script type="text/javascript" language="javascript">
        function showMessage(sender, args)
        {
            tb_show("Message", "#TB_inline?height=200&width=300&inlineId=ctl00_ctl00_cph1_cphMain_pnl", null);

     }
     function StartWatch() {
         var prm = Sys.WebForms.PageRequestManager.getInstance();
         prm.add_endRequest(showMessage);
     }

Postback устанавливает текст метки, который находится внутри div, указанного в вызове tb_show. Я получаю, что вызов prm.add_endRequest должен быть вызван до обратной передачи.

Есть несколько проблем. Во-первых, все это слишком сильно зашито - панель asp: и ярлык на странице, прописанный идентификатор div и т. Д.

То, что мы действительно хотим, это иметь возможность вызывать это из любого кода позади, например: 

Page.ShowMessage("Hello lightbox!")

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

Однако мне нужно уметь:

а) контроль, когда это произойдет. Не каждый AJAX-запрос (на самом деле, большинство не будет) должен иметь сообщение, отображаемое при его возврате. Поэтому мне не нужно было бы вызывать метод endRequest или иметь метод endRequest, проверяющий что-то, что возвращается из вызова AJAX, чтобы определить, действительно ли ему нужно вызывать showMessage ().

б) Мне нужно найти способ, чтобы UpdatePanel содержала что-то вместе с сообщением. Если бы я мог выполнить строку JavaScript, которая бы обновляла скрытое или устанавливало содержимое скрытого сообщения DIV ДО вызова метода showMessage (), я думаю, что было бы хорошо пойти.

Надстройка Thickbox использует JQuery, Lightview использует прототип и скрипт. Lightview гораздо интереснее - лучшие изображения, анимация и т. Д. Мне все равно, какие.

Я использую инфраструктуру AJAX (Atlas), встроенную в .NET.

Ответы [ 5 ]

1 голос
/ 24 марта 2009

Поздний ответ, но, возможно, не слишком поздно. Я немного смущен вашим вопросом, я просто отвечу на эту часть:

Что мы действительно хотим, так это уметь вызвать это из любого кода в некоторые моды, такие как:

Page.ShowMessage («Привет лайтбокс!»)

Давайте сделаем это с Thickbox и jQuery, это то, с чем я знаком, но это даст вам общую идею воспроизвести это с Lightview. Во-первых, вам понадобится клиентский скрипт для преобразования «Hello lightbox!» сообщение в элемент HTML, а затем использовать его в качестве встроенного содержимого с ТБ. Для этого мы создадим div с идентификатором myTBInline: 

function showMessage(message)
{
    var divId = "myTBInline"; // You can change this id...

    var div = $("#" + divId); // try to retrieve the div if it exists

    if (div.length > 0) // if div already exists (previous call)
        div.empty();    // then remove its content
    else
        div = $('<div id="' + divId + '"/>'); // else create it

    // add the message to the div
    div.append(message);

    // display Thickbox using the div as inline element
    tb_show("Message", "#TB_inline?height=200&width=300&inlineId=" + divId, null);
}

Это была сложная часть. Теперь самое простое - возможность вызвать это из кода. Вам нужно добавить метод, где вы хотите, так как он может быть статическим / общим. Обычно я использую C #, но я постараюсь написать его с синтаксисом VB для вас (последний раз, когда я использовал VB.Net в 2005 году;) 

Public Shared Class Thickbox
    Public Shared Sub ShowMessage(Type type, string message)
        Dim script as String = "showMessage('" + message.Replace("'", "\'") + "');";
        ClientScriptManager.RegisterStartupScript(type, "Thickbox", script, true);
    End Sub
End Class

Вот, пожалуйста. На своей странице вы можете использовать метод следующим образом: 

Thickbox.ShowMessage(GetType(), "Hello Thickbox!");

Проверьте другой вопрос на SO. Реализация использует jqModal и очень мала (нет необходимости в клиентском скрипте).

0 голосов
/ 24 мая 2009

Другой метод - переписать встроенные в JS функции alert() и confirm() с выбранным вами модом (вместо отображения того, что вы можете считать модальным браузера по умолчанию).

http://dev.iceburg.net/jquery/jqModal/#examples и прокрутите вниз до «переопределения» для примера. Вы можете попробовать это в консоли Firebug на этой странице. запустить: alert('zomg!'); там. 

function alert(msg) {
  //your modal js here.
}

Не знаю много о ASP.NET, но я полагаю, что отправка оповещений поможет вам по умолчанию. Это просто переопределит действие по умолчанию.

0 голосов
/ 25 марта 2009

У меня есть проблема в том, что использование лайтбокса в согласовании с библиотекой jQuery может вызвать некоторые проблемы, когда лайтбокс просто не загружается должным образом из-за конфликта где-то.

Обход, который я нашел, заключается в использовании jQuery-версии лайтбокса. http://plugins.jquery.com/project/jquerylightbox_bal.

0 голосов
/ 24 марта 2009

Если вы хотите контролировать, когда сообщение отображается с помощью endRequest, один действительно простой способ - это использовать переменную. Установите скрытое поле ввода в качестве флага (должно быть на панели обновления, иначе оно не будет обновляться). Затем в вашей функции ShowMessage всегда читайте значение скрытого ввода. Если установлено, всплывающее окно «Толстый ящик». Иначе ничего не делать.

Что касается пункта b, вы можете пойти по тому же маршруту (но это может привести к появлению множества ненужных скрытых полей). Есть мысли об использовании методов страницы или веб-сервисов? Это намного более гибко для взаимодействия.

0 голосов
/ 10 марта 2009

Одна вещь, с которой я часто сталкиваюсь, это то, что когда вы возвращаете javascript из AJAX-запроса, он не будет выполняться по умолчанию из соображений безопасности, и вы должны включить его в своем ajax-запросе. Извините за боль, но я знаю только настройку в Prototype, а не в Asp.Net AJAX - хотя бы что-то проверить?

...