1

[保存] ボタンを押すと、コントローラーから次のように返されます。

return Json(new { success = true });

ブラウザのビューポート全体が白く、左上隅に、返された json データが表示されます。

{"success":true}

質問: この白いビューポートを修正するには、何を変更する必要がありますか?

私の期待は、成功を確認することです: クライアント側で true/false を確認し、値に応じてダイアログを閉じるか、いくつかのデータを変更すると、ダイアログを呼び出したサイトが残るはずです。

   $(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() });
        }
4

1 に答える 1

0

ページが同じ URL にとどまるように、Ajax 送信を行う必要があります。

            "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');
            },
于 2012-05-20T19:06:04.437 に答える