In this screen cast I will show you a demo of how to use jQueryUI dialogs and MVC AjaxForms to create a rich and simple experience for users when editing records.
The technique is simple; you dynamically load a partial view into the DIV dialog . There are a few tricks to wire up the validation, and to identify success over failure. .
Get the source code by clicking here, take a look and let me know what you think.
Update:
After many requests, I’ve created a Razor version, all interested can read the post here.
Ricardo Covo 
Hey Ricardo,
This is great. I hope to walk through your code to learn more.
Ken
great post..it is working when i implemented your instructions step by step..
but i dont do it for create operations..i guess there some missing jquery libraries for create.
How can I achieve create operations like edit?
Appreciate..
Hi Alex,
The jquery libs for create/update would be the same. Basically, the concept would be the same: you create the partial views for your create action, make sure you use an ajax form and that all the wiring is done (OnSuccess function exist, UpdateTargetId points to the appropriate Div).
Are you having any particular problem?
Hi Ricordo,
The link to ASPX version download is not working.Could you give me the demo in MVC 4 ,or anything that is available.
Nishanth,
I have corrected the link. Sorry about that.
-Ricardo
I missed some points..thank you for your help ricardo..
best wishes..
Hi Ricardo, great post, the links to the code and the demo aren’t working for this or the razor aren’t working anymore. any chance of you fixing this?
thanks in advance, Steve
Steve, the code has been reposted. Please try the link again.
Thanks for letting me know about the issue.
Hi Ricardo,
First of all, your post is so nice and useful. I dunno all the steps of your work to my project and I have done create,edit and delete operations now.
I am using MVC 2 in my project and mvc client-side validations doesn’t work in my project after adding the libraries below :
“~/Scripts/jquery-ui.min.js”
“~/Scripts/jquery.unobtrusive-ajax.js”
“~/Scripts/jquery.validate.min.js”
“~/Scripts/jquery.validate.unobtrusive.min.js”
Before adding these libraries, my MVC client-side validations works with these libraries :
“/Scripts/Using/jquery-1.4.4.js”
“/Scripts/Using/jquery.validate.js”
“/Scripts/Using/MicrosoftMvcJQueryValidation.js”
and by adding the line EnableClientSideValidation() function.
What is the missing point here?
How can I achieve mvc 2 client-side validations?
Thanks for your help..
Hello, thanks for the feedback.
Unobstrusive validation is a feature of MVC3. I imagine your issue is re-binding the client-side events after you load the partial view into the div. There must be a way with regular validation, but I do no have the info on-hand. I’m a bit busy but if I get some time I’ll investigate on it.
Thanks for your help Ricardo..
Thanks in advance..
Ricardo,
Thanks for the great video. However after you make updates to anyone of your items (either Name or Description) and want to make another update immidiately after the first one, you will get the very first text. It seems like your GET method does not trigger each time, it triggers only once. But POST works fine. What do you have to do to get new data each time you click on Edit button?
Look forward to your answer.
Thanks,
Tony
Tony,
I was not able to reproduce the behaviour you are describing. I can edit all the items on the list one after the other, or in any order and I will always get the right edit dialog.
The GET should trigger every single time. If you check the
$(".editLink").click...function, you will notice I am getting the partial view that is actually on the HREF of the link. So it will always load the right information.If you send me steps to reproduce I could see try to reproduce it again.
Thanks for the nice comments,
Once you edit and update a record, try to edit the same record again you will get the original data in the dialog fields not the recently updated data.
Tony, I tried it again and I cannot reproduce it this issue.
However, please be note that this sample does not persist data, as that was not the intent of the exercise. The car list is in memory and will be reloaded every time the application is re-started.
Tony,
Just so you know, I’m getting the same issue. That said, I also agree with Ricardo that it (should) get the data every time… I’m trying to figure this out and see what is going on – it must be something to do with caching
Allan
[HttpGet]
[OutputCache(Duration = 0)]
This should get the new data every time you click on edit.
Thanks for that, Naresh! Been trying to figure that one out for a bit now!
Hi Ricardo,
Is there a way for this mini-project working in MVC2 with its all functionalities?
Semir,
Unobstrusive validation is a feature of MVC3, so the problem would be to re-bind the validations, if you can figure out that part, the rest should work.
Hey! Excellent walk through! I would like to know how would you handle dialog concurrency in a scenario like this. I mean, what if I open two dialogs? I was thinking in implementing some kind of form namespace, which seems very complex. Any thoughts on such approach?
Thanks!
THe dialogs are opened on a modal form, so I don’t think you can open twice.
If you decide not to go modal to allow multiple dialogs, you would probably have to create on the fly the dialog div and the update div. Then, the dialogs will not conflict with each other because each one will have their own form.
Hope this helps,
I followed your example and modified my existing code to match. The dialogs display and go away just fine, and everything posts — *except* that none of my javascript enabled functionality works on the dialogs now (validation, calendar popup, etc).
Also I noticed something strange — I can create a situation where I post form values to an action, and when I check ModelState it claims it is valid, but then if I do a ModelUpdate, it indicates that the modelstate is in fact NOT valid. Any thoughts?
Hi Stacy, what version of MVC are you using? Please notice that uses unobstrusive validation which is available on MVC3. Make sure the parent page is including all the required javascript libraries, including these 3: jquery.unobtrusive-ajax.js, jquery.validate.min.js & jquery.validate.unobtrusive.min.js.
Also, make sure unobstrusive validation is enabled, it is usually on your web.config like this:
But you can also do it at the page level, like this:
I hope this helps,
-Ricardo
Excellent work, I’m trying to handle these scenario in razor view, but I’m bit confused. Anyone have done this in razor view ? Is there anything here that cannot be used in razor ? Renamed all view files and layout to .cshtml and ofcourse and updated all syntax to match razor view but without luck.
Regards,
I don’t see why it wouldn’t work with Razor. Where is it failing? What are you experiencing?
thank you for quick answer.
link is open on classic way, it sends me to another page, no popup.
Checked path to scripts, layout, can’t figure.
sorry for distraction. My bad. Works perfectly, can belive what I’m missing 🙂 Big shame to share. Once again great work.
Glad to hear you figure it out… Thanks for the feedback!
hey paja i have the same issue as you did. can you please tell me what was the problem that you fixed,so I may have the same.
thank you at advance
I appreciate it
Wow, thanks for posting this. This is exactly what I needed. However…
Anyone have any issues when you have a DropDownList on the modal dialog?
When I submit the update I get an error about the field being an int but it needs to be a SelectListItem. Something like that.
Any help appreciated.
Thanks!
Since you are mentioning DropDownList and SelectListItem, I am assuming you are using this with Web Forms, correct?
I am not sure this method will work with web forms straight away. Some testing/modifications will be required. Can you give more details on what you are trying to do?
Actually I am using the Html.DropDownListFor, but it seems to be working now. It must have been one issue causing another. I really appreciate the reply anyway.
When I click the update button on the edit partialview, the information is updating with success and returning True, but the Index form is showing the update-message label instead of updating the information. I’m using MVC2. Is this where it would fail because this is for MVC3?
The fact that you are getting the message on the “update-message” div implies that everything has worked (I assume it contains ‘True’). Maybe there is something within the ‘if’ statement that is breaking? Have you debugged the Javascript?
why do my cancel button doesn’t work?
and when i click it i can’t update my item from the database anymore.
I’m not sure what you mean… The cancel button should hide the dialog… Is that not what is happening?
Clicking edit brings up the edit form and I am able to make the changes and save successfully. The issue is that when I click update, though it does successfully do this, it redirects me to the action URL ‘/Testimonial/Edit/5/’ and the only content on that page is ‘True’.
To ensure that the link doesn’t preform the correct action I have put in there ‘e.preventDefault()’ and ‘return false’ both of which should stop it from doing the normal action of a link.
Any ideas why I would still be redirected to the Edit page containing the text ‘True’ opposed to it updating the update-message content et cetera?
I have found the solution is anyone else is having this issue…
http://weblogs.asp.net/owscott/archive/2010/11/17/mvc-3-ajax-redirecting-instead-of-updating-div.aspx
thanks!
Its work fine on FF,Chrome,Safari. but it raise problem in IE. it can’t call the action.
I’m not sure what your problem might be… does the solution found by shaneje (look up in the thread) help you?
It is not MVC3 bro! 😦
Yes. It is. At least when I open my project, the System.Web.Mvc (under references), I can see is version 3.0.0.
In any case, the question is, did you find this useful?
Hi Ricardo,
First of all thank you for this excellent example of using JQuery and Ajax in MVC application.
I’m trying to use it out in MVC3 application with Razor and all works fine except main part – when I click “Edit” button nothing happens. I’ve checked what all people wrote here but it’s still not working. What to do?
Thank you in advance.
Goran
Hi again Ricardo,
Actually, I forgot to add Edit view for Cars controller. All works fine with MVC3 and Razor now.
Thank you very much once again.
Regards,
Goran
Glad to hear you were able to resolve the issue. Cheers,
Great work man. Exactly what I was looking for. Keep it comming….
Congratulation Ricardo. …great work !!!!
I just change my Site.css file and then I can anymore back to the original style.
what can I do ????
thanks
Rodrigo
Hi Ricardo,
Thanks for your blog. I was able to have the popup for edit for my application. However, if there is a server side error( my applictaion have some server side validations), then I am not able to get the message “Please review your form”. Can you please guide in showing that message
Anphy,
I am working on a new post that will cover this scenario. I am a bit busy though, so it might be a week or so.
You could do a few of things, here are some ideas:
– Do the validation before you submit the form with an AJAX call.
– Return a string and look for it indicating that there was an error (ugly, but it works).
I have used a standard json object that contains a status and an object… Maybe I’ll do a post about that too 😉
Hi Ricardo,
Very nice article, can’t seem to to make it work with Razor Framework, If it not a hassle , Can you give a sample of this in MVC3 Razor ? It would be greatly appreciated
Thanks for the excellent tutorial, I really wanted something that could teach me about the underpinnings of the ajax model. I started using Razor engine and found that I had limitations so I wanted to revert back to .aspx and have the use of Master Pages. This tutorial did just that! If you could do a tutorial on FileUpload that would be great!
@Brian, @paja, @Goran Tesic, @Bob Nicolas
I finally took the time to do a Razor version. You can check it out here: http://wp.me/p7vU7-3l.
I introduced a few improvements as well.
Hope this helps,
Hello Sir!
I am trying to do something similar on ASP.NET MVC3 C#, but i see, the moment i open the edit form in dialog, i can’t able to do update.I saw the first time its works fine, but then when next time i hit update button, i see its appends to new sets of data to old on post url.I saw the Post details in Firebug , Please let me know how can i fix it?
I will appreciate your help.
Thanks,
Kumar
I’m sorry if i didn’t get it by reading the comments and the answer is somewhere there,but i have the same issue as someone else that posted above in the comments :link is open on classic way, it sends me to another page, no popup.Checked path to scripts, layout, can’t figure.
Ricardo can you please give me some direction what the problem may be.
Thanks. I’d really appreciate it. I’m beginner and I’m kind of stuck here. 🙂 But your example is great just I want to make it work 😀
Hi,
When the links opens normally, it means that the click event was not correctly binded. If you are positive all the jquery references are there, then check that there are no other javascripts errors on the page.
Did you start from the example source code?
Hope this helps,
-Ricardo
Hi Ricardo,
Excellent post. I have implemented the MVC3 solution and also added the Create and Delete dialog and methods based on your Edit. I have a different way of handling the grid because I am reloading it after every successful CRUD method and it is a partial view as well.
But I have noticed something strange in the update-message behavior when it returns data.Success = false. I have debugged it and the data is there and the error message is there as well and the code goes in the else part of the function updateSuccess(data) but the text doesn’t show. And it does not happen if this unsuccessful result is the first action after refresh. It only happens after at least one successful action (dialog open, save, returns data.Success true).
Is there a problem with cashing? I suspect something along that line but have no idea how to solve it. Please help if you can. Thank you.
First of All I thank you
My question is : How to change the initial position of the dialog. I mean; when I click on Edit button I want the dialog to be displayed in right side of the screen instead on the center of the screen .. is it possible if yes how ?
thanks in advance
To open the dialog in a specific place in the page, use the position option of the dialog. For more details, visit the jQuery UI page (http://jqueryui.com/demos/dialog/#option-position)
Hi,
Thanks for this wonderful article. I am new to Asp.Net MVC. I am trying to upload file using modal popup. This article I have tried out to upload a file . But as i submit the file is not uploaded on the controller. Where as I have tried without the popup , the file upload controller doesn’t receive the file path on the server. How do I make it submit the file upload.
hi Ricardo
i want to edit record inplace so how can i do this using ajax mvc .please post some code to do it .it would be very helpful
Thanks for putting this together.
Great post Rocardo, i have learnt alot. thank you for your series of tutorials.
Hi, Thank you for sharing your knowledge. As a beginner, I’d say this is so far what I found the most clearly described and easy to follow MVC modal popup sample. I downloaded yours and transformed it to MVC 5. It works fine except the twitter style complete message not shown. Can you give me some tips to debug it? Besides, just wanted to clarify a couple things, (1) in the updateSuccess function, why do you need to find “tr”, “carName” etc.? Is it because you don’t use a database in the sample but you want to show the effect that the record has been update?
The main reason for having to find the “tr” and update the information is to keep the table information updated after you have submitted your change on the modal window, without having to reload it.
As per your issue with the twitter type message, do you get an error? there are many other/newer libraries/functions for messaging out there, which you can choose to use.
Thank you so much for prompt reply. Yes, I used NuGet to get everything update. After I clicked Update (in the popup), it does to another page which showed “{“Success”:true,”Object”:{“Id”:1,”ImageFileName”:”FordFocusElectric.jpg”,”Name”:”Ford Focus Electricaaa”,”Description”:”Great looking car… plus is green.”}}” and the url is http://localhost:1773/cars/Edit/1?Length=4.
I used F12 developer in Firefox to browse (not sure this is right place to check) and found the following two errors:
“The connection to ws://localhost:3406/dkflfjdl……… was interupted while the page is loading”
“no element found”
Jim, the fact that you are getting this “Length=4” on the URL is leading me to believe there was a problem with the migration to the new version of MVC and the URL is not being generated correctly.
Other that that, is tough to determine the error by the info given.
Keep in mind this sample is a few years old, even jquery might have changed substantially.
I know…and that’s why I tried to transform it to MVC5. However, as I said, this is the easiest understandable I found so far (for beginner, of course it also depends on individual’s technical background). Anyway I have figured out quite a few tricks from your sample already. Unfortunately I just cannot do it the best. Once again, thanks for sharing with us.
Hello Ricardo,
I tried to debug to see why the twitter style message is not coming up. I found that the execution ends at the line “return Json(JsonResponseFactory.SuccessResponse(car),JsonRequestBehavior.DenyGet);” whereas your version continues to function updateSuccess(data) {..}. I tried my best the compare the code and didn’t see any difference. By any chance, will you have a clue what the problem would be. Thanks.
Hello Ricardo,
I am running into some issues trying to replicate your demo application. I am redoing your demo using ASP.NET MVC 4 Razor (VS2012) with some different data (example, updating a list of users). When trying to update a dialog windows opens, I make the changes I want and when clicking on update the index form does not reflect the new changes I have to refresh the whole index page (F5) to see the new changes but in the data base all changes had been taken successfully.
What could I been doing wrong?
http://www.webnodes.ca/media/4199/EditDialogsAndFormsRazor-Demo.zip
The page cannot be displayed because an internal server error has occurred.
Please try to download the sample code again; there was an issue with the hosting that have been solved.
Excellent article Ricardo – many thanks for this, it really helped.
One quick question – I am using MVC4 and everything is going well until I click “Update”. The data is updated in the model, however I am redirected to a new page with a Json “Success” message on it, instead of the dialog closing. Any ideas?