Question

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.

Here’s the controller action:

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

Here’s the 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>
}

And here’s the 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);
                }
            });
        });
    });

I have tried the event.stopPropogation() method, but didn’t change my problem

EDIT: I’ve updated my javascript to the following, but I’m still getting the same result

$('#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

You need to return false; or event.preventDefault() to prevent the browser from submitting the form normally.