Question

When I press the Save button I return from my Controller this:

return Json(new { success = true });

and my whole browser viewport is white and in the left top corner I see my json data I have returned:

{"success":true}

Question: What do I have to change that this white viewport is fixed?

My expectation is to check for success: true/false at client side and depending on the value I close the dialog or change some data and the site who called the dialog should remain.

   $(document).ready(function () {

        // the div holds the html content
        var $dialog = $('<div></div>')  
        .dialog({
            autoOpen: false,
            title: 'This is the dialogs title',
            height: 400,
            width: 400,
            modal: true,
            resizable: false,
            hide: "fade",
            show: "fade",
            open: function (event, ui) {
                $(this).load('@Url.Action("Create")');
            },
            buttons: {
                "Save": function () {
                    var form = $('form', this);
                    $(form).submit();
                },
                "Close": function () {
                    $(this).dialog("close");                   
                }
            } // no comma
        });

        $('#CreateTemplate').click(function () {
            $dialog.dialog('open');
            // prevent the default action, e.g., following a link
            return false;
        });

    });

</script>

Create view:

@using (Html.BeginForm("JsonCreate", "Template"))
{ 
    <p class="editor-label">@Html.LabelFor(model => model.Name)</p>
    <p class="editor-field">@Html.EditorFor(model => model.Name)</p>
    <p class="editor-field">@Html.ValidationMessageFor(model => model.Name)</p>    
}

UPDATE

"Save": function () {
                    var form = $('form', this);
                    debugger;
                    $.ajax({
                        url: this.action,
                        type: 'POST',
                        data: form.serialize(),
                        dataType: 'json',
                        success: function (result) {
                            debugger;   
                            if (result.success) {
                                $(this).dialog("close");
                                // Update UI
                            }
                            else {
                                // Reload the dialog to show model errors                    
                                $(dialog).html(result);
                            } // else end
                        } // success end
                    }); // ajax post end

                },

Controller POST action:

  [HttpPost]
        public ActionResult JsonCreate(Template template)
        {
            if (ModelState.IsValid)
            {
                _templateDataProvider.AddTemplate(template);
                return Json(new { success = true });
            }

            return Json(new { errors = GetErrorsFromModelState() });
        }

Answer 1

You have to do Ajax submit, so that the page stays on the same url:

            "Save": function () {
                var form = $('form', this);
                //$(form).submit();
                $.post(form.prop('action'), form.serialize(), function(response){
                    //do something with response data or ignore it
                }, 'json');
            },