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

Grid.Mvc.Ajax extension grid initialization

提问by JonnyR

Hi I'm very new to Web GUI dev using JQuery & Ajax and I'm trying to get the nuget package Grid.MVC.Ajax working. The readme states the following:

嗨，我是使用 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<T> as the model type, 
Where T is your view model type:

@using GridMvc.Html
@using GridMvc.Sorting
@model Grid.Mvc.Ajax.GridExtensions.AjaxGrid<Models.Person>

@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<Person>()
            {
                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<Person>()
            {
                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")
            });

I have set things up as stated but I'm having problems in step 8. as I'm not sure how to call the JavaScript code in order to populate the grid. I have enclosed the above in a $(document).ready call but that doesn't seem to work :-( Any help would be much appreciated. Thanks

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

回答by MuriloKunze

You have two options: loadPageand refreshFullPage

您有两个选择：loadPage和refreshFullPage

this will call your PersonsPaged method:

这将调用您的 PersonsPaged 方法：

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

and this will call your Persons method.

这将调用您的 Persons 方法。

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

also, in your Persons and PersonsPaged you can return a JSON like this:

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

public ActionResult Persons()
{
    var vm = new List<Person>()
    {
        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);
}

回答by Paulo Fernando

I resolved the problem adding the URI.js file on the scripts tag before gridmvc.js and gridmvc-ext.js. When I installed Grid.Mvc.Ajax by Nuget, it added this file.

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

I called the code inside the $(document).ready(function() { ... }) and used twice ways. 1 - The javascript object of the grid using the grid's name. 2 - I did the same way that you did calling ajaxify method after gridmvc method using a jquery selector and it worked to me.

我调用了 $(document).ready(function() { ... }) 中的代码并使用了两次。1 - 使用网格名称的网格的 javascript 对象。2 - 我的方法与您在使用 jquery 选择器的 gridmvc 方法之后调用 ajaxify 方法的方法相同，并且对我有用。

<script>
    $(document).ready(function () {
        $(".grid-mvc").gridmvc().ajaxify(
            {
                getPagedData: "/Product/Grid",
                getData: "/Product/Index"
            });
    });
</script>

or

或者

<script>
    $(document).ready(function () {
        pageGrids.productGrid.ajaxify(
        {
            getPagedData: "/Product/Grid",
            getData: "/Product/Index"
        });
    });
</script>

"productGrid" is the grid's name. I hope to have helped.

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