MVC 3 AJAX表格發布

Question

所有，

我正在嘗試實現一個表單的AJAX帖子。（ASP.NET MVC的新功能，來自Rails背景）

當我提交表單並觀看FireBug控制台以及頁面時，表單不會執行AJAX帖子。 調用AJAX處理程序（Contact / Process）並將表單重定向到那里，顯示響應消息的Contact / Process，而不是更新表單上的指定div

我必須在某個地方實現錯誤，最有可能在處理AJAX POST的控制器中。 還不確定還有什么。

謝謝

表格（/Views/Contact/Create.cshtml）

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<div id="content">
    <div id="Status"></div>
    @using (Ajax.BeginForm("Process","Contact", new AjaxOptions{ HttpMethod = "POST", UpdateTargetId = "Status"}))
    {
         @Html.ValidationSummary(true)

         <p><span class="required">&#42; All fields are required.</span></p>

        <!-- First Name -->
        <div>
            @Html.LabelFor(model => model.Contact.FirstName) <span class="required">&#42;</span>
        </div>
        @Html.EditorFor(model => model.Contact.FirstName)
        @Html.ValidationMessageFor(model =>model.Contact.FirstName)


        <div>
            <input type="submit" name="submit" value="Submit" class="btn"/> 
       </div>

    }

</div>

Controller Action（/Controllers/ContactController.cs）

 [HttpPost]
    public string Process(ContactViewModel c)
    {
        if (ModelState.IsValid)
        {
            c.Contact.DateCreated = DateTime.Now;
            db.Contacts.Add(c.Contact);
            db.SaveChanges();

            return "Success!";

        }

        return "Failure";

    }

Answer 1

你需要這兩個庫：

<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

更新

您的Process操作需要返回ActionResult並使用Content而不是字符串。

把它改成這個：

[HttpPost]
public ActionResult Process(ContactViewModel c)
{
    if (ModelState.IsValid)
    {
        c.Contact.DateCreated = DateTime.Now;
        db.Contacts.Add(c.Contact);
        db.SaveChanges();

        return Content("Success!");

    }

    return Content("Failure");

}

Answer 2

您需要將jquery腳本添加到頁面

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>