kendoui-grid篇

kendo确实是个好东西，能够让我们专注于后端开发，无需在效果呈现上花大力气，唯一的缺点，它是收费的，但是我目前还没发现为嘛要掏钱，因为free的也满足了我的需求。

kendoUI For asp.mvc:http://demos.telerik.com/aspnet-mvc/

 <div id="page-wrapper">
     <div class="row">
         <div class="col-lg-12">
             <h1 class="page-header">新闻管理</h1>
         </div>
         <!-- /.col-lg- -->
     </div>
     <!-- /.row -->
     <div class="row">
         <div class="col-lg-12">
             <div class="panel panel-default">
                 <div class="panel-body">
                     <h3>新闻列表</h3>
                     <div class="table-responsive">
                           @(Html.Kendo().Grid<WebSite.Models.NewsViewsModel>()
                                 .Name("grid")
                                 .Columns(columns =>
                                 {
                                     columns.Bound(p => p.Id).Title("序号").Filterable(false);
                                     columns.Bound(p => p.Title).Title("新闻标题").Sortable(false);
                                     columns.Bound(p => p.NewsTypeName).Title("新闻类别").Sortable(false).Filterable(filterable => filterable.UI("NewsTypeFilter"));
                                     columns.Bound(p => p.VisitCount).Title("浏览次数").Filterable(false);
                                     columns.Bound(p => p.WriteTime).Title("发布时间").Sortable(false).Filterable(false);
                                     columns.Bound(p => p.NickName).Title("发布人").Sortable(false).Filterable(filterable => filterable.UI("AdminFilter"));
                                     columns.Command(command => command.Custom("编辑").Click("showDetails"));
                                     columns.Command(command =>
                                     {
                                         command.Destroy();
                                     });
                                 })
                                 .Sortable()
                                 .Pageable()
                                 .Filterable()
                                 .DataSource(dataSource => dataSource
                                 .Ajax()
                                 .Events(events => events.Error("error_handler"))
                                 .Model(model => model.Id(p => p.Id))
                                 .PageSize()
                                     .Read(read => read.Action("News_Read", "Admin"))
                                     .Destroy(x => x.Action("NewsDelete", "Admin"))
                                 )
                         )
                     </div>
                 </div>
             </div>
         </div>
         <!-- /.col-lg- -->
     </div>
     <!-- /.row -->

 </div>
 <!-- /#page-wrapper -->
 <script type="text/javascript">
     function error_handler(e) {
         if (e.errors) {
             var message = "Errors:\n";
             $.each(e.errors, function (key, value) {
                 if ('errors' in value) {
                     $.each(value.errors, function () {
                         message += this + "\n";
                     });
                 }
             });
             alert(message);
         }
     }

     function showDetails(e) {
         var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
         window.location.href = '/Admin/NewsAddOrUpdate?id='+dataItem.Id;
     }

     function NewsTypeFilter(element)
     {
         element.kendoDropDownList({
             dataSource: {
                 transport: {
                     read: "@Url.Action("Get_NewsType")"
                 }
             },
                 optionLabel: "--选择新闻类别--"
         });
     }

     function AdminFilter(element)
     {
         element.kendoDropDownList({
             dataSource: {
                 transport: {
                     read: "@Url.Action("Get_Admin")"
                 }
             },
                 optionLabel: "--选择管理员--"
         });
     }
 </script>

这是前端代码，很简洁，如果我们自己实现类似功能，那就是一大堆js，功能还没它好，支持排序，查询。。。分页。。。

 public ActionResult NewsList()
         {
             return View();
         }

         public ActionResult Get_NewsType()
         {
             var lservice = UnitOfWork.NewsTypes;
             return Json(lservice.Select(e => e.NewsTypeName).Distinct(), JsonRequestBehavior.AllowGet);
         }

         public ActionResult Get_Admin()
         {
             var lservice = UnitOfWork.Admins;
             return Json(lservice.Select(e => e.NickName).Distinct(), JsonRequestBehavior.AllowGet);
         }

         private List<SelectListItem> getNewsType()
         {
             List<SelectListItem> list = new List<SelectListItem>();

             var lnewstype = UnitOfWork.NewsTypes.ToList();
             foreach (var item in lnewstype)
             {
                 SelectListItem obj = new SelectListItem();
                 obj.Text = item.NewsTypeName;
                 obj.Value = item.Id.ToString();
                 list.Add(obj);
             }
             return list;
         }

         public ActionResult News_Read([DataSourceRequest]DataSourceRequest request)
         {
             var lnews = UnitOfWork.NewsInfos;

             //filter
             if (request.Filters.Count() > )
             {
                 foreach (var item in request.Filters)
                 {
                     string type = item.GetType().ToString();
                     if (type == "Kendo.Mvc.FilterDescriptor")
                     {
                         var model = ((Kendo.Mvc.FilterDescriptor)item);
                         if (model.Member == "Title")
                         {
                             lnews = (IQueryable<NewsInfo>)lnews.Where(x => x.Title == model.Value.ToString());
                         }
                         else if (model.Member == "NewsTypeName")
                         {
                             lnews = (IQueryable<NewsInfo>)lnews.Where(x => x.NewsType.NewsTypeName == model.Value.ToString());
                         }
                         else if (model.Member == "NickName")
                         {
                             lnews = (IQueryable<NewsInfo>)lnews.Where(x => x.Admin.NickName == model.Value.ToString());
                         }
                     }
                     else
                     {
                         var model = ((Kendo.Mvc.CompositeFilterDescriptor)item);
                         foreach (var i in model.FilterDescriptors)
                         {
                             var cur = ((Kendo.Mvc.FilterDescriptor)i);
                             if (cur.Member == "Title")
                             {
                                 lnews = (IQueryable<NewsInfo>)lnews.Where(x => x.Title == cur.Value.ToString());
                             }
                             else if (cur.Member == "NewsTypeName")
                             {
                                 lnews = (IQueryable<NewsInfo>)lnews.Where(x => x.NewsType.NewsTypeName == Convert.ToString(cur.Value));
                             }
                             else if (cur.Member == "NickName")
                             {
                                 lnews = (IQueryable<NewsInfo>)lnews.Where(x => x.Admin.NickName == Convert.ToString(cur.Value));
                             }
                         }
                     }
                 }
             }

             int nTotalCount = lnews.Count();

             //Apply sorting
             if (request.Sorts.Count() == )
             {
                 request.Sorts.Add(new SortDescriptor("Id", ListSortDirection.Descending));
             }
             foreach (SortDescriptor sortDescriptor in request.Sorts)
             {
                 if (sortDescriptor.SortDirection == ListSortDirection.Ascending)
                 {
                     switch (sortDescriptor.Member)
                     {
                         case "Id":
                             lnews = lnews.OrderBy(x => x.Id);
                             break;
                         case "VisitCount":
                             lnews = lnews.OrderBy(x => x.VisitCount);
                             break;
                     }
                 }
                 else
                 {
                     switch (sortDescriptor.Member)
                     {
                         case "Id":
                             lnews = lnews.OrderByDescending(x => x.Id);
                             break;
                         case "VisitCount":
                             lnews = lnews.OrderByDescending(x => x.VisitCount);
                             break;
                     }
                 }
             }

             List<NewsViewsModel> list = new List<NewsViewsModel>();

             lnews = lnews.Skip((request.Page - ) * request.PageSize).Take(request.PageSize);

             foreach (var item in lnews)
             {
                 NewsViewsModel model = new NewsViewsModel();
                 model.Id = item.Id;
                 model.AdminId = item.Admin.Id;
                 model.NewsContent = item.NewsContent;
                 model.NewsTypeId = item.NewsTypeId;
                 model.NewsTypeName = item.NewsType.NewsTypeName;
                 model.NickName = item.Admin.NickName;
                 model.Title = item.Title;
                 model.VisitCount = item.VisitCount;
                 model.WriteTime = item.WriteTime.ToString();
                 list.Add(model);
             }

             var result = new DataSourceResult()
             {
                 Data = list,
                 Total = nTotalCount
             };
             return Json(result, JsonRequestBehavior.AllowGet);
         }

后台代码也就获取grid数据时，复杂一些。。总体还是能接受的