Return Validation Error back to jQuery dialog in MVC 3

Question

Hi have a page that loads a jQuery modal dialog, the modal contains a form. How can i return an error so that it loads in the modal, if i return a PartialView, the page just loads with the dialog form contents (which is just intended to be in the modal)

here is the view

<span><a id="end" href="#">Launch End Dialog</a> </span>



<div id="end-dialog" class="dialog">
  <div id="end-inner"></div>
  <hr />
</div>

<script type="text/javascript">
  $(function () {


    var endDialog = $("#end-care-plan-dialog").dialog({

    });

    $("#end").click(function () {
      endDialog.dialog('close');
    });

    $('#end').click(function () {
      $('#end-inner').load(baseUrl + "/End", $.param({ id: '@Model.id' }),
              function () {
                endDialog.dialog('open');
              });
    });
  });
</script>

heres my controller

[HttpPost]
public ActionResult End(EndVM end)
{
  if (ModelState.IsValid)
  {
    //do work

  }

  //return so that pop up now has validation errors
  return PartialView(end);
}

Note - jquery.validate and jquery.validate.unobstrusive are loaded into the views

Thanks hope this makes sense.

Update: Diego - this is the partial view that contains the form (that is loaded into the moal)

@using (Html.BeginForm<EndController>(c => c.End(@Model.Id)))

{ @Html.HiddenFor(m => m.Id) @Html.DropDownListFor(m => m.EndReasonId, RefData.EndReasons) Other Reason @Html.EditorFor(m => m.EndReasonOther) @Html.ValidationMessageFor(m => m.EndReasonOther) @(Html.ActionLink(c => c.Edit(@Model.Id), "Cancel")) @Html.SubmitButton("End", "End") }

Is there where i adapt your code?

Thanks

You can use ajax to make it more simple

COLD TOLD
– COLD TOLD

2012-03-24 22:11:46 +00:00
Commented Mar 24, 2012 at 22:11 — COLD TOLD
– COLD TOLD, Commented Mar 24, 2012 at 22:11

Diego · Accepted Answer · 2012-03-24 22:16:48Z

1

It does make sense. You just have to make sure the form is submitted through AJAX, otherwise the whole page will refresh. To override the default behavior, your need a handler for the submit event of the form. Assumming your form's is is myForm.

$('#myForm').submit(function() { // catch the form's submit event
    $.ajax({ 
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response) { // on success..
            $('#end-inner').html(response); // update the DIV
        }
});
return false; // cancel original event to prevent form submitting
});

answered Mar 24, 2012 at 22:16

Diego

18.5k5 gold badges67 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Return Validation Error back to jQuery dialog in MVC 3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related