Modifier le contenu de la grille en fonction de la valeur de la liste déroulante

Question

Je souhaite modifier la date de la grille lorsque l'utilisateur modifie les valeurs déroulantes avec ajax. c'est mon code C#:

public ActionResult Index(string name) 
    { 
     ViewBag.Drop = db.Students.Select(r => r.Fname); 
     var model = from r in db.Students 
        where r.Fname == name 
        select r; 

     return View(model); 
    } 

et c'est un fichier cshtml:

@using (Ajax.BeginForm("Index", new AjaxOptions 
    { 
     UpdateTargetId = "grid", 

     HttpMethod = "GET" 
    } 
     )) 
    { 

     @Html.DropDownList("name", new SelectList(ViewBag.Drop)); 
     <input type = "submit" value = "submit" /> 
    } 
    <div id= "grid"> 

    </div> 

mon problème est que lorsque je change les valeurs déroulantes toutes vues sont présentées à nouveau. Je ne veux pas voir une nouvelle vue, je veux juste changer les données de la grille. Comment puis je faire ça?

Answer 1

Avez-vous une méthode d'action qui renvoie uniquement les données de la grille? sinon, créez un

public ActionResult GridData(string name) 
{ 
    var gridItems=repo.GetCustomers(name).ToList(); 
    //the above method can be replaced by your 
    // actual method which returns the data for grid 

    return View(model); 
} 

J'assumuing simplement vous avez un modèle client avec des propriétés appelées FirstName et LastName et que vous voulez afficher une liste des clients dans la grille. Vous pouvez les remplacer par vos noms de classe et propriétés réels.

Assurez-vous que vous avez une vue appelée GridData.cshtml qui rend le balisage HTML pour votre grille

@model IEnumerable<YourNameSpace.Customer> 
@{ 
    Layout=null; 
} 
<table> 
@foreach(var item in Model) 
{ 
    <tr><td>item.FirstName</td><td>item.LastName</td></td> 
} 

Je voudrais écrire simplement le code (et propre) comme ci-dessous au lieu d'utiliser Ajax.BeginForm

@Html.DropDownList("name", new SelectList(ViewBag.Drop)); 
<div id= "grid"></grid> 

<script type="text/javascript"> 
$(function(){ 

    $("select[name='name']").change(function(){ 
     var url="@Url.Action("GridData","YourControllerName")"+"?name="+$(this).val(); 
     $("#grid").load(url); 
    }); 

});  
</script>