StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POModal editing in MVC
text
Body
copied!<p>I've been searching for a way to <strong>update data using a modal pop-up.</strong> Right now I'm using devexpress, because we're already using other devexpress controls (but this could change if a jquery library would be easier!!)</p> <p>I'm <strong>stuck with the validation aspect</strong>. Frankly, the entire process seems quite hard for what I'm trying to achieve.</p> <p>Anyways, let me describe the process that I've currently worked out:</p> <p>-The <strong>Index page contains an overview of the different elements</strong> that can be updated. Using a HtmlExtension, I was able to create a devexpress popup which loads the edit page when you open the popup. => <strong>@Html.PopupControl().WithText("Edit").PopupGoesTo(Url.Action("EditPopup", etc etc)</strong></p> <p>-The edit page -which is just a partial view- works just fine. I've created a little test page, which contains 1 textbox, which takes in a decimal.</p> <p>I want to submit the form using ajax (because frankly, I have no idea how I can show the validation if I do a full post back, since I need to be able to create the popup and bind the data to it AND trigger the validation errors).</p> <pre><code> <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> } </code></pre> <p>I was able to achieve validation when I postback by manually rehooking the jquery events (because these don't get hooked since the page gets loaded dynamicly)</p> <pre><code>function ReconnectValidation() { $("#PopUpForm").ready(function () { $.validator.unobtrusive.parse("#PopUpForm"); }); $("#submitButton").click(function (e) { var form = $("#PopUpForm"); if (!form.valid()) { e.preventDefault(); } }); } </code></pre> <p>So this handles my client side validation, which works.</p> <p>Now, my actual problem! Server side validation.</p> <pre><code>[HttpPost] [ValidateAntiForgeryToken] public ActionResult Edit([ModelBinder(typeof(CommandModelBinder))] UpdateCommand command) { if (!ModelState.IsValid) { //using the 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); } </code></pre> <p>I've written a CustomModelBinder, which does nothing but look for the properties in my command object (my return model if you will) and looks in the formcollection if it can find a matching object with the same name. Then it tries to convert it and it binds a ModelError to my ModelState if it fails.</p> <p>So, now we have a ModelState which is either valid or is invalid. If it's valid, I want to redirect to the Index (so my overview can update). I've read that I should handle this in the client side, because the ajax.BeginForm is going to replace the "PopUpDiv"-div with the result (which just creates the same page within my page).</p> <p>Here is the onComplete event:</p> <pre><code>function EndPopUpUpdate(message) { if (message.url) { window.locatin.href = url; } $("#submitButtonPopUp, #loadingPopUp").toggle(); } </code></pre> <p><strong>The problem is, that I don't receive a json message, but I receive a PartialView.</strong> This means I can't access the message.url..because that's not what I recieve :/</p> <p>So that is problemo number 1</p> <p>If the object is not valid, I want to return a partialview with the model and give an error to the user. <strong>When I return the partialview, it just replaces the current view but it doesn't show any validation errors</strong>..</p> <p>That is problem number 2 :)</p> <p>Also, if you know a better way to solve this problem, please don't hesitate to respond (because this method just seems really convoluted for what it does -or should do-)</p> <p>Sorry for the lengthy post, but I hope everything is clear.</p> <p>Thanks for your help & time!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload