Kendo, comment effectuer la pagination du serveur Grid à l'aide de l'assistant mvc4

StackOverflow https://stackoverflow.com//questions/12714872

  •  13-12-2019
  •  | 
  •  

Question

J'utilise mvc4.Sur une de mes pages, il y a Kendo Grid.Je veux afficher 5 lignes par page.Je n'ai aucun problème à le faire en utilisant du javascript pur, cependant, si j'utilise mvc helper.Je me suis perdu, je n'ai trouvé aucun échantillon en ligne.

voici mon code javascript.

        <script language="javascript" type="text/javascript">

            $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        type: "json",
                        serverPaging: true,
                        pageSize: 5,
                        transport: { read: { url: "Products/GetAll", dataType: "json"} },
                        schema: { data: "Products", total: "TotalCount" }
                    },
                    height: 400,
                    pageable: true,
                    columns: [
                            { field: "ProductId", title: "ProductId" },
                            { field: "ProductType", title: "ProductType" },
                            { field: "Name", title: "Name" },
                            { field: "Created", title: "Created" }
                        ],
                    dataBound: function () {
                        this.expandRow(this.tbody.find("tr.k-master-row").first());
                    }
                });
            });

maintenant, si j'utilise mvc helper

            @(Html.Kendo().Grid(Model)
                .Name("Grid")  //please help me to finish the rest

Mise à jour:

Ajout du code d'action.

    [HttpPost]
    public ActionResult GetAll([DataSourceRequest]DataSourceRequest request, int id)
    {
        var products= ProductService.GetAll(id);

        return Json(products.ToDataSourceResult(request));
    }

Méthode GetAll dans la couche de service :

    public IQueryable<Product> GetAll(int id)
    {
        var products= ProductRepository.Get(p => p.Id== id && p.IsActive == true, null, "ProductionYear")
                    .OrderBy(o => o.Name); //.ToList();

        return Product.Select(p => new ProductVM()
        {
            Name = p.Name,
            ProductionYear= p.ProductionYear.Year.ToString()
            Id = p.Id
        }).AsQueryable();
    }

maintenant, si j'exécute l'application, j'obtiendrai l'erreur suivante :

"LINQ to Entities ne reconnaît pas la méthode 'System.String ToString()' et cette méthode ne peut pas être traduite en une expression de magasin."}

dans la méthode GetAll, je commente le "ToList()".Si j'utilise ToList, tout fonctionne.mais j'interrogerai toutes les lignes à la place, uniquement les lignes dont j'avais besoin pour cette page.

Était-ce utile?

La solution

Vous pouvez définir le PageSize à l'intérieur de Méthode DataSource.Vous aurez donc besoin de quelque chose comme :

@(Html.Kendo().Grid(Model)
     .Name("Grid") 
     .DataSource(dataSource => dataSource.Ajax()
                                    .PageSize(5)
                                    .Read(c => c.Action("GetAll", "Products")
                                    .Model(s => s.Id(m => m.Id)))
     .Columns(columns =>
     {
        columns.Bound(m => m.ProductId).Title("ProductId");
        //other colums
     })
    .Events(g => g.DataBound("somefunction"))
    .Pageable(true))

Vous pouvez trouver plus d'informations sur la grille KendoUI Documentation sur les wrappers Asp.NET MVC.

Autres conseils

Si vous êtes pas utilisant les wrappers ASP.NET MVC de Kendo et utilisant directement les objets JavaScript de Kendo et vous essayez d'effectuer une pagination côté serveur, vous devez alors créer votre source de données comme suit :

var dataSource = {
    "type":"aspnetmvc-ajax",
    "serverSorting": true,
    "serverPaging": true,
    "page": 1,
    "pageSize": 8,
    "schema": {
      "data":"items",
      "total":"count",
      "errors":"errors"
    }
};

Et votre méthode de contrôleur Read ressemblera à ceci :

    public ActionResult List_Read([DataSourceRequest]DataSourceRequest request) {
        try {
            var model = null /* prepare your model object here contain one page of grid data */;

            // using Json.NET here to serialize the model to string matching the
            // schema expected by the data source
            var content = JsonConvert.SerializeObject(new { count = model.Count, items = model.Items }, Formatting.None);

            return Content(content, "application/json");
        }
        catch (Exception exception) {
            // log exception if you need to

            var content = JsonConvert.SerializeObject(new { errors = exception.Message.ToString() }, Formatting.None);

            return Content(content, "application/json");
        }
    }

type, serverSorting et serverPaging sont importants pour s'assurer que la pagination et le tri s'effectuent côté serveur. type doit être aspnetmvc-ajax, sinon les données de la requête ne seront pas reconnues par le classeur de modèles qui a été spécifié par l'attribut [DataSourceRequest] dans la méthode Read.Vous ne pouvez pas omettre cet attribut, sauf si vous souhaitez écrire votre propre modelbinder personnalisé pour analyser les données de requête envoyées par le kendo dataSource, ce qui n'est pas conforme aux conventions de modelbinding utilisées par DefaultModelBinder dans ASP.NET MVC.

L'autre réponse fonctionnera si vous utilisez Kendo UI pour ASP.NET MVC.Si vous n'avez pas besoin de mettre en œuvre votre pagination vous-même.Le Kendo DataSource enverra une page de page et de la page actuelle lors d'une demande.Vous pouvez utiliser cela pour faire la pagination.Il envoie également «prendre» et «sauter» qui rend les choses encore plus faciles (indique LINQ).

l'erreur "Linq aux entités ne reconnaît pas la méthode" system.string tostring () "méthode, et cette méthode ne peut pas être traduite dans une expression de magasin."} est auto-explicite, à gat autour de cela, vous devriez faire quelque chose comme

return Product.**AsEnumerable**.Select(p => new ProductVM()
        {
            Name = p.Name,
            ProductionYear= p.ProductionYear.Year.ToString()
            Id = p.Id });

Utiliser Asenumerable apporte tous les enregistrements de la DB, de manière préférable à utiliser après tout filtrage

products.where(x => x.active = true).AsEnumerable

plutôt alors produits.Seunumérables.Où (x=> x.active= true)

Téléchargez des exemples de kendo, puis décompressez et suivez<your directory>\Kendo UI pour ASP.NET MVC Q1 2013\wrappers\aspnetmvc\Examples\Areas\razor\Views\web\grid\pour l'index de vue et<your directory>\Kendo UI pour ASP.NET MVC Q1 2013\wrappers\aspnetmvc\Examples\Controllerspour IndexController

À votre avis, vous pouvez également vouloir .serverOperation (vrai) comme ci-dessous pour éviter les erreurs pendant la sérialisation ou la désérialisation à l'aide du JSON JavascriptSerializer.La longueur de la chaîne dépasse la valeur définie sur la propriété maxJsonLength.Si vous avez du Big Data à récupérer

@(Html.Kendo().Grid(<yourmodel>)
    .Name("Grid")
    .Columns(columns =>
       ...
    })

        .Filterable()
        .Pageable()

        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(8)
            .ServerOperation(true) )

            .Model(model =>
            {
                model.Id(p => p.Id);
                ...
            })
        )
    )

également dans le contrôleur dans ActionResult Products_Read, considérez

  DataSourceResult result = GetProducts().ToDataSourceResult(request,  o => new { Id = o.Id, ... } );
  return Json(result , JsonRequestBehavior.AllowGet);
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top