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

Question

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

这是控制器的动作:

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

View (form):

@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()来阻止浏览器正常提交表单

Answer 2

这里有两个选项，

使用Ajax.BeginForm()代替Html.BeginForm()，您将使用

@using(Ajax.BeginForm( "AddAssignment", "Assignments",
      new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "output"})) {
  ...
}

和去掉javascript代码。

---

或者在

中调用event.prevendDefault()

$('#add-assignment-form').submit(function (event) {
    // ...
    event.preventDefault();
});

Answer 3

指定

return false;

在你的$.ajax()呼叫之后

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

Answer 4

您是否检查过页面上是否有其他可能导致此意外行为的javascript错误?我建议FF用Firebug, Chrome用Javascript Console。

另外，我注意到如果你没有指定脚本类型，有时FF会出现问题，所以请确保你的类型设置为"text/javascript"。

hth,

-covo