Display popup dialog box when user clicks button using MVC3 C# asp.net

Question

Can somebody please explain how I can create a dialog box that will appear when the user clicks a button on a webpage. I am using the MVC3 framework coding in c# and asp.net.

Basically, when the user clicks 'Send' - the dialog box will display "message has been sent" and they can close it. In the instance that there were validation errors the dialog box should display it (e.g: "Please enter a valid email address and try again").

Kindly explain exactly what code needs to go in which files. i.e. controller, view, model, scripts, css, etc...

Thanks

pid · Accepted Answer · 2014-02-05 11:25:50Z

1

You have to use Javascript. From C# you should have an OnClientClick event. Put there you scriptlet like this:

OnClientClick="alert('Hello World!');"

Return true or false base on if you want the server-side click to happen or not:

OnClientClick="return confirm('Are you sure?');"

If this code is not exactly perfect it will still lead you to the correct solution, because basically there aren't any other options really.

answered Feb 5, 2014 at 11:25

pid

11.6k6 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gman16 Over a year ago

Thanks for the reply. Using the MVC framework how can this be applied?

Nicolai · Accepted Answer · 2014-02-05 15:00:10Z

1

you can use jQuery UI modal:

  <script>
  $(function() {
    $( "#dialog-message" ).dialog({
      modal: true,
      buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });
  </script>

<div id="dialog-message" title="Download complete">
  <p id="messageText">
  </p>
</div>

And after click on button you can send ajax request and on success set message in this dialog and show it.

EDIT:

<input type = "submit" id="doSomethingButton">

<script>
    $(function(){
        $('#doSomethingButton').click(function(){
            $.ajax({
                url:"url-to-send-data",
                data:"", // optional
                type:"http-method-type", //GET, POST, DELETE, PUT ....
                success:function(data){
                    $('#messageText').text(data);
                    $('#dialog-message').dialog('open');
                }
            });
        });
    });
</script>

edited Feb 5, 2014 at 15:00

answered Feb 5, 2014 at 11:30

Nicolai

1,9531 gold badge24 silver badges32 bronze badges

2 Comments

Gman16 Over a year ago

the button they click is an <input type = "submit"> tag so that it can return to the controller which will send an email. Then the dialog box needs to appear. so somehow need to integrate the <button onclick="blah"> together with it?¿

Gman16 Over a year ago

Thanks, but dont they need to be in <script> tags. Also its not working :/

Rajshekar Reddy · Accepted Answer · 2014-02-05 11:31:04Z

0

See these JQuery plugin's Here this is of sure help

answered Feb 5, 2014 at 11:31

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

Collectives™ on Stack Overflow

Display popup dialog box when user clicks button using MVC3 C# asp.net

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related