ASP.NET MVC 3 + jQuery Ajax JSON - 防止在新页面中打开JSON

Question

我有一个Action方法返回一个JSON序列化的对象.我遇到的问题是返回的JSON是在新页面中打开,而不是由jquery.Ajax方法的"success"函数处理.

这是控制器动作:

[HttpPost]
public ActionResult AddAssignment(AssignmentViewModel avm)
{
    db.Assignments.Add(new Assignment
    {
        Name       = avm.Name,
        DueDate    = DateTime.Parse(avm.DueDate),
        CourseID   = avm.CourseID,
        IsComplete = false
    });
    db.SaveChanges();

    avm.Course = db.Courses
        .Where(x => x.CourseID == avm.CourseID)
        .SingleOrDefault()
        .Name;

    return Json(avm);
}

这是视图(表单):

@model Fooburg.Mvc.Models.AssignmentViewModel

<h2 style="margin: 0 0 24px 0">Add Assignment:</h2>

@using (Html.BeginForm("AddAssignment",
    "Assignments",
    FormMethod.Post,
    new { @id = "add-assignment-form" }))
{
    <dl class="tabular">
        <dt>Course:</dt>
        <dd>
        @Html.DropDownListFor(x => x.CourseID, new SelectList(ViewBag.Courses, "CourseID", "Name"))
        </dd>
        <dt>Assignment:</dt>
        <dd>
        @Html.TextBoxFor(x => x.Name)
        </dd>
        <dt>Due Date:</dt>
        <dd>
            @Html.TextBoxFor(x => x.DueDate, new { @class = "date" })
            <script type="text/javascript">
                $(function () {
                    $('.date').datepicker({ dateFormat: "mm/dd/yy" });
                });
            </script>
        </dd>
    </dl>
    <p>
    <input type="submit" value="Add Assignment" id="new-assignment-submit" />
    </p>
}

这是javascript:

$(function () {
        $('#add-assignment-form').submit(function () {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                dataType: "json",
                success: function (result) {
                    $('#output').html(result);
                }
            });
        });
    });

我试过这个event.stopPropogation()方法,但没有改变我的问题

编辑:我已将我的javascript更新为以下内容,但我仍然得到相同的结果

$('#add-assignment-form').submit(function (event) {
            event.preventDefault();
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                dataType: "json",
                success: function (result) {
                    $('#output').html(result);
                }
            });
            return false;
        });

Answer 1

您需要return false;或event.preventDefault()阻止浏览器正常提交表单.