MVC4 Ajax.BeginForm ne remplace pas UpdateTargetId

Il y a tellement de sujets sur DONC sur les problèmes rencontrés avec l'Ajax.BeginForm pas correctement la mise à jour de l'élément cible, avec le retour partiel de la vue:
mvc4 ajax jour même page
ASP.NET MVC 4 - Ajax.BeginForm et html5
MVC 4 (rasoir) - Contrôleur est de retour une partialview mais toute la page est en cours de mise à jour
MVC 4 Ajax n'est pas la mise à jour de la PartialView l'intérieur de la page
Cependant, tous ces éléments sont des a répondu par l'écriture manuelle de l'ajax de jQuery, ou dont un manquant fichier javascript.

  @using (Ajax.BeginForm("PostcardDetails", new AjaxOptions()
  {
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "details"
  }))
  {
    <div id="PostcardSearchResults">
      @{Html.RenderAction("PostcardSearchResults", Model);}
    </div>
  }
  <div id="details">
  </div>

Pertinentes du code de contrôleur:

[AcceptVerbs(HttpVerbs.Post | HttpVerbs.Get)]
public ActionResult PostcardSearchResults(PostcardSearchFilter filter)
{
        PostcardSearchResults model = new PostcardSearchResults(filter);
        return PartialView("_PostcardSearchResults", model);
}

Dans ma présentation, je suis le référencement de ces fichiers jQuery. De plus, j'ai vérifié que la page est sortie le bon chemin, et qu'il trouve les bons fichiers. J'ai essayé de commutation de la commande de unobtrusive-ajax.min.js et validate.min.jssans succès.

<script type="text/javascript" src="@Url.Content("~/Scripts/globalize.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.9.1.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.10.0.custom.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>

En outre, dans mon site web racine.config, et le web.config de mon point de Vue dossier, j'ai inclus:

<add key="webpages:Version" value="2.0.0.0"/>
<add key="PreserveLoginUrl" value="true"/>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

Je suis à une perte pour d'autre endroit pour chercher. Il n'y a pas des erreurs javascript étant jetés, et que le contrôleur est bien frappé, retourner un PartialViewResult. L'élément de Formulaire dans le code HTML de remplissage de toutes les bonnes data- attributs.

source d'informationauteur drovani

  1. 11

    Il y a un problème avec jquery.discrète-ajax.min et JQuery 1.9 parce que JQuery 1.9 ne prend pas en charge le live() la méthode tout plus. Donc, vous devriez utiliser le JQuery migrate plug-in, et la référence à JQuery migrate js.

  2. 4

    Assurez-vous d'inclure les unobtrusive-ajax.js à la page, qui vous avez placé votre ajax formulaire.

    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
  3. 2

    J'ai eu ce problème, je viens d'installer la dernière discrète paquet de NuGet et résolu le problème

    H> Install-Package Microsoft.jQuery.Discrète.Ajax

    Aurez besoin JQ 1.8+

  4. 1

    J'ai eu des problèmes similaires à vous - j'ai eu tous mes scripts fournis et chargement correctement, et avait tout le code correctement mis en œuvre. J'ai vérifié le gestionnaire de package pour voir si tous les scripts nécessaires pour être mis à jour et jQuery et jquery.discrète-ajax n'. jQuery est passé de 1.9 1.9.1. Quand j'ai reconstruit ma solution la cible DIV a été mis à jour avec succès. Essayez et mise à jour de tous les JS dans votre solution, elle peut travailler.

  5. 1

    Suivantes doit être sur une page qui utilise ajax.

    @section Script {
    @Scripts.Render("~/bundles/jqueryval")
}
  6. 1

    Je ne sais pas si quelqu'un d'autre va s'exécuter dans le présent, mais dans mon cas, il ne semblait pas être mise à jour. J'ai été la construction d'un simple formulaire d'édition où vous sélectionnez l'élément que vous souhaitez modifier à partir d'une liste déroulante, cliquez sur un bouton, et AJAX chargement d'un formulaire d'édition de l'élément sélectionné.

    Cela a fonctionné la première fois, mais après avoir changé ma sélection dans la liste déroulante et en cliquant sur le bouton, aucun des valeurs d'un formulaire changé, même si j'ai vérifié mon code côté serveur était en train de charger le nouvel élément dans le modèle de vue. C'est ce que Remplacer n'a pas de travail. Après avoir marché à travers jquery.unobtrisive-ajax.js, j'ai trouvé qu'il était de remplacer le contenu de mon élément cible, avec le même point de vue balisage il avait déjà, qui ne correspondaient pas au modèle qui a été passé à la vue!

    C'est quand j'ai réalisé, c'était la ModelState qui me. La deuxième fois, j'ai cliqué sur le bouton "load", il a soumis mon déroulante de sélection, mais aussi mes rempli le formulaire de modification. Toutes les valeurs dans le formulaire d'édition ont été ajoutés à ModelState (comme vous vous en doutiez). Mon contrôleur de code, remplacé ensuite soumis modèle de vue (que le modèle de classeur créé à partir de la modifier les valeurs d'un formulaire) avec le modèle de vue de la sélection déroulante valeur et l'a transmis à la vue partielle. Cependant, la vue partielle utilise un tas de Html.[X]For méthodes d'aide. Ces ignorer la mise à jour du modèle de vue et tirer leurs valeurs directement à partir de la ModelState. Par exemple:

    @Html.DisplayFor(m => m.Name)
@Model.Name

    affiche deux valeurs différentes pour le Nom; l'ancien affichage de l'soumis le Nom et le dernier, le Nom mis à jour. C'est le mécanisme qui permet MVC souviens de l'utilisateur de votre formulaire d'entrées après une (côté serveur) erreur de validation. Dans ce cas, parce que c'est une partielle de chargement de la page et je suis juste jeter toutes les valeurs soumises, je n'ai pas besoin de le ModelState valeurs donc je viens de l'appeler ModelState.Clear() avant de retourner mon point de vue, pour la mise à jour du modèle de vue.

        public ActionResult GetItemEditForm(EditItemsViewModel editItemsVM)
    {
        if (editItemsVM.SelectedItemID != null)
        {
            //Load the selected item
            ItemsModelManager.GetEditItemsVM(editItemsVM);

            //Clear the submitted form values
            ModelState.Clear();
        }

        return PartialView("_ItemsEditor", editItemsVM);
    }
  7. 0

    Pour ceux qui ont besoin d'une explication un peu plus....

    Tapez ceci dans la Console du Gestionnaire de Package H> Install-Package jQuery.Migrer

    De référence dans votre partialview:

    script src="~/Scripts/jquery.unobtrusive-ajax.js">

    Codage heureux tout le monde.

  8. 0

    Utilisateur xr280xr de réponse, y compris pour les

    ModelState.Clear();

    a fonctionné pour moi. L'application que je suis en train de travailler avec est sur un vieux jQ (1.7.x) donc migrer ne fonctionnait pas dans notre situation. De compensation le modèle de l'état dans le contrôleur a fait exactement ce que nous attendions BeginForm à faire.

  9. 0

    Vérifier La Page principale OU de Votre Page Scripts de Référence sur
    jquery.unobtrusive-ajax.js
    si pas d'ajouter une Référence à propos de ce js :jquery.unobtrusive-ajax.js

  10. 0

    Le live() la méthode est déconseillée dans la version jQuery 1.7, et retiré dans la version 1.9. Utiliser le() la méthode la place.Pour plus d'informations consulter: http://www.w3schools.com/jquery/event_live.asp

  11. 0

    Wow, il y a beaucoup de réponses ici. Mon problème était dû à un bootstrap panneau. Elle a été la création d'un "imbriqués". J'ai enlevé le panneau de balisage et juste utilisé un simple vieux div et cela a fonctionné. Je pense que le UpdateTargetId doit être un parent direct de l'AJAX formulaire.

    Voici le code html illustrant le problème.

    <div class="panel panel-default" id="notes-form">
  <div class="panel-body">
    @using (Ajax.BeginForm("EditNote", new { id = Model.Id }, new AjaxOptions { UpdateTargetId = "notes-form" }, htmlAttributes: new { @class = "form-horizontal" }))
    {
    }
  </div>
</div>
  12. 0

    Tout d'abord, installer " Microsoft.JQuery.Discrète.Ajax " de NuGet Manager et plus tard "~/Scripts/jquery.discrète" dans "BundleConfig" après dont "jquery-{version}.js"; qui ressemble à quelque chose de similaire à ceci:

    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js",
                "~/Scripts/jquery.unobtrusive*));