提交时的 Jquery 对话框在白色视口中返回 Json 数据

Question

当我按下保存按钮时，我从控制器返回：

return Json(new { success = true });

我的整个浏览器视口是白色的，在左上角我看到我返回的 json 数据：

{"success":true}

问题：这个白色视口是固定的，我需要改变什么？

我的期望是检查是否成功：客户端的真/假，取决于我关闭对话框或更改一些数据的值，调用对话框的站点应该保留。

   $(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>

创建视图：

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

更新

"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

                },

控制器 POST 操作：

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

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

Answer 1

您必须进行 Ajax 提交，以使页面保持在相同的 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');
            },