jquery - 为什么 Ajax.BeginForm 会替换我的整个页面？

Question

上下文:Asp.Net MVC3 w/Razor

我试图在 Razor 布局(以前的母版页)上放置一个登录表单，以便当用户超时时，可以提示他/她登录而不会被重定向(如 RallyDev 中那样)。因此，我在 Ajax.BeginForm 中创建了一个部分 _LogOn.cshtml，其中包含所有必需的内容(用户名等)，其中 UpdateTargetId 指向一个 div，该 div 包含 ajax 表单中的登录控件。该表单回发到 AccountsController.RefreshLogOn 操作，但显然，包含的页面可能是从不同的 Controller 呈现的。 RefreshLogOn 操作返回 PartialView("_LogOn")。无论如何，我的期望/愿望是只替换该 div 内的控件。相反，我的页面位置更改为/Accounts/RefreshLogon，并且整个页面被部分页面替换。我应该采取另一种方法吗？

相关代码如下:

_LogOn.cshtml

 @{
        using (Ajax.BeginForm("RefreshLogOn", "Accounts", 
            new AjaxOptions { 
                      OnSuccess = "logonSucceeded", 
                      OnFailure = "logonFailed",         
                      HttpMethod = "Post", 
                      UpdateTargetId = "user-info" }, 
            new { @id = "refresh"}))
        {  
        @Html.AntiForgeryToken()

       <div id="user-info">
                <p>Your session has expired.</p>
            <div class="error">@Html.ValidationSummary()</div>
            <table>
                <tr>
                    <td>Username:</td>
                    <td>@Html.TextBoxFor(model => model.UserName)</td>
                </tr>
                <tr>
                    <td>Password:</td>
                    <td>@Html.PasswordFor(model => model.Password)</td>
                </tr>
                <tr>
                    <td>Remember Me:</td>
                    <td>@Html.CheckBoxFor(model => model.RememberMe)</td>
                </tr>

            </table>
        </div>
            }
        }

账户 Controller

public ActionResult RefreshLogOn (LogOnModel model)
{
    if (ModelState.IsValid)
    {
        if (MembershipService.ValidateUser(model.UserName, model.Password))
        {
            ...content elided...

            return PartialView("_LogOn");
        }

        ModelState.AddModelError("", ErrorMessages.IncorrectUsernameOrPassword);
    }

    return PartialView("_LogOn", model);
}

Ajax.BeginForm --> 生成的表单标签:

<form action="/Accounts/RefreshLogOn" id="refresh" method="post" 
    onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));"
    onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), 
    { 
    insertionMode: Sys.Mvc.InsertionMode.replace, 
    httpMethod: &#39;Post&#39;, 
    updateTargetId: &#39;user-info&#39;, 
    onFailure: Function.createDelegate(this, logonFailed), 
    onSuccess: Function.createDelegate(this, logonSucceeded) 
    });">

Answer 1

ASP.NET MVC 3 中的

Ajax.* 帮助程序使用不显眼的 jquery，因此请确保您已在 View 中引用 jquery.unobtrusive-ajax.js 脚本。您也可以使用 FireBug查看幕后发生的情况以及表单不发送 AJAX 请求的原因。

此外，UpdateTargetId = "form" 似乎也很可疑，尤其是当您的表单具有 refresh ID:@id = "refresh" 时。您的 DOM 中是否还有其他带有 id="form" 的元素？也许您的意思是 UpdateTargetId = "refresh"？