在发布表单后，在先前的 jquery 对话框中显示来自“返回 json（消息）”操作的消息

Question

我在一个 jquery 对话框中展示了一个局部视图来创建新闻组。我的代码是：

“_AddNewsGroup”部分视图：

@model SmsMenu.Models.NewsGroupViewModel
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> 
@using (Html.BeginForm("AddNewsGroup", "News", FormMethod.Post, new { id = "newsGroupForm" })) 
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

     <div id="MessBox"></div>     


    <div class="editor-label">
        @Html.LabelFor(model => model.NewsGroupTitle)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.NewsGroupTitle)         
        @Html.ValidationMessageFor(model => model.NewsGroupTitle)
    </div>  
    <p>
        <input type="submit" id="SubmitButton"  value="Save" />
    </p>
}

“索引”视图中显示对话框的 Jquery 代码：

<script type="text/javascript">
    $(document).ready(function () {
        $("#addnewsgroup").css('display', 'none');         
    });

    $(function () {
        $('#addnewsgroup').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            //  title: 'hi there',
            modal: true,
            open: function (event, ui) {
                //Load the CreateAlbumPartial action which will return 
                // the partial view _CreateAlbumPartial
                $(this).load("@Url.Action("AddNewsGroup","News")");
            },
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });
    });

        $("#SubmitButton").click(function () {
            if (!$("#newsGroupForm").valid()) {
                return false;
            }
            var groupTitle = $("#NewsGroupTitle").val();
            $.ajax({
                url: '/Admins/NewsGroup/AddNewsGroup',
                type: 'post',
                dataType: 'json',
                data: JSON.stringify({ newsgroup: { 'NewsGroupTitle': groupTitle } }),
                contentType: 'application/json; charset=utf-8',
                success: function (result) {
                    $("#MessBox").html(result.message).dialog({
                        buttons: [{
                            text: "Ok",
                            click:
                                function () {
                                    $("#addnewsgroup").dialog('close');
                                    location.href = '/Admins/NewsGroup/Index';
                                }
                        }]

                    });
                }
            });
        });

</script>

在索引视图中添加按钮以显示对话框的功能：

function AddNewsGroup() {
        $('#addnewsgroup').dialog('open');
}

这些是我的行动：

   public ActionResult AddNewsGroup()
{
        return View("_AddNewsGroup");
}

[HttpPost]
public ActionResult AddNewsGroup(NewsGroupViewModel newsgroup)
{

        if (newsSrv.AddNewsGroup(newsgroup))
        {
            return Json("successful!",JsonRequestBehavior.AllowGet);
        }
        else
        {
            return Json("Error!",JsonRequestBehavior.AllowGet);

        }        
}

我想显示“成功！”和“错误！”在已显示的上一个对话框中发布后； 但这些都显示在一个空白页！ 我该怎么办？ 感谢您的帮助...

Answer 1

您需要先在点击处理程序中使用preventDefault，否则将继续执行默认操作（提交表单）。

$("#SubmitButton").click(function (e) {
    e.preventDefault();