web-dev-qa-db-fra.com

Pourquoi Ajax.BeginForm remplace-t-il toute ma page?

Contexte: Asp.Net MVC3 w/Razor

J'essaie de mettre un formulaire de connexion sur une mise en page Razor (anciennement une page maître) afin que, lorsque l'utilisateur expire, il puisse être invité à se connecter sans être redirigé (comme dans RallyDev). J'ai donc créé un _LogOn.cshtml partiel avec tous les éléments requis (nom d'utilisateur, etc.) dans un Ajax.BeginForm avec un UpdateTargetId qui pointe vers un div qui contient les contrôles de connexion dans le formulaire ajax. Le formulaire est publié dans l'action AccountsController.RefreshLogOn, mais il est évident que la page qui le contient a peut-être été rendue à partir d'un autre contrôleur. L'action RefreshLogOn renvoie PartialView ("_ LogOn"). Dans tous les cas, mon attente/désir est que seules les commandes de cette division soient remplacées. Au lieu de cela, l’emplacement de la page devient/Comptes/RefreshLogon et la page entière est remplacée par la partie. Y a-t-il une autre approche que je devrais prendre?

Voici le code pertinent:

_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 -> balise de formulaire générée:

<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) 
    });">
jqueryasp.net-mvc-3
34
sydneyos

Les assistants Ajax.* dans ASP.NET MVC 3 utilisent une requête discrète, assurez-vous que vous avez référencé le script jquery.unobtrusive-ajax.js dans votre vue. Vous pouvez également utiliser FireBug pour voir ce qui se passe dans les scènes et savoir pourquoi le formulaire n'envoie pas de requête AJAX.

De plus, le UpdateTargetId = "form" semble suspect, en particulier lorsque votre formulaire a l'identifiant refresh: @id = "refresh". Existe-t-il un autre élément dans votre DOM avec id="form"? Peut-être que vous vouliez dire UpdateTargetId = "refresh"?

38
Darin Dimitrov

Note: mon problème était d'abord, j'ai référé mal le fichier de script ajax jquery.validate.unobtrusive.min.js au lieu de jquery.unobtrusive-ajax.js et la dernière version de jquery n'a pas fonctionné, seulementjquery-1.7.1.min.js a fonctionné pour moi.

j'étais essayant pour retourner le contenu après une entrée réussie 

alors voici l'ordre:

<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>

Message de Darin et Richard Everett aidé. l'espoir aide.

6
stom

J'ai eu le même problème et la solution était:

  • Vérifiez que UnobtrusiveJavaScriptEnabled est vrai.
  • Ajouter une référence à Jquery.unobtrusive-ajax.js comme Darin Conseillé.

Malheureusement, cela ne vous aidera pas car vous définissez UnobtrusiveJavaScriptEnabled sur false, mais vous pouvez aider quelqu'un.

3
Ivan Sokalskiy

En retard mais correct. Veillez à référencer le fichier unobtrusive-ajax.js ainsi que les fichiers MicrosoftAjax.js et MicrosoftMvcAjax.js dans cet ordre . Works.

1
dis.iz.peez

Remarquez que si vous utilisez le modèle Asp.Net comme je le fais, il regroupe le fichier en bundles/jqueryval . Vous devez donc ajouter 

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

à la page.

1
Ronen Festinger

En plus de vérifier si le fichier .js est référencé, vérifiez également qu'aucune autre balise de formulaire n'est en cours de rendu. Dans mon cas, j'avais une autre balise de formulaire sur la page principale avec l'action par défaut qui provoquait le rechargement de la page entière.

0
bubbassauro