javascript - Showing message from "return json(message)" of action in previous jquery dialog after posting its form

Question

I shown a partial view in a jquery dialog to create news group . my code are:

"_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>
}

Jquery Codes in "Index" view to show dialog:

<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 for add button in index view for showing dialog:

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

and these are my actions:

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

        }        
}

I want to show "Successfull!" and "Errors!" after posting in previous dialog box that has been shown ; but these are shown in a blank page!! what should i do? thanks for helping...

Answer 1

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

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