在发布表单后，在上一个 jquery 对话框中显示来自"return json(message)"操作的消息

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);
        }        
}

我想在之前显示的对话框中发布后显示"成功！"one_answers"错误！"；但这些都显示在空白页中！！我该怎么办？谢谢你的帮助。。。

Answer 1

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

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