How to Use Modal Pop-Ups with ASP.Net MVC and AJAX?

Question

Can anyone point me in the direction of how to use jQuery modal popups with asp.net MVC and AJAX.

Has anyone managed to do this well?

I've tried JQModal and JQuery UI but haven't managed to find any good samples or tutorials yet.

Answer 1

Davy wrote, "It is possible then to click on a row, pop-up with filled editable controls, validate and save and then redirect back to the list page?

Hi Davy,

I also have implemented jQuery UI dialogs in my MVC forms. The hard part is not the dialog, but the ajax calls. Data-wise, a jQuery dialog (recommended) is nothing more than another DIV tag in your form.

When you declare the Dialog options, you can specify buttons, with names and a function they execute. In you modal dialog, add something like:

buttons: { "Add row": function() { yourAjaxFunction(); }

in the function yourAjaxFunction(), you can get your values with something like:

var myFields = $("#MyDialog").serialize();

or

var myFieldsArray = $("#MyDialog").serializeArray();

to get the names and values of your fields, then validate them, and then post "myFields" to your controller with a:

$.ajax(<your options here>);

or a :

$.post(<your options here>)

Your MVC controller will happily convert values specified in the querystring to matching named method parameters, save them, and then return a response (either a Partial View or JSON or text).

The Ajax reference in jQuery is very helpful for this.

Answer 2

I have used the jqueryui dialog modals with ASP.Net MVC and it works out very well. These modals are very easy to implement in my opinion. Take a look at these dialog modals here: jqueryui dialog