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));
        }

Answer 1

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.
}
}