Client de validation de formulaire ne fonctionne pas avec une boîte de dialogue modale en MVC

Je suis l'évolution de créer un formulaire pour devenir une boîte de dialogue modale et jquery Discrète validation des arrêts de travail et ne savez pas comment le résoudre.

Index.cshtml a un lien pour déclencher une boîte de dialogue modale.

<a href="#" id="createCustomer">Create</a>
@section scripts{
<script type="text/javascript">
$('#createCustomer').on('click', function () {
        $.get('/Customer/Create', function (data) {
            $('#modalContainer').html(data);
            $('#myModal').modal({});
        });
    });

Créer.cshtml est une vue partielle.

@model Demo.Web.Models.CustomerVm
@using (Html.BeginForm("Create", "Customer", FormMethod.Post, new { @id="createForm" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Customer</h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

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

Sur le contrôleur, il y a un actionmethod qui renvoie une vue partielle pour créer un formulaire.

public ActionResult Create()
    {
        return PartialView("Create");
    }

vue modal

public class CustomerVm
{
    [Required]
    public int Id { get; set; }
    [Required]
    public string Name { get; set; }        
}

avant je l'ai changé pour être une boîte de dialogue modale .. tout fonctionnait, mais maintenant je ne sais pas comment le résoudre. Comment puis-je faire un travail de validation avec la boîte de dialogue? Évidemment, je ne veux pas réécrire les règles de validation sur un script client .. je veux le faire fonctionner à partir du modèle de vue .. merci.

OriginalL'auteur lawphotog | 2014-05-27

  1. 41

    Parce que la forme n'est pas ajouté à la page lorsque la page se charge, le discret validation sera pas le ramasser. Il y a deux façons de résoudre ce problème.

    1. Inclure le formulaire sur la page lors de la charge initiale. Ce sera la cause de la forme pour être reconnu et de validation. Vous pouvez jeter la vue partielle caché dans un div. Ensuite, votre JavaScript va juste afficher la boîte de dialogue modale.
    2. Inscrire manuellement le formulaire avec le discret après validation de l'ajouter à la page. Quelque chose comme $.validator.unobtrusive.parse("#id-of-the-form");
    grâce cadrell0 .. où dois-je mettre $.programme de validation.discrète.analyser?
    eu travaille maintenant .. merci beaucoup xo
    Yap cela fonctionne parfaitement. Troisième option: Chargement de jquery, la validation et la discrète bibliothèques dans la boîte de dialogue de la page, si l' (séparée) page est en cours de chargement par une boîte de dialogue.
    Vous avez un upvote de moi, qu'il fixe, pour moi aussi. Merci encore.
    Parfait ! Grâce cadrel0 +upvote

    OriginalL'auteur cadrell0

  2. 5

    Si vous êtes le chargement de la boîte de dialogue de façon dynamique il suffit de s'inscrire le discret validation de l'élément contenant l'événement de changement:

    $('#modal-container').change(
    function() {
        $.validator.unobtrusive.parse("#your-form-id");
});
    Merci mais n'est-ce pas accepté la réponse déjà proposé?
    Pas de. La accepté de répondre à dit "comprendre le formulaire sur la page lors de la charge initiale. "Ma suggestion est d'ajouter le changement écouteur d'événement à l'élément qui va contenir la boîte de dialogue lorsqu'il est injecté de façon dynamique. Ce est un meilleur choix si vous êtes de manière dynamique l'injection d'un formulaire à partir d'une vue partielle, qui est ce que la question est à propos.
    Obtenu Grâce...

    OriginalL'auteur ComeIn

  3. 2

    Il suffit d'ajouter les scripts suivants dans votre Créer la vue de forme:

    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" 
    type="text/javascript">
</script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" 
    type="text/javascript">
</script>

    OriginalL'auteur Sam

  4. 1

    Dans partialview de créer une page -> modal-header, modèle-corps, modal-footer et du code javascript dans le <script>your code </script> - ne pas mettre <script>your code</script> dans @section Scripts{} et il va fonctionner.

    OriginalL'auteur Sanjay