Grid.Mvc.Ajax扩展网格初始化

嗨，我是使用JQuery和Ajax的Web GUI开发人员的新手，我正在努力让nuget包Grid.MVC.Ajax工作。 自述文件陈述如下：

Follow thse steps to use Grid.Mvc.Ajax 1. Include ~/Scripts/gridmvc-ext.js after your ~/Scripts/grimvc.js include. 2. Include ~/Content/ladda-bootstrap/ladda-themeless.min.css CSS after your Bootstrap CSS/LESS include. 3. Include Ladda-bootstrap Javascript via the ~/Scripts/ladda-bootstrap/ladda.min.js and ~/Scripts/ladda-bootstrap/spin.min.js. 4. Create a view model for you grid data, for example: public Person { public string FirstName { get; set; } public string LastName { get; set; } } 5. Add a Razor partial view for your grid data that uses an AjaxGrid as the model type, Where T is your view model type: @using GridMvc.Html @using GridMvc.Sorting @model Grid.Mvc.Ajax.GridExtensions.AjaxGrid @Html.Grid(Model).Columns(columns => { columns.Add(c => c.FirstName); columns.Add(c => c.LastName); }).Sortable(true).WithPaging(10) 6. Add a controller action to retrieve the data for the first page of data that includes the Ajax pager HTML: public JsonResult Persons() { var vm = new List() { new Person() { FirstName = "John", LastName = "Doe" } } .AsQueryable(); var ajaxGridFactory = new Grid.Mvc.Ajax.GridExtensions.AjaxGridFactory(); var grid = ajaxGridFactory.CreateAjaxGrid(vm, 1, false); } 7. Add a controller action to retrieve data for paged items that returns a JsonResult without the Ajax page HTML: public JsonResult PersonsPaged(int page) { var vm = new List() { new Person() { FirstName = "John", LastName = "Doe" } } .AsQueryable(); var ajaxGridFactory = new Grid.Mvc.Ajax.GridExtensions.AjaxGridFactory(); var grid = ajaxGridFactory.CreateAjaxGrid(vm, page, true); } 8. Call the ajaxify Grid.Mvc.Ajax JavaScript plug-in method setting the non-paged and paged controller actions and optionally a form to apply additional filtering to the grid. All input and select elements in the given form will be passed into your paged and non-paged controller actions: $(".grid-mvc").gridmvc().ajaxify({ getPagedData: '/Home/Persons', getData : '/Home/PersonsPaged', gridFilterForm: $("#gridFilters") }); 

我按照说明进行了设置，但是我在第8步遇到了问题。因为我不确定如何调用JavaScript代码来填充网格。 我已将上述内容包含在$（document）.ready调用中，但这似乎不起作用:-(任何帮助都会非常感激。谢谢

Answer 1

您有两个选择： loadPage和refreshFullPage

这将调用您的PersonsPaged方法：

 $(".grid-mvc") .gridmvc() .loadPage() 

这将调用你的人员方法。

 $(".grid-mvc") .gridmvc() .refreshFullGrid() 

此外，在您的Persons和PersonsPaged中，您可以返回如下的JSON：

 public ActionResult Persons() { var vm = new List() { new Person() { FirstName = "John", LastName = "Doe" } }.AsQueryable(); var ajaxGridFactory = new AjaxGridFactory(); var grid = ajaxGridFactory.CreateAjaxGrid(vm, 1, false); return Json(new { Html = grid.ToJson("_YourPartialWithGridCode", this), grid.HasItems },JsonRequestBehavior.AllowGet); } 

Answer 2

我解决了在gridmvc.js和gridmvc-ext.js之前在scripts标签上添加URI.js文件的问题。 当我通过Nuget安装Grid.Mvc.Ajax时，它添加了这个文件。

我在$（document）.ready（function（）{…}）中调用了代码，并使用了两种方法。 1 – 使用网格名称的网格的javascript对象。 2 – 我使用jquery选择器在gridmvc方法之后调用ajaxify方法的方式与我一样。

要么

“productGrid”是网格的名称。 我希望能有所帮助。