Всплывающее окно сообщения в C#

Я ищу пользовательский элемент управления, похожий на http://www.how-to-asp.net/messagebox-control-aspnet/ но имеющий возможность отображаться в виде всплывающего окна. Окно сообщения должно иметь возможность вызываться из кода в asp.net 4 с перехватчиками событий для привязки кнопок "ОК" и "Отмена".

Я знаком с Ajax Toolkit и JQuery.

Ссылка и / или образец в аналогичном направлении были бы очень полезны.

Спасибо!

Источник

3 ответа

Решение

По моему опыту, обычно это признак плохого дизайна, если вы хотите открыть что-то на стороне клиента из кода серверной части. Вы уверены, что это то, что вам нужно?

Но, если вы это сделаете, вы можете использовать ModalPopupExtender из Ajax Control Tookit. Его можно открыть со стороны клиента или сервера. Вот пример:

<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
    TargetControlID="LinkButton1" ClientIdMode="Static"
    PopupControlID="Panel1" />

PopupControlID должен быть идентификатором панели, которую вы хотите отобразить в виде всплывающего окна. Вы можете разместить кнопки на этой панели, если вам нужно. Из кода, это так просто, как это...

MPE.Show();

Чтобы показать его из JavaScript (при условии jQuery), убедитесь, что для ClientIdMode установлено значение Static, а затем вызовите его...

$('#MPE').show();
Источник

Используйте jQuery UI. У них есть отличные примеры. Я использую диалог все время.

Вы можете просмотреть их источник, и вот пример одного.

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


</body>

Вы можете настроить это так, как хотите. Ссылка покажет вам, как это сделать.

РЕДАКТИРОВАТЬ: так как вы хотите открыть его в коде позади, я покажу вам мой JQuery и как я называю его в коде позади. Я использую это для отправки писем.

function sendEmail() {
    $("#email").dialog({
       modal: true,
       width: 700,
       buttons: {
          "Send": function () {
             var btn = document.getElementById("<%=lbSend.ClientID %>");
             if (btn) btn.click();
             $(this).dialog("close");
           },
           Cancel: function () {
              $(this).dialog("close");
            }
        }
      );
      jQuery("#email").parent().appendTo(jQuery("form:first"));
    };

Тогда в коде позади.

 protected void btnEmail_Click(object sender, EventArgs e)
 {
      //this calls the jQuery function.
      Page.ClientScript.RegisterStartupScript(this.GetType(), "Call my function", "sendEmail();", true);
 }
Источник 
 public void Message(String msg)
    {
        string script = "window.onload = function(){ alert('";
        script += msg;
        script += "');";
        script += "window.location = '";
        script += "'; }";
        ClientScript.RegisterStartupScript(this.GetType(), "Redirect", script, true);
    }
Источник
Другие вопросы по тегам