Charger dynamiquement des Vues Partielles

Comment puis-je charger dynamiquement une Vue Partielle?

Je veux dire que j'ai ce point de vue, disons ListProducts, là, j'ai sélectionner certains dropdownlists avec des produits, etc, et avec les valeurs sélectionnées à partir de ceux que je veux remplir une vue partielle, ce qui serait dans une div qui était invisible, mais après onchange() événement deviendra visible et avec les données de la spécifique les éléments sélectionnés.

InformationsquelleAutor Hélder Gonçalves | 2012-07-03
  1. 25

    Utilisation de jQuery $.load() avec l'action d'un contrôleur qui retourne une vue partielle.

    Par exemple:

    HTML

    <script type="text/javascript">
$(document).ready(function()
{
    $("#yourselect").onchange(function()
    {
        //Home is your controller, Index is your action name
        $("#yourdiv").load("@Url.Action("Index","Home")", { 'id' : '123' }, 
                                        function (response, status, xhr)
        {
            if (status == "error")
            {
                alert("An error occurred while loading the results.");
            }
        });
    });
});
</script>

<div id="yourdiv">
</div>

    Contrôleur

    public virtual ActionResult Index(string id)
{
    var myModel = GetSomeData();
    return Partial(myModel);
}

    Vue

    @model IEnumerable<YourObjects>

@if (Model == null || Model.Count() == 0)
{
    <p>No results found</p>
}
else
{
    <ul>
    @foreach (YourObjects myobject in Model)
    {
        <li>@myObject.Name</li>
    }
    </ul>
}
    • Ty, son travail.. je suis tout à fait de la difficulté à passer quelques données jeter l' @Url.Action(), quelle est la syntaxe pour passer des paramètres maintenant stil l'aide que la charge de jQuery
    InformationsquelleAutor Chris S
  2. 4

    Vous pouvez le faire en suivant ces étapes. Dans votre contrôleur, vous renvoyer une vue partielle. 

        [HttpGet]
    public virtual ActionResult LoadPartialViewDynamically()
    {
        var query = _repository.GetQuery();
        return PartialView("_PartialViewName", query);
    }

    puis dans la vue que vous avez un div vide

    <div id="partialgoeshere"></div>

    puis de charger la vue partielle à l'aide de jQuery:

    function LoadPartialView() {

    $.get("@Url.Action(MVC.ControllerName.LoadPartialViewDynamically())", { null }, function (data) {

        $("#partialgoeshere").empty();
        $("#partialgoeshere").html(data);

    });

}

    Espère que cette aide

    InformationsquelleAutor lopezbertoni
  3. 1

    Je crois que vous pouvez faire quelque chose comme cet exemple, tout en utilisant le changement de l'événement sur votre déroulant à la place. C'est un jQuery simple appel, vous pouvez en savoir plus sur la jQuery site web.

    $("#dropdown").change(function() {

    $("#destination").load("/Products/GetProduct", $(this).val(),
       function(result) {
         //do what you need to do

       });
});

    Le premier paramètre est la vue que vous avez besoin de les appeler pour plus de détails.

    Le deuxième paramètre est la valeur sélectionnée.

    Le troisième paramètre de la $.charge fonction est la fonction de callback, où vous pouvez analyser le résultat et de faire ce que vous devez faire.

    Si vous avez un choix multiple $(this).val() qui vous donnera un tableau avec les options sélectionnées.

    Si vous voulez retourner un objet Json, vous pouvez suivre cet exemple.

    InformationsquelleAutor abx78
  4. 0

    Utiliser Ajax 🙂

    http://api.jquery.com/jQuery.ajax/

    Exemple:

    $.post(window.gRootPath + "Customer/PartialView", { Question: questionId})
.done(function (data) {
    $('#partialDiv').html(data.responceText);
});
    InformationsquelleAutor Igor Shubin
  5. 0

    Vous pouvez utiliser ajax pour appeler l'action, puis il suffit d'insérer la chaîne html à l'aide de jQuery à la page où vous souhaitez qu'il apparaisse:

    Côté serveur:

    Render vue partielle de la chaîne
    Rend la vue partielle sur le serveur de la chaîne html, utile lorsque vous devez ajouter vue partielle de ASP.NET MVC page via AJAX.

    Côté Client:

    $('#yourDdl').change(function()
{
  $.get('/InsertPartialViewUsingAjax', function (data) 
  {
     $('#container').html(data);
  });
});
    InformationsquelleAutor formatc
  6. 0

    L'article suivant vous indique comment le faire avec un minimum de javascript. Fondamentalement, vous renvoyer le code html au lieu de JSON pour votre réponse de l'objet.

    https://www.simple-talk.com/content/article.aspx?article=2118

    InformationsquelleAutor Kara Kartal