Grid.Mvc.Ajax擴展網格初始化

Question

嗨我很新的Web GUI開發使用JQuery & Ajax和我試圖讓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") 
      }); 

我已經設置好了的說，但我有在第8步問題，我不知道如何調用JavaScript代碼，以填充網格。我附上了上述的$（文件）。就緒呼叫，但似乎並沒有工作:-(任何幫助將不勝感激感謝

Answer 1

你有兩個選擇：loadPage和refreshFullPage

這將調用PersonsPaged方法：

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

，這將調用你的人的方法

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

也是，在你的人員和P。 ersonsPaged你可以返回一個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); 
} 

Answer 2

我決心加入gridmvc.js和gridmvc-ext.js前的腳本標籤URI.js文件的問題。當我通過Nuget安裝Grid.Mvc.Ajax時，它添加了這個文件。

我調用$（document）.ready（function（）{...}）中的代碼並使用兩種方式。 1 - 使用網格名稱的網格的JavaScript對象。 2 - 我採用了與使用jquery選擇器的gridmvc方法之後調用ajaxify方法相同的方法，並且它對我有用。

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

或

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

「productGrid」 是網格的名稱。我希望能有所幫助。