为什么Ajax.BeginForm取代我的整个页面？ [英] Why does Ajax.BeginForm replace my whole page?

问题描述

上下文：Asp.Net MVC3 W /剃刀

我试图把一个登录表单上剃刀布局（原母版页），这样，当了用户时间，他/她可以提示，而不被重定向（如RallyDev）登录。所以，我创建了带有指向该持有Ajax表单里面的登录控件的div的UpdateTargetId的Ajax.BeginForm里面的一切必要的东西（用户名等）的部分_LogOn.cshtml。表单发送回AccountsController.RefreshLogOn动作，但很明显，包含页面可能已经从不同的控制器渲染。该RefreshLogOn操作返回PartialView（_登录）。在任何情况下，我的期望/希望的是，只有这个DIV中的控件被替换。正在发生的事情，而不是在于我的页面位置更改/会计/ RefreshLogon，整个页面由部分代替。是否有另一种方法，我应该考虑？

下面是有关的code：

_LogOn.cshtml

  @ {
        使用（Ajax.BeginForm（RefreshLogOn，帐户，
            新AjaxOptions {
                      的onSuccess =logonSucceeded
                      onFailure处=logonFailed
                      列举HTTPMethod =邮报，
                      UpdateTargetId =用户信息}，
            新{@id =刷新}））
        {
        @ Html.AntiForgeryToken（）       ＆LT; D​​IV ID =用户信息＆GT;
                ＆LT; P＆GT;您的会话已过期＆LT; / P＆GT;
            ＆LT; D​​IV CLASS =错误＆GT; @ Html.ValidationSummary（）＆LT; / DIV＆GT;
            ＆LT;表＆gt;
                ＆所述; TR＆GT;
                    ＆LT; TD＆GT;用户名：​​其中; / TD＆GT;
                    ＆LT; TD＆GT; @ Html.TextBoxFor（型号=＆GT; model.UserName）LT; / TD＆GT;
                ＆LT; / TR＆GT;
                ＆所述; TR＆GT;
                    ＆LT; TD＆GT;密码：LT; / TD＆GT;
                    ＆LT; TD＆GT; @ Html.PasswordFor（型号=＆GT; model.Password）LT; / TD＆GT;
                ＆LT; / TR＆GT;
                ＆所述; TR＆GT;
                    ＆LT; TD＆GT;记住：LT; / TD＆GT;
                    ＆LT; TD＆GT; @ Html.CheckBoxFor（型号=＆GT; model.RememberMe）LT; / TD＆GT;
                ＆LT; / TR＆GT;            ＆LT; /表＆gt;
        ＆LT; / DIV＆GT;
            }
        }
 

AccountsController

 公众的ActionResult RefreshLogOn（LogOnModel模型）
{
    如果（ModelState.IsValid）
    {
        如果（MembershipService.ValidateUser（model.UserName，model.Password））
        {
            ...省略的内容...            返回PartialView（_登录）;
        }        ModelState.AddModelError（，ErrorMessages.IncorrectUsernameOrPassword）;
    }    返回PartialView（_登录，模型）;
}
 

Ajax.BeginForm - > form标签生成：

 ＆LT;形式的行动=/会计/ RefreshLogOnID =刷新方法=后
    的onclick =Sys.Mvc.AsyncForm.handleClick（这一点，新Sys.UI.DomEvent（事件））;
    的onsubmit =Sys.Mvc.AsyncForm.handleSubmit（这一点，新Sys.UI.DomEvent（事件），
    {
    insertionMode：Sys.Mvc.InsertionMode.replace，
    列举HTTPMethod：放大器;＃39;邮政和放大器;＃39 ;,
    updateTargetId：放大器;＃39;用户信息和放大器;＃39 ;,
    onFailure处：Function.createDelegate（这一点，logonFailed）
    的onSuccess：Function.createDelegate（这一点，logonSucceeded）
    }）;＆GT;
 

解决方案

阿贾克斯。*在ASP.NET MVC 3使用jQuery的不显眼助手所以请确保您具有引用在 jquery.unobtrusive-ajax.js 脚本在您的视图。你也可以使用萤火来看看有什么场景下发生的，为什么形式不发送AJAX请求。

另外， UpdateTargetId =形式看似可疑尤其是当你的窗体有刷新 ID： @id =刷新。是否有您的DOM里面的一些其他元素与 ID =形式？也许你的意思 UpdateTargetId =刷新？

Context: Asp.Net MVC3 w/Razor

I am trying to put a login form on a Razor layout (formerly master page) so that, when the user times out, s/he can be prompted to login without being redirected (as in RallyDev). So, I have created a partial _LogOn.cshtml with all the requisite stuff (username, etc.) inside an Ajax.BeginForm with an UpdateTargetId that points to a div that holds the logon controls inside the ajax form. The form posts back to the AccountsController.RefreshLogOn action, but obviously, the containing page may have been rendered from a different controller. The RefreshLogOn action returns PartialView("_LogOn"). In any case, my expectation/desire is that only the controls inside this div are replaced. What is happening instead is that my page location changes to /Accounts/RefreshLogon and the whole page is replaced by the partial. Is there another approach I should be taking?

Here's the relevant code:

_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 --> form tag generated:

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

解决方案

Ajax.* helpers in ASP.NET MVC 3 use unobtrusive jquery so make sure that you have referenced the jquery.unobtrusive-ajax.js script in your view. Also you could use FireBug to see what's happening under the scenes and why the form doesn't send an AJAX request.

Also the UpdateTargetId = "form" seems suspicious especially when your form has the refresh id: @id = "refresh". Is there some other element inside your DOM with id="form"? Maybe you meant UpdateTargetId = "refresh"?

这篇关于为什么Ajax.BeginForm取代我的整个页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！