ASP MVC3 – Editing records with jQueryUI Dialogs and AjaxForms
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.
Advertisement
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?
I missed some points..thank you for your help ricardo..
best wishes..
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!
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?
[...] make things easier on the user, I have implemented a modal dialog using jQuery which allows the user to add an option to the db without having to leave the form to [...]
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