MVC: used partial view for jquery modal popup, issues with validation

Question

So i have a button in a view that opens up a modal pop up form. This modal pop up form is a partial page. My issue with this is that:

Whenever I don't fill up the required fields on the form, the TryUpdate check will obviously fail, but it will just refresh the whole page cuz of the line "window.location.reload" on the jquery. What I wanted to do is that instead of refreshing, it would still stay as it is (the page with the modal showing) and validation summary or validations will show up saying, this and that are required. Is this possible or am I complicating stuff with it?

<script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $('#modal-link').click(function () {
                var href = this.href;
                $('#load-modal').dialog({
                    modal: true,
                    draggable: false,
                    position: "top",
                    open: function (event, ui) {
                        $(this).load(href, function (result) {
                            $('#new-academy-form').submit(function () {
                                $.ajax({
                                    url: this.action,
                                    type: this.method,
                                    data: $(this).serialize(),
                                    success: function (json) {
                                        window.location.reload(true);
                                    },
                                    error: function (data) {
                                            var errmessage = '<div class="error-repo">Error</div>';
                                            $('#messages').html(errmessage);
                                        }
                                });
                                return false;
                            });
                        });
                    }
                });
                return false;
            });
        });
    });
</script>

This is the button:

<div class="width3">
                <%: Html.ActionLink("Submit New", "Create", "Propose", null, new { @class = "results", id = "modal-link" })%>
            </div>

This is the action:

public ActionResult Create()
        {
            return PartialView(Propose.LoadDetails(context, null));
        }

        [HttpPost]
        public ActionResult Create(FormCollection formCollection)
        {
            Propose propose= new Propose ();
            if(TryUpdateModel(propose, "Propose ")){
                context.Propoe.Add(propose);
                context.SaveChanges();
                var proposals = new System.Text.StringBuilder();
                return Json(new { propose= proposals});
            }
            return PartialView(Propose.LoadDetails(context, null));
        }

You can return a status code from your action that lets you determine if you *should* reload the whole page or not. The jQuery AJAX error callback will only be fired if there is an actual error. Or, you can return an HTTP status code which indicates an error, such as shown here: http://stackoverflow.com/q/4707755/453277 — Tim M., Oct 07 '12 at 07:59
so you really can't use the usual helper anymore? on that partial page? — gdubs, Oct 07 '12 at 14:20

score 1 · Answer 1 · answered Oct 07 '12 at 11:46

You can return a flag from your action.

var data = new {isSuccess, new { propose= proposals}};
return Json(data ,  JsonRequestBehavior.AllowGet);

and then use it in jquery like

success: function (data) {
if(data.isSuccess){
    window.location.reload(true);
}
else{
   // write code to show validation summary and no reload.
}
}

MVC: used partial view for jquery modal popup, issues with validation

1 Answers1