ASP.NET Ajax BeginForm 重定向？

Question

好的，我已经学习了几个关于如何使用 Ajax.BeginForm() 表示法提交表单的教程。一切似乎都很简单。但是，我注意到（如下面的屏幕截图所示），尽管使用了 ajax，但它仍然重定向以显示结果，而不是替换 div 的内容。这是为什么呢？

供参考，我一直在关注：Submit form using AJAX in Asp.Net mvc 4

代码：

        @Html.ValidationSummary(true)
        @using (Ajax.BeginForm("Create", "Role", new AjaxOptions(){
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "RoleCreateResult",
            HttpMethod = "POST"
        }))
        {
            @Html.AntiForgeryToken()
            <fieldset>
            <div class="form-group">
                <label class="col-md-2 control-label">Name</label> 
                <div class="col-md-10">
                    <input type="text" class="form-control" id="RoleName" name="RoleName" data-val-required="The Role name field is required." data-val="true" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" id="CreateRoleSubmit" class="btn btn-default" value="Save" />
                </div>
            </div>
            </fieldset>
        }
        <div id="RoleCreateResult"></div>

控制器代码：

    //
    // POST: /Role/Create
    [HttpPost]
    public ActionResult Create(FormCollection collection)
    {
        try
        {
            var roleManager = new RoleManager<Microsoft.AspNet.Identity.EntityFramework.IdentityRole>(new RoleStore<IdentityRole>(new ApplicationDbContext()));
            if (roleManager.RoleExists(collection["RoleName"]))
            {
                return Json("Role " + collection["RoleName"] + " already exists.", JsonRequestBehavior.DenyGet);
            }
            else
            {
                var role = new IdentityRole();
                role.Name = collection["RoleName"];
                roleManager.Create(role);
                return Json("Role " + collection["RoleName"] + " created successfully.",JsonRequestBehavior.DenyGet);
            }
        }
        catch (Exception ex)
        {
            return Json("Error occured: " + ex.Message, JsonRequestBehavior.DenyGet);
        }
    }

呈现的 HTML：

<form id="form0" method="post" data-ajax-update="#RoleCreateResult" data-ajax-mode="replace" data-ajax-method="POST" data-ajax="true" action="/Role/Create">

    <input type="hidden" value="N2laLUmcoQ2yvbKwK40Sd6z1f56aZ2w_v0SQ-WfOcgCGnFaSAVNCkfjYatyU…E-NxRPPMueFOW4r-SVSpceGZX99iWsjpstd82URv4cRsNqbvf2UnJ0M1VWA2" name="__RequestVerificationToken"></input>
    <fieldset>
        <div class="form-group"></div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input id="CreateRoleSubmit" class="btn btn-default" type="submit" value="Save"></input>
            </div>
        </div>
    </fieldset>

</form>
<div id="RoleCreateResult"></div>

屏幕：

Answer 1

我会首先确保您的操作返回部分视图（没有看到这一点我无法确认）：

public ActionResult Create()
{
    return PartialView("Create");
}

如果我无法确保您拥有对 jquery 和 jquery.unobtrusive-ajax 的所有 javascript 引用并且它们正在正确加载（没有 404）：

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