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

我有一个Action方法返回一个JSON序列化的对象。我遇到的问题是返回的JSON在新页面中打开，而不是由jquery.Ajax方法的“成功”函数处理。ASP.NET MVC 3 + jQuery Ajax JSON - 防止JSON在新页面打开

这里的控制器动作：

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

来源

2011-11-22 Didaxis

'返回JSON（AVM）;' – SLaks

考虑返回了未启用JavaScript的浏览器视图。 – SLaks

你是否包含ajax脚本？请参阅http://stackoverflow.com/q/5061145/409259 –

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

来源

2011-11-22 16:44:52 SLaks

谢谢，添加return false和event.preventDefault（）都没有效果 – Didaxis

设置Firebug以防止出错并查看会发生什么。 – SLaks

嗯，我得到“$未定义” – Didaxis

只要指定

return false;

您的通话$.ajax()

UPDATE

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

来源

2011-11-22 16:48:12

谢谢你，加入return false没有任何作用。请参阅上述编辑以查看我编辑的javascript – Didaxis

请参阅更新后的代码。绑定提交按钮的点击事件。这应该做的。请检查 –

后，您这里有两个选择，

使用Ajax.BeginForm()代替Html.BeginForm()你可以使用像

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

并摆脱javascript代码。

或者拨打

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

来源

2011-11-22 16:49:58

遵循传统的智慧，我试图通过jquery完成这一点。但是，按照您对jQuery编辑的建议，我的情况不会改变 – Didaxis

你检查event.prevendDefault()如果在页面上的其他JavaScript错误可能会导致此意外的行为？我会建议使用Firebug for FF或Javascript Console for Chrome。

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

心连心，

-covo

来源

2011-11-22 18:59:47 covo

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

回答

相关问题