In one of my recent projects I needed to display some information, allow the user to edit it utilizing a dialog window, post the updated information and reload it for the user using Ajax. I needed to perform the named operations for multiple models so I set out to create some generic code that could be reused over and over. Below is a picture of what I am trying to accomplish.

The project used for the post below can be downloaded here .

First, the model. For this example, we will use a simple model that contains some profile information for a user.

Second, we need to create three action methods. One will be used to display the profile information, another to display the form for editing the profile, and lastly another that will be used to save the edited profile object. The first two should always return a PartialView as each of these action methods will be called using Ajax and their result will be loaded into div elements; the first into a div used to display the saved profile and the second into the edit dialog. The third action method will return a PartialView if the ModelState is invalid so that the errors can be displayed to the user and a Json result indicating the save was successful if all went well. (Note that in this example I am just storing the profile information in Session but obviously this would be stored in a database or some other data store.)

Next we need to create the two partial views that correspond to the first two action methods we created above. In this example, the partial view for the EditProfile action is pretty much just the stock view created by the MVC frameowork except I have removed the input element to submit the form as we will use the buttons on the jQuery UI dialog to submit it.

The second partial view, the one that displays the saved Profile object again in this example is the stock view with a few added elements.

The first portion of the partial view just displays the form elements required for editing the model. This is just the stock Edit view modified only slightly. The new code starts at line 25. Here I created an extension method for HtmlHelper named DialogFormLink that will create an anchor tag loaded with all the needed information to make the dialog form work. Here is the code for the extension method. You can read the comments to get an understanding of the parameters it requires.

The above extension method that builds our anchor tag utilizes the HTML5 data attributes to store information such as the title of the dialog window, the url that will return the content of the dialog window, the id of the div to update after the form is submitted, and the url that will update the target div.

Now we need to add the container div to hold the Profile information in the Index view.

Lastly, I have listed the scripts and css files that need to be linked below in the _Layout page for everything to work correctly.

The last script reference above is to a script I wrote called DialogForm.js. This script (shown below) will make everything work.

Conclusion

I know that was a lot to take in but after you do the setup once, all you need to do is make one call to Html.DialogFormLink and everything will be taken care of for you. Hope this helps!

[…] Client Side Validation with an Ajax Loaded Form August 13, 2011 — Nick Olsen In my last post I discussed how to perform some CRUD operations using Ajax and the jQuery UI dialog window. In that […]

[…] will be building off of the example from my last post that showed how to use jQuery UI to build Ajax […]

[…] done previously I will be using the same example project from this post where we created a dialog form which was submitted via […]

Very useful article, and thanks for posting the code download link too. Have one question. I want to generalize the DialogForm.js for all the dialog box based forms in my application. And all of my forms are going to have jquery based validations over and above server side validations. I see that you are manually submitting the form by saying $(form).submit();. I am going to have Validate jquery method on all my partials renderend in dialog boxes. Is there any way i can generalize these Validate() jquery methods to be called before the form is submitted?

I don’t know if I understand exactly what you are saying but from what I understand you want to make sure the jQuery validation rules are run before the form is submitted to the server correct? This is already being done. In line 46 of DialogForm.js we are checking $(this).valid() which runs all jQuery validation and returns false if anything isn’t valid. In this case we cancel the form submit.

Is that what you meant?

Hi, great post!

I was just wondering, how do you change the width of the dialog?
I’ve tried to set the width of ui-dialogue in my theme css, but it seems to be written as an inline stle at some point

Thanks!

You have to set the width in the jquery ui dialog method like so:

$( “.selector” ).dialog({
width: 460

By default I believe the width gets set to 300px if you don’t specify a width.

Excellent post, It’s helped me loads already.
Have you any tips on how to make the behavior of a successful submit dynamic?
So instead off just….

// Reload the updated data in the target div
$(updateTargetId).load(updateUrl);

…it could somehow be…..

$(updateTargetId).load(updateUrl, function(){
SomePageSpecificAction();

Reason I ask is that I am trying to integrate this with a page that is using a tablesorter ( http://tablesorter.com/docs/ ), which requires a call to (“#table”).trigger(“update”); it would be a beautiful thing if it was possible to make this function call!!!!

Any ideas appreciated, and again, many thanks for the post.

You should be able to do just that! Take a look at the documentation: http://api.jquery.com/load/ One of the parameters to the load method is a function that will be called after the load. Let me know if it isn’t working.

Hi Nick, thanks for the reply.

I’ve had a go at converting your code to a jquery widget. Let me know what you think….

/* SomePage.js */
$(‘.dialogForm’).dialogForm({ postSuccesCallBack: function () { alert(“Hello”); } });

/* DialogForm.js */
var dialogForm = {

_init: function () {

var $this = this;

$this.element.click(function (e) {

e.preventDefault();

// Retrieve values from the HTML5 data attributes of the link
var dialogTitle = $this.element.text(); //element.attr(‘data-dialog-title’);
var updateTargetId = ‘#’ + $this.element.attr(‘data-update-target-id’);
var updateUrl = $this.element.attr(‘data-update-url’);

// Generate a unique id for the dialog div
var dialogId = ‘uniqueName-‘ + Math.floor(Math.random() * 1000)
var dialogDiv = “”;

// Load the form into the dialog div
$(dialogDiv).load(this.href, function () {
$(this).dialog({
modal: true,
show: ‘blind’,
position: ‘top’,
width: 680,
resizable: false,
title: dialogTitle,
buttons: {
“Save”: function () {
// Manually submit the form
var form = $(‘form’, this);
$(form).submit();
“Cancel”: function () { $(this).dialog(‘close’).dialog(“distroy”).remove(); }

// Enable client side validation
$.validator.unobtrusive.parse(this);

// Setup the ajax submit logic
$this._wireUpForm(this, updateTargetId, updateUrl, $this.options.postSuccesCallBack);
return false;

options: {
postSuccesCallBack: null

/* private */
_currentSortDirection: true, // true = ascending, false descending

_debug: function (message) {
if (window.console && window.console.log)
window.console.log(message);

_wireUpForm: function (dialog, updateTargetId, updateUrl, succesCallBack) {
$(‘form’, dialog).submit(function () {

// Do not submit if the form
// does not pass client side validation
if (!$(this).valid())
return false;

// Client side validation passed, submit the form
// using the jQuery.ajax form
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
// Check whether the post was successful
if (result.success) {
// Close the dialog
$(dialog).dialog(‘close’).dialog(“distroy”).remove();

// Reload the updated data in the target div
$(updateTargetId).load(updateUrl, function () {
succesCallBack();
} else {
// Reload the dialog to show model errors
$(dialog).html(result);

// Enable client side validation
$.validator.unobtrusive.parse(dialog);

// Setup the ajax submit logic
wireUpForm(dialog, updateTargetId, updateUrl);
return false;
$.widget(“ui.dialogForm”, dialogForm);

Great post!

I’ve implemented a customized version of your code.
Since our site currently is not using unobtrusive validation I replaced the line $.validator.unobtrusive.parse(dialog); with Sys.Mvc.FormContext._Application_Load();
However, the client validation did not fire if the user opened the dialog, pressed cancel, then opened it again. The solution to this problem was to add .dialog(‘destroy’).remove(); on line 31 and 63. (I guess just remove() would work.)

Thought I should share this, if anyone faces the same problem.

You may want to include a filter for .filter(‘div) to avoid reloading scripts plus I _think_ (it may be fixed) jquery creates a dialog for scripts and for the content if both are returned. Note the bug here: http://forum.jquery.com/topic/problem-with-ui-dialog-component-and-jquery-1-4-1

also note the spelling error above for $(dialog).dialog(‘close’).dialog(“distroy”).remove(); (should be ‘destroy’)

I’m currently working on a project that requires multiple locale settings, so is it possible to change the button labels at runtime?

This is an example of one way to set the button text based on the current locale setting. You would have to store your button text in a global strings object or array.

var buttons = {};
buttons[strings.ok] = function () {
// Do something here
$(this).dialog(‘close’);
buttons[strings.cancel] = function () {
$(this).dialog(‘close’);

div.dialog({
modal: true,
width: 400,
height: 450,
resizable: false,
title: strings.title,
buttons: buttons,
close: function () {
$(this).remove();
Reply January 3, 2012 at 11:00 pm

Hi, sorry for the 2 successive questions but I just want to know why the dialog fail when seting the properties autoOpen: false and show: “blind”.

Thanks,
czetsuya

Nick, great solution. I’m using it in my own little web app. But I’ve noticed that within one of my dialogs opened for editing some data any of my jquery calls are not being executed. For example: I open a dialogbox which has two checkboxes. I have some jquery code that forces only one of the checkboxes to be selected similar to the radio button logic. the code executes nicely in a regular page but not at all from within the dialog. Any ideas?

Is the script included on the page that is loaded into the dialog? If so, this is a jQuery issue. For security reasons jQuery will strip out any scripts that are included on a page that are loaded via ajax. Somewhat obnoxious but not the end of the world. I have found two solutions to this. After the page is loaded into the dialog, use the jQuery $.getScript() method to remotely retrieve the script or have a function defined on the parent page of the dialog form and after the load of the dialog form, call that function which runs your script on the dialog content.

Hope that helps.

I would like to ask if you’ve encountered this issue:

I am required to do some business server side validations and when it failed I return the view. When I click the save/submit button again it doesn’t work.

For example I have 2 date fields: date1 and date2 and date1 should be greater than date2, When that rule is satisfied it successfully post to the server. But when not it shows an error in the page (correct), then when the error is corrected and the submit button is pressed again, it won’t submit. Any idea or possible solution to this?

Really appreciate this plugin,
czetsuya

I’m not sure if this is already covered in the comments above, however in the hope that it might save someone else a few hours of debugging heartache…. note that in order to allow the dialog to work when called multiple times, in DialogForm.js I had to add in a call to $this).empty() after the call to $(this).Dialog(‘Close’) – and a call to $(dialog).empty() after the call to $(dialog).dialog(‘close’). Without this I had major problems if the dialog was called twice without the calling page being refreshed.

I had the same problem but wasnt working while closing dialog by ESC.
You could add it to your dialog attributes, so it will work when you closed by ESC or clicking on the X:

$(this).dialog({
modal: true,
resizable: false,
title: dialogTitle,
close: function() { $(this).empty(); } ,
buttons: { …….

Thanks for the post, David. You did save me hours of debugging. Plus-1 for you.

I’m wondering why an input of type file doesn’t work using this popup? The same form works properly if not loaded to the popup, I can successfully upload the file and get it to the post action. But it’s always null when I put the form inside the popup.

Any guess why?

Thanks,
czetsuya

Fantastic post.

However I cant get a datepicker to work inside your dialog.
Its fine inside a normal JQueryUI Dialog – Just not after using the exampe above?
.e. If I add to editprofile.cshtml

$(function () {
$(“#datepicker”).datepicker();

Outside of one of your dialogs the datepicker works fine. Inside and it doesnt. Any idea why? Any suggestions would be appreciated.

Thanks though.. excellent example.

The problem is that any JavaScript you put on the edit view will be stripped out by the Ajax call. It is a security issue to try and prevent malicious acts. So what you need to do is place a function named something like styleElements(context) on the Home/Index page that
takes care of all your styling needs for a given div or element on the page. Then after the dialog is loaded via Ajax, call that method passing in the dialog div as the context.

The other option is to load a separate Edit.js file via Ajax as well after you load the HTML.

Hope that helps!

Hi Nick,
I’m trying your code in an app I am working on. What happens when I hit “Save” on the dialog, is that I see the URL posting to in the browser address bar and json response is displayed on page, instead of being placed inside the dialog as the code instructs.

Have you faced such an issue before?
Thanks

Definitely. Make sure you have included the jquery Ajax references on your layout or master page. That kind of result means Ajax isn’t wired up.

My way of doing this is pretty close to yours, however I was wondering how to call multiple actions inside a the jquery dialog without using an Iframe as I need to retrieve values from the popup. Have you ran into this?

[…] https://nickstips.wordpress.com/2011/08/11/asp-net-mvc-ajax-dialog-form-using-jquery-ui/ […]

Hi! I’m using this dialog to create a subscribe page, and it works, but for something in the development i found and error when i was trying to create a new data, so, i need to show the error to the user (the error is controlled by a try-catch in the server) but in the part when the ajax try to show the result, it doesn’t not refresh the data in this part:
// Reload the dialog to show model errors
$(dialog).html(result);
$.validator.unobtrusive.parse(dialog);
wireUpForm(dialog, updateTargetId, updateUrl);

in the controller I has:

if (ModelState.IsValid)
repository.save(subscriber);
catch(Exception ex)
subscriber.name = subscriber.name.ToUpper(); //this is to view change in the data
subscriber.error = ex.Message;
return PartialView(“SubscribePartial”, subscriber);

How can I refresh the dialog form with this response? and in case that everything was done, how can I show a confirmation message with a ok button?

Thanks

I believe your problem is occurring due to the fact that the view is grabbing data from the ModelState rather than the actual model that is passed to the view. That is just the way MVC works. Take a look at this post for a few solutions: http://stackoverflow.com/questions/9645479/mvc3-view-not-updating-after-post

Is it possible to pop up the modal from within a modal? I tried this and the popup happens, but the second modal does not have any of its css, jquery and does not post although I see the FORM within firebug that has the right action to POST to. What am I missing to make the modal within a modal work? Thanks

Hello Nick,

after I have submitted data and I return Json(new { success = true }); in my Action how can retrieve in javascript wether the action was successful or failed to execute a javascript function where I have to do manually a delete on cascade…

Take a look at line 59 of the last script. It checks the result object for the value of the success property. If you need to see if an exception was thrown and you aren’t handling it on your own you can handle the error event of the ajax call.

Hi Nick, please help me this one: http://stackoverflow.com/questions/10649076/how-to-create-a-pop-up-that-displays-a-generic-information

Your dialog forces me to use it in a general way / update data in a general way: $(updateTargetId).load(updateUrl);
my updateTargetId is e.g. #TreeViewDiv when I load a url into it nothing happens ?

In order to figure out the problem I would need to see your code. Would you mind posting it?

Hello Nick, sorry for my rush statement which was non-explaining I realized after I had to leave my computer… I guess I tried now 5 or more ajax form asp.net mvc samples and all are not working or are limited. Maybe there is also a lack of knowledge on my side, but I try to learn. Jquery UI is really bad to learn. Everyone is doing it differently…
OK come to the point …I asked on SO: http://stackoverflow.com/questions/10677801/validation-errors-are-not-shown-with-ajax-form-in-asp-net-mvc This has nothing to do with your dialog which I left because I did not know/understand HOW I can update a DataRecordListDiv with a new submitted data record by the dialog. You offer a updateTargetId in your DialogForm but well my Form could be a delete list-form, a update/create item form etc… Thus I need to define always a different “callback” to update my datagrid/treeview/etc… I see there no possibility with your DialogForm . Has this a reason that your DialogForm does not define a dataType like Json/Html ? Is this because you return in one Action a JsonResult(valid data) or a PartialView(invalid data) ? Well I just saw you are on SO too, maybe you want answer? 🙂

Hi Nick,

Wrapping the JQuery UI dialog is an excellent idea, thanks!

I just tried incorporating this into my ASP.NET MVC web site and I see the popup show up (with title, close, save and cancel), but no body (no fields in the dialog). The partial view does have a bunch of divs with class =”editor-field”. I am not sure what I’m doing wrong, the only difference I can think of is that I am not using Razor syntax in my website, I am using the classic syntax instead.

Secondly, cancel closes the dialog, but Save does not call the controller action so something is not right in the wiring (I have checked the name of the action and name of the controller in the Url.Action are correct).

Any idea on how I should go about debugging this?

Thanks,
Reply June 12, 2012 at 10:17 pm

A second question – what do I need to do so that the 2 EditProfile controller methods in your example above can have 2 different signatures (need to take a different set of parameters). Since the Helper only takes a single parameter for the controller action I am unable to provide independent parameters on the 2 calls to EditProfile.

Thanks,
Reply November 19, 2012 at 11:32 am

Nick, I think your example here is great! I have everything working except the submit. For whatever reason the event tied to the form fires so I get no validation or return trip to the server. Do you have any ideas?

I meant to say the submit event tied to the form never fires,

All the helper does is generate the HTML for you so if you look at the HTML that is generated by the helper you will see the classes and data attributes that are needed for the link to work. Just copy that.

Thanks for your help

You would simply need to create a new DialogFormLink extension method that generated a button tag with an embedded image, a link with a background image set via css, or something like that. Then instead of passing in the string “Edit”, you can pass in an image file name or file path.

Hi Nick,

Excellent article!
I made simple modifications so that I can set the dimensions of the dialog. I thought it might help someone, or if you could suggest improvement.

In the helper extension:
public static MvcHtmlString DialogFormLink(this HtmlHelper htmlHelper, string linkText, string dialogContentUrl,
string dialogTitle, string updateTargetId, string updateUrl, int? dialogWidth = 0, int? dialogHeight = 0)
builder.Attributes.Add(“data-dialog-width”, dialogWidth.ToString());
builder.Attributes.Add(“data-dialog-height”, dialogHeight.ToString());

In the js file:
var width = parseInt(element.attr(‘data-dialog-width’));
if (width == 0)
width = ‘auto’;

var height = parseInt(element.attr(‘data-dialog-height’));
if (height == 0)
height = ‘auto’;

$(dialogDiv).load(this.href, function () {
$(this).dialog({
modal: true,
resizable: true,
title: dialogTitle,
width: width,
height: height,

Thanks,
Rodel

Great Article!
I need to use this to Add or Edit with a key field for the edit. How would I add route values to the htmlhelper?

Thanks!

This is a very nice article on “CRUD Operations Using Entity Framework in ASP.NET MVC”. I have find out some other articles link from which I have learnt “CURD operations using Ajax Model Dialog in ASP.NET MVC!”. I think this is very helpful for developers like me.

http://www.mindstick.com/Articles/279bc324-5be3-4156-a9e9-dd91c971d462/?CRUD%20operation%20using%20Modal%20d

http://www.dotnet-tricks.com/Tutorial/mvc/42R0171112-CRUD-Operations-using-jQuery-dialog-and-Entity-Framework—MVC-Razor.html

Thank you for the article helped me a lot by working on and using your scripts, css and overall idea of how to do a validation, a really elegant way of making it!

Thank you for such a brilliant article. But I have one problem. When I click on the link no dialog appears, it just redirects me to the action page. Could you help me?

Do you have all the correct ajax javascript libraries included on the page?

Great post! Especially the helper method and the unobtrusive syntax.

One thing I haven’t been able to solve is that the user has to press the Save button with the mouse. I’d like pressing Enter have the same effect as clicking Save. So it should still perform the validation of the form and only close it if the controller action returns true.

The only way I have see this work is to handle the key down event on all inputs in the form and validate and submit the form manually. Something like this:

$('form').on('keydown', function(e) {
// check for enter key using e.which and then call $(this).valid() and submit.
Reply June 6, 2013 at 4:44 am

Hi, there…how do i pass routeValues and htmlAttributes to the custom HtmlHelper (DialogFormLink)?