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

Question

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

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

Первым местом, где эта функциональность понадобится, будут кнопки навигации на элементе управления 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, я ничего не получаю.

Что я делаю неправильно?

ОК, так что больше информации. Я получил как 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);
     }

Обратная передача устанавливает текст метки, который находится внутри 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.

2

jquery ajax asp.net-ajax thickbox

Источник

user61640 02 фев '09 в 19:07

5 ответов

Другие вопросы по тегам jquery ajax asp.net-ajax thickbox

user60556 24 мар '09 в 18:52 2009-03-24 18:52 · Answer 1 · 2009-03-24 18:52

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

То, что мы действительно хотим, это иметь возможность вызывать это из любого кода позади, например:
Page.ShowMessage ("Привет лайтбокс!")

Давайте сделаем это с Thickbox и jQuery, это то, с чем я знаком, но это даст вам общую идею воспроизвести это с Lightview. Во-первых, вам понадобится клиентский скрипт для преобразования "Привет лайтбокс!" сообщение в элемент 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 и очень мала (нет необходимости в клиентском скрипте).

user27922 25 мар '09 в 11:15 2009-03-25 11:15 · Answer 2 · 2009-03-25 11:15

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

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

user59198 10 мар '09 в 05:16 2009-03-10 05:16 · Answer 3 · 2009-03-10 05:16

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

user81711 24 мар '09 в 02:56 2009-03-24 02:56 · Answer 4 · 2009-03-24 02:56

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

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

user110996 24 май '09 в 06:36 2009-05-24 06:36 · Answer 5 · 2009-05-24 06:36

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

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

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

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