发布表单后，在先前的jquery对话框中显示动作的“返回json(消息)”消息

Question

我在jquery对话框中显示了创建新闻组的部分视图。我的代码是：

"_AddNewsGroup“partialView:

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

在"Index“视图中显示对话框的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();