Frage

I'm looking for a custom user control similar to http://www.how-to-asp.net/messagebox-control-aspnet/ but having the ability to be displayed as a popup. The message box should have the capability of being invoked from code behind in asp.net 4 with event hooks to bind the "ok" and "cancel" button.

I'm familiar with Ajax Toolkit and JQuery.

A reference and or sample in a similar direction would be very helpful.

Thanks!

War es hilfreich?

Lösung 2

In my experience, it's usually a sign of a bad design if you want to open something on the client side from the server side code behind. Are you sure that's what you need?

But assuming you do, you can use the ModalPopupExtender from the Ajax Control Tookit. It can be opened from client or server side. Here's a sample:

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

The PopupControlID should be the ID of a panel that you want to appear as a popup. You can put buttons on that panel if you need to. From the code behind, it's as simple as this...

MPE.Show();

To show it from JavaScript (assuming jQuery), make sure you set the ClientIdMode to Static, then call it...

$('#MPE').show();

Andere Tipps

Use jQuery UI. They have great examples. I use the dialog all the time.

You can view their source and here is an example of one.

<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>

You are able to customize this anyway you want. The link will show you how to do this.

EDIT: Since you want to open it in the behind code, I'll show you my jQuery and how I call it in the behind code. I use this to send emails.

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"));
    };

Then in the behind code.

 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);
    }
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top