title: ASP.NET MVC 3 + jQuery Ajax JSON - Prevent JSON from opening in new page
body: <p>I have an Action Method that returns a JSON-serialized object. The problem I'm having is that the JSON returned is opening in a new page, instead of being processed by the "success" function of the jquery.Ajax method.</p>
  
  <p>Here's the controller action:</p>
  
  <pre><code>[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 =&gt; x.CourseID == avm.CourseID)
          .SingleOrDefault()
          .Name;
  
      return Json(avm);
  }
  </code></pre>
  
  <p>Here's the View (form):</p>
  
  <pre><code>@model Fooburg.Mvc.Models.AssignmentViewModel
  
  &lt;h2 style="margin: 0 0 24px 0"&gt;Add Assignment:&lt;/h2&gt;
  
  @using (Html.BeginForm("AddAssignment",
      "Assignments",
      FormMethod.Post,
      new { @id = "add-assignment-form" }))
  {
      &lt;dl class="tabular"&gt;
          &lt;dt&gt;Course:&lt;/dt&gt;
          &lt;dd&gt;
          @Html.DropDownListFor(x =&gt; x.CourseID, new SelectList(ViewBag.Courses, "CourseID", "Name"))
          &lt;/dd&gt;
          &lt;dt&gt;Assignment:&lt;/dt&gt;
          &lt;dd&gt;
          @Html.TextBoxFor(x =&gt; x.Name)
          &lt;/dd&gt;
          &lt;dt&gt;Due Date:&lt;/dt&gt;
          &lt;dd&gt;
              @Html.TextBoxFor(x =&gt; x.DueDate, new { @class = "date" })
              &lt;script type="text/javascript"&gt;
                  $(function () {
                      $('.date').datepicker({ dateFormat: "mm/dd/yy" });
                  });
              &lt;/script&gt;
          &lt;/dd&gt;
      &lt;/dl&gt;
      &lt;p&gt;
      &lt;input type="submit" value="Add Assignment" id="new-assignment-submit" /&gt;
      &lt;/p&gt;
  }
  </code></pre>
  
  <p>And here's the javascript:</p>
  
  <pre><code>$(function () {
          $('#add-assignment-form').submit(function () {
              $.ajax({
                  url: this.action,
                  type: this.method,
                  data: $(this).serialize(),
                  dataType: "json",
                  success: function (result) {
                      $('#output').html(result);
                  }
              });
          });
      });
  </code></pre>
  
  <p>I have tried the <code>event.stopPropogation()</code> method, but didn't change my problem</p>
  
  <p><strong>EDIT:</strong> I've updated my javascript to the following, but I'm still getting the same result</p>
  
  <pre><code>$('#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;
          });
  </code></pre>