web-dev-qa-db-fra.com

Charger une vue partielle en fonction de la liste déroulante dans MVC3

Im essayant de créer un à partir d'asp.net mvc3.

J'ai une liste déroulante avec quelques options. Ce que je veux, c'est que différentes vues partielles soient injectées dans la page, selon la sélection dans la liste déroulante.

Mais. Je ne veux pas que cela repose sur une action de soumission. Il doit fonctionner de telle sorte que la vue partielle soit chargée dès que vous sélectionnez dans la liste de sélection.

J'ai ce code:

@using (Ajax.BeginForm("Create_AddEntity", new AjaxOptions { 
    UpdateTargetId = "entity_attributes", 
    InsertionMode = InsertionMode.Replace
    }
))
{
        <div class="editor-label">
            @Html.Label("Type")
        </div>
        <div class="editor-field">
            @Html.DropDownList("EntityTypeList", (SelectList)ViewData["Types"])
        </div>

        <div id="entity_attributes"></div>
        <p>
            <input type="submit" value="Create" />
        </p>
}

Mais je ne peux pas comprendre comment déclencher cette charge de vue partielle lorsque la sélection de la liste déroulante change.

Ce point est que le formulaire est différent pour les différents "types d'entités". il sera donc chargé une vue partielle différente, selon la sélection déroulante.

Quelqu'un a des conseils?

asp.net-mvc-3razorasp.net-ajax
16
Mikkel Nielsen

Disons que ce qui suit est votre avis que vous souhaitez insérer votre partiel.

<html>
    <head><head>
    <body>
        <!-- Some stuff here. Dropdown and so on-->
        ....

        <!-- Place where you will insert your partial -->
        <div id="partialPlaceHolder" style="display:none;"> </div>
    </body>

</html>

Sur l'événement de changement de votre liste déroulante, obtenez un appel partiel via jquery ajax et chargez-le sur place holder.

/* This is change event for your dropdownlist */
$('#myDropDown').change( function() {

     /* Get the selected value of dropdownlist */
     var selectedID = $(this).val();

     /* Request the partial view with .get request. */
     $.get('/Controller/MyAction/' + selectedID , function(data) {

         /* data is the pure html returned from action method, load it to your page */
         $('#partialPlaceHolder').html(data);
         /* little fade in effect */
         $('#partialPlaceHolder').fadeIn('fast');
     });

});

Et dans votre action de contrôleur qui est/Controller/MyActionin au-dessus de jquery, retournez votre vue partielle.

//
// GET: /Controller/MyAction/{id}

public ActionResult MyAction(int id)
{
   var partialViewModel = new PartialViewModel();
   // TODO: Populate the model (viewmodel) here using the id

   return PartialView("_MyPartial", partialViewModel );
}
37
emre nevayeshirazi

ajoutez le code suivant à l'en-tête du projet (mise en page). Ajoutez "combobox" à n'importe quelle zone de liste déroulante (zone de sélection) dont vous souhaitez déclencher le formulaire qui l'entoure.

$(document).ready(function () {
    $('.formcombo').change(function () {
        /* submit the parent form */
        $(this).parents("form").submit();
    });
});
0
JC Lizard