c# - Modal editing in MVC -

i've been searching way update data using modal pop-up. right i'm using devexpress, because we're using other devexpress controls (but change if jquery library easier!!)

i'm stuck validation aspect. frankly, entire process seems quite hard i'm trying achieve.

anyways, let me describe process i've worked out:

-the index page contains overview of different elements can updated. using htmlextension, able create devexpress popup loads edit page when open popup. => @html.popupcontrol().withtext("edit").popupgoesto(url.action("editpopup", etc etc)

-the edit page -which partial view- works fine. i've created little test page, contains 1 textbox, takes in decimal.

i want submit form using ajax (because frankly, have no idea how can show validation if full post back, since need able create popup , bind data , trigger validation errors).

  <script type="text/javascript">     function endpopupupdate(message) {         if (message.url) {             window.locatin.href = url;         }         $("#submitbuttonpopup, #loadingpopup").toggle();     }      function beginpopupupdate() {         $("#submitbuttonpopup, #loadingpopup").toggle();     } </script>  using (ajax.beginform("edit", "xxx", new ajaxoptions {  updatetargetid = "popupdiv", httpmethod = "post", onbegin = "beginpopupupdate", oncomplete = "endpopupupdate"}, new { id = "popupform" }))     {         <div id="popupdiv">             @html.partial("editpopup", new xxxviewmodel())         </div>     } 

i able achieve validation when postback manually rehooking jquery events (because these don't hooked since page gets loaded dynamicly)

function reconnectvalidation() {     $("#popupform").ready(function () {         $.validator.unobtrusive.parse("#popupform");     });      $("#submitbutton").click(function (e) {         var form = $("#popupform");         if (!form.valid()) {             e.preventdefault();         }     }); } 

so handles client side validation, works.

now, actual problem! server side validation.

[httppost]     [validateantiforgerytoken]     public actionresult edit([modelbinder(typeof(commandmodelbinder))] updatecommand command)     {         if (!modelstate.isvalid)         {             //using command pattern             var handlerresult = handlerlocator.getqueryhandler<igetoverviewhandler>().execute(..);             return partialview("editpopup", handlerresult.viewmodel);         }          handlerlocator.getcommandhandler<updatecommand>().handle(command);         var returnlink = url.action("index", new {..});         return json(new { url = returnlink }, jsonrequestbehavior.allowget);     } 

i've written custommodelbinder, nothing properties in command object (my return model if will) , looks in formcollection if can find matching object same name. tries convert , binds modelerror modelstate if fails.

so, have modelstate either valid or invalid. if it's valid, want redirect index (so overview can update). i've read should handle in client side, because ajax.beginform going replace "popupdiv"-div result (which creates same page within page).

here oncomplete event:

function endpopupupdate(message) {             if (message.url) {                 window.locatin.href = url;             }             $("#submitbuttonpopup, #loadingpopup").toggle();         } 

the problem is, don't receive json message, receive partialview. means can't access message.url..because that's not recieve :/

so problemo number 1

if object not valid, want return partialview model , give error user. when return partialview, replaces current view doesn't show validation errors..

that problem number 2 :)

also, if know better way solve problem, please don't hesitate respond (because method seems convoluted -or should do-)

sorry lengthy post, hope clear.

thanks & time!

i've used dialog plugin jquery ui () before, i've found works well. links open in iframe within popup, avoids problem describe jquery validation events don't hooked because page gets loaded dynamically - both client side , server side validation should work normal, within iframe.

the nice thing technique can generate action links normal within index page, add class of popup them e.g.

@html.actionlink("edit", "edit", new { id = model.id }, new { @class = "popup" }) 

then, can these links open in dialog iframe jquery like:

$("a.popup").click(function(e) {     e.preventdefault();     $("<iframe />").attr("src", $(this).attr("href") + "?popup=true").dialog({ show: "fadein", modal: true, width: 300, height: 300}); }); 

this looks popup links, cancels default behaviour (page navigation) , opens url in iframe within popup, adding querystring identify page within popup. reason querystring , knowing popup allows load different layout page within view, maybe through action filter e.g.:

public class popup : actionfilterattribute {     public override void onactionexecuted(actionexecutedcontext filtercontext)     {         if (filtercontext.result != null             && filtercontext.result viewresult             && filtercontext.requestcontext.httpcontext.request["popup"] == "true")             (filtercontext.result viewresult).mastername = "~/views/shared/_popuplayout.cshtml";     } } 

this means can apply attribute classes want action methods apply. method means if change mind implementation in future (ie removing popups) can remove jquery cancels clicks , app continue function normal mvc app separate pages, , navigation/validation etc 'just work'.

i hope makes sense , helps.