Kendo grille mvc avec un viewmodel

Question

J'ai lutté avec cela pendant un certain temps maintenant, je ne suis pas sûr si c'est juste. Mais j'ai un viewmodel avec trois tables et à mon avis j'utilise le modèle de vue. La vue a une grille de kendo qui a besoin des données de l'une des tables dans le modèle de vue, je ne suis pas capable de lier le modèle à la grille. Toutes les pistes sont appréciées.

ViewModel.cs:

public class AppAccountMappingViewModel 
    { 
     public virtual List<AppAccountsExternal> AppAccountsExternal { get; set; } 
     public virtual List<AppAccountsInternal> AppAccountsInternal { get; set; } 
     public virtual AppAccountMapping AppAccountMapping { get; set; } 
    } 

Je besoin d'une liste de AppAccountsInternal pour la lier au réseau.

Controller:

public ActionResult AppAccountsInternal() 
{ 
     var result = new AppAccountMappingViewModel(); 
     result.AppAccountsInternal= _unitofwork.AppAccountsInternal.GetInternalClients(clientid); 
     return View(result); 
} 

Vue:

@model EntityFrameworkClasses.ViewModel.AppAccountMappingViewModel 

@(Html.Kendo().Grid(Model) 
.Name("AppAccountInternalGrid") 
.Columns(columns => 
{ 

    //columns.Bound(p => p.View).Title("View").ClientTemplate("<a href='" + Url.Action("Index","SaveRec") + "' target='_blank'>View</a>").Width(150); 


    columns.Bound(p => p.AppAccountsInternal).Title("Account Internal Name Label1").Width(100); 
    columns.Bound(p => p.Select(x=>x.AccountInternalNameLabel2)).Title("Account Internal Name Label2").Width(130); 

    columns.Bound(p => p.Select(x=>x.AccountInternalNameLabel3)).Title("Account Internal Name Label3").Width(130); 

    columns.Bound(p => p.Select(x=>x.AccountInternalNameLabel4)).Title("Account Internal Name Label4").Width(150); 

    columns.Bound(p => p.Select(x=>x.AccountsInternalID)).Title("Accounts Internal ID").Width(150); 

    columns.Bound(p => p.Select(x=>x.ClientID)).Title("ClientID").Width(150); 

}) 


    .HtmlAttributes(new { style = "height: 550px;" }) 


    .Groupable() 

    .Reorderable(r => r.Columns(true)) 
    .Sortable() 
    .ColumnMenu() 
    .Scrollable(scr => scr.Height(430)) 
    .Filterable() 
.DataSource(dataSource => dataSource 
      .Ajax() 
     .PageSize(50) 
     .ServerOperation(false) 
    .PageSize(20) 


) 

     .Pageable(pageable => pageable 
       .Refresh(true) 
       .Input(true) 
       .Numeric(false) 
      ) 
    .Selectable() 

) 

Je fais une erreur avec le modèle étant binded. Quelle est la bonne façon de le faire? Toute aide est très appréciée. Merci!

Answer 1

Même si vous apportez une charge initiale à la grille via votre modèle, vous devez vous rappeler que la grille lit à partir d'un noeud final appelé ajax (il fait son propre appel). Assigner le modèle à la grille au moment du design aide à la validation de la colonne et d'autres choses.

Vous devez implémenter la méthode de lecture sur la source de données de la grille, puis renvoyer votre collection à la grille dans une méthode de contrôleur distincte.

.DataSource(dataSource => dataSource 
     .Ajax() 
     .PageSize(200) 
     .Read(read => read.Action("GetAppAccountsInternaGridData", "MyController", @Model.clientID)) 
     .ServerOperation(false) 

Votre contrôleur a besoin d'un procédé pour obtenir les données de la grille.

using Kendo.Mvc 
... 
[OutputCache(NoStore = true, Duration = 0)]   
public ActionResult GetAppAccountsInternaGridData(int clientID, [DataSourceRequest] DataSourceRequest request) 
{ 
    var result = new AppAccountMappingViewModel(); 
    result.AppAccountsInternal= _unitofwork.AppAccountsInternal.GetInternalClients(clientid); 
    return View(result); 
    return Json(result.AppAccountsInternal.ToDataSourceResult(request), JsonRequestBehavior.AllowGet); 
} 

Answer 2

Vous souhaitez lier à votre grille les données du champ AppAccountsInternal? Cela peut être accompli facilement mais je ne comprends pas quelles sont les valeurs que vous essayez de montrer en colonnes? Cela ne semble pas valide. Votre classe AppAccountsInternal a-t-elle des champs nommés AccountInternalNameLabel2, AccountInternalNameLabel3 et AccountInternalNameLabel4? Si ce n'est qu'un exemple de code pour votre question et que j'ai bien compris, tout ce que vous avez à faire est de lier le bon modèle à la grille et de définir vos colonnes correctement.

Si, par exemple la classe AppAccountsInternal est de ce type:

public class AppAccountsInternal 
{ 
    public string AppAccountsInternal1 { get; set; } 
    public virtual string AppAccountsInternal2 { get; set; } 
    public virtual string AppAccountsInternal3 { get; set; } 
} 

votre grille devrait avoir c'est des colonnes comme ça. Lié à la liste model.AppAccountsInternal et avoir comme nom le nom du champ.

@(Html.Kendo().Grid(Model.AppAccountsInternal) 
.Name("AppAccountsInternal ") 
.Columns(columns => 
{ 
    columns.Bound(p => p.AppAccountsInternal1).Title("Account Internal Name Label1").Width(100); 
    columns.Bound(p => p.AppAccountsInternal2).Title("Account Internal Name Label2").Width(130); 
    columns.Bound(p => p.AppAccountsInternal3).Title("Account Internal Name Label3").Width(130); 
    // more columns 
}) 

C'est la voie à suivre si vous voulez seulement montrer les données. Si vous voulez des opérations dans vos lignes de grille, le cas change beaucoup. Vous pouvez soumettre des formulaires avec des modèles d'entrée client ou vous pouvez utiliser les opérations KUD CRUD mais c'est pour une autre question.