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

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>
}

这里还有 j:

$(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.Propogation()方法,但并没有改变我的问题。

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

您需要return false; or event.preventDefault(),以防止浏览器正常提交表格。

Answer 2

You have two options here,

使用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;

after your $.ajax() call

<>>>>>

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

Have you checked if there are other javascript errors on the page that might be causing this unexpected behaviour? I would suggest Firebug for FF or Javascript Console for Chrome.

此外,我注意到,如果你没有具体说明文字类型,那么有些时间的FF就存在问题,这样就可以确保你的类型被定为“文字/文字”。

hth,

- 婚姻

友情链接