MVC 3 Razor @ Html.ValidationMessageFor ne fonctionne pas en chargement partiel via jquery.load ()
J'ai mis en place un petit exemple ici juste pour reproduire le problème.
J'ai fortement typé vue partielle _Name.cshtml:
@model ValidationInPartial.ViewModels.MyViewModel
<h2>@ViewBag.Message</h2>
<fieldset>
<legend>Name</legend>
<div class="editor-label">
@Html.LabelFor(model => model.MyName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.MyName)
@Html.ValidationMessageFor(model => model.MyName)
</div>
<a href="#" id="reload">Reload Name</a>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
<script type="text/javascript">
$(document).ready(function () {
$("#reload").click(function () {
$("#divName").load("Home/NameReload");
});
});
</script>
qui est initialement chargé et affiché à l'intérieur de l'Index principal.cshtml
<div id="divForm">
@using (Html.BeginForm()) {
<div id="divName">
@Html.Partial("_Name")
</div>
}
</div>
Le domaine Monnom est nécessaire et de validation est mis en œuvre par attribut Obligatoire dans MyViewModel
namespace ValidationInPartial.ViewModels
{
public class MyViewModel
{
[Required(ErrorMessage = "Please enter a Name.")]
public string MyName { get; set; }
}
}
Après le chargement de la page la première fois, si vous cliquez sur le bouton Créer en laissant le champ vide, le message de validation "s'il vous Plaît entrer un Nom." affiche en regard du champ et le champ lui-même devient rose, qui est le comportement attendu.
Maintenant, en cliquant sur "Recharger" Nom de lien, qui fait un appel ajax (jquery.charge(...)), le partiel est rechargé, voici le code du contrôleur:
public PartialViewResult NameReload()
{
MyViewModel myViewModel = new MyViewModel();
ViewBag.Message = "Name Reloaded";
return PartialView("_Name", myViewModel);
}
Cette fois, si vous cliquez sur le bouton Créer en laissant le champ vide, le message de validation n'apparaît pas en regard du champ, bien que le champ devient rose.
Il s'avère que lorsque le rechargement de la partielle de l' @Html.ValidationMessageFor ne rend pas le message de validation, comme la première fois.
Voici les fichiers jquery-je utiliser
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
Je me demande si c'est un bug dans la façon dont le moteur de Rasoir rend le @Html.ValidationMessageFor ou est-ce un problème avec jquery?
Une idée de pourquoi cela se produit?
J'ai aussi lu quelque part que l'appel ajax perd tous les scripts de la page, en fait j'ai garder tout code javascript à l'intérieur de la partielle de sorte qu'ils peuvent être affichés et utilisés de nouveau.
En attendant, j'ai trouvé une solution de contournement qui est manuellement rendre dans la partielle de ce qui était supposé être rendu par @Html.ValidationMessageFor qui est:
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="MyName"></span>
Cependant, cette solution signifie que si l'on change le type de validation ou tout simplement le message de validation à l'intérieur de l'attribut Requis dans le ViewModel, nous avons besoin de modifier ce codée en dur morceau de code html dans la vue.
source d'informationauteur Roberto D
Vous devez vous connecter pour publier un commentaire.
@NickBork a une grande réponse ici. La clé est que ASP.NET's MVC moteur de rendu n'a pas de sortie le script de validation si il ne pense pas qu'il y est une forme. L'exemple donné hacks acheter les mettre dans un formulaire et puis la sélection d'une section intérieure de HTML à partir de a été a été retourné, essentiellement à jeter l'emballage extérieur de la forme à l'écart.
Il existe une autre méthode de sorte que vous pouvez juste obtenir votre point de vue:
Avec cette méthode, il n'y aura pas réellement la FORME de code de sortie, mais la validation de balisage sera là.
Grâce,
Jean
Validation de balisage (balises span, personnalisé attributs de champ, etc) ne sont pas rendus, à moins que votre champs sont contenus à l'intérieur d'une FORME. La validation du plugin lui-même ne fonctionne pas avec des éléments en dehors d'un formulaire.
Quand ASP.NET rend votre Vue Partielle les contrôles ne sont pas dans une forme et donc de ne pas obtenir les éléments de rendu.
Lorsque vous chargez vous êtes partielle, du contenu, vous aurez besoin d'analyser le code HTML à l'aide d'un sélecteur jQuery.
Dans mon exemple ci-dessous j'ai un TBODY sur la Vue parent de la page qui contient des lignes. Quand j'ai besoin d'ajouter des lignes, je fais un appel à une opinion qui avait une forme, table, tbody et collection de lignes.
Remarque que je suis en utilisant un sélecteur jQuery pour sélectionner les lignes qui sont à l'intérieur de la Vue/PartialView qui sont chargés par l'utilisation d'AJAX:
Le reste de l'emballage juste ajoute les lignes de l'AJAX Vue/PartialView à l'appel des parents
tbody
:Un couple d'autres notes, après le validateur plugin a été exécuté sur une forme, il ne peut pas être appelé de nouveau sans avoir à rajouter (voir jquery.valider.discret, pas de travail dynamique injecté éléments)
Pour résoudre ce problème, j'ai d'abord appeler la méthode suivante pour supprimer tous les validateurs:
Je puis actualisez les validateurs en utilisant les éléments suivants:
Je ne me souviens pas où j'ai trouvé la solution. La raison en est parce que vous êtes le chargement d'un PartialView dans une Vue qui a déjà été analysé par le jquery.programme de validation.discrète de la bibliothèque. Vous avez besoin de l'analyser à nouveau discrète bibliothèque