为什么Ajax.BeginForm取代了我的整个页面?

时间:2011-02-10 18:32:53

标签: jquery asp.net-mvc-3

上下文:Asp.Net MVC3 w / Razor

我正在尝试在Razor布局(以前的母版页)上放置一个登录表单,以便当用户超时时,可以提示他/她登录而不重定向(如在RallyDev中)。因此,我在Ajax.BeginForm中创建了一个部分_LogOn.cshtml,其中包含所有必需的东西(用户名等),其中UpdateTargetId指向一个div,该div包含ajax表单内的登录控件。表单回发到AccountsController.RefreshLogOn操作,但显然,包含的页面可能是从不同的控制器呈现的。 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>
            }
        }

AccountsController

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 - &gt;生成的表格标签:

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

6 个答案:

答案 0 :(得分:39)

ASP.NET MVC 3中的

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

UpdateTargetId = "form"似乎也很可疑,尤其是当您的表单中包含refresh ID:@id = "refresh"时。你的DOM中有id="form"的其他元素吗?也许你的意思是UpdateTargetId = "refresh"

答案 1 :(得分:6)

注意:我的问题是第一次,我引用了wrong ajax脚本文件jquery.validate.unobtrusive.min.js而不是jquery.unobtrusive-ajax.js,最新的jquery版本无效,{{ 3}} jquery-1.7.1.min.js为我工作。

only在成功进入后返回内容

所以这是订单:

<script src="~/js/jquery-1.7.1.min.js"></script>
<script src="~/js/jquery.validate.min.js"></script>
<script src="~/js/jquery.unobtrusive-ajax.min.js"></script>

tryingDarin的帖子有所帮助。希望有所帮助。

答案 2 :(得分:3)

我有同样的问题,解决方案是:

  • 检查一下 UnobtrusiveJavaScriptEnabled是真的。
  • 添加引用 作为达林的jquery.unobtrusive-ajax.js 谏。

不幸的是,它对你没有帮助,因为你将UnobtrusiveJavaScriptEnabled设置为false,但可以帮助某人。

答案 3 :(得分:1)

迟到但正确。确保按顺序引用unobtrusive-ajax.js文件以及MicrosoftAjax.js和MicrosoftMvcAjax.js文件。 作品

答案 4 :(得分:1)

请注意,如果您像我一样使用Asp.Net模板,它会将文件捆绑到bundles / jqueryval。 所以你必须添加

@Scripts.Render("~/bundles/jqueryval")

到页面。

答案 5 :(得分:0)

除了检查是否引用.js之外,还要检查是否没有呈现其他表单标记。在我的情况下,我在母版页上有另一个表单标记,其默认操作导致整个页面重新加载。