web-dev-qa-db-fra.com

Charger dynamiquement des vues partielles

Comment puis-je charger dynamiquement une vue partielle?

Je veux dire que j'ai cette vue, disons ListProducts, là je sélectionne des listes déroulantes avec des produits, etc., et avec les valeurs sélectionnées parmi celles que je veux remplir, ce qui serait dans une div qui était invisible mais après onchange() événement deviendrait visible et avec les données des éléments sélectionnés spécifiques.

asp.net-mvc-3razor
20
Hélder Gonçalves

Utilisez $ .load () de jQuery avec une action du contrôleur qui renvoie 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>

Manette

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>
}
22
Chris S

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

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

alors dans la vue vous avez une div vide

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

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

function LoadPartialView() {

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

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

    });

}

J'espère que cela t'aides

4
lopezbertoni

Je pense que vous pouvez faire quelque chose comme cet exemple , en utilisant simplement l'événement change dans votre liste déroulante. C'est un simple appel jQuery, vous en trouverez plus sur le site Web jQuery .

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

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

       });
});

Le premier paramètre est la vue à appeler pour plus de détails.

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

Le troisième paramètre de la fonction $ .load est la fonction de rappel, dans laquelle vous pouvez analyser le résultat et faire ce que vous devez faire.

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

Si vous souhaitez uniquement renvoyer un objet Json, vous pouvez suivre cet exemple .

1
abx78

L'article suivant explique comment procéder avec un minimum de javascript. En gros, vous renvoyez du code HTML au lieu de JSON à votre objet de réponse.

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

0
Kara Kartal

Utilisez Ajax :)

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

Exemple:

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

Vous pouvez utiliser ajax pour appeler une action puis insérer une chaîne HTML à l'aide de jQuery sur la page où vous souhaitez qu'elle apparaisse:

Du côté serveur:

Rend la vue partielle en chaîne .__ Rend la vue partielle sur le serveur en chaîne HTML, utile lorsque vous devez ajouter une vue partielle à la page ASP.NET MVC via AJAX.

Côté client:

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