用于jqGrid的ASP.NET MVC HTML helper

分享于 

11分钟阅读

Web开发

  繁體

介绍

jqGrid是一个具有很多特性的大网格,但是必须使用JavaScript开发免费版本。 如果你在MVC中开发,那么拥有一个免费的Html helper 是很好的。 这是MvcJqGrid进入的地方。

MvcJqGrid是一个 HTML helper,它使用 Razor 视图引擎或者 MVC web with在 MVC 3中大大简化jqGrid的实现。

MvcJqGrid在nuget库中可用,可以使用软件包管理器控制台在你的项目上安装:

PM> Install-Package MvcJqGrid

也可以使用 Visual Studio 右键单击引用节点并选择 Manage Packages来将它添加到项目中。 有关更多信息,请参见使用对话框管理NuGet管理NuGet包。

若要使用 MvcJqGrid,请在视图中包含命名空间。

@using MvcJqGrid

或者在 system.web.webPages.razor 部分的命名空间中使用 web.config。

一个简单的例子:

@(Html.Grid("CustomerGrid")
. SetCaption("Customers")
. AddColumn(new Column("CustomerId").SetLabel("Id"))
. AddColumn(new Column("Name"))
. AddColumn(new Column("Company"))
. SetUrl(Url.Action("List","Customer"))
. SetAutoWidth(true)
. SetRowNum(10)
. SetViewRecords(true)
. SetPager("pager"))

HTML是自解释的:

  • Html.Grid("CustomerGrid") - 创建带有 id CustomerGrid的网格
  • SetCaption - 设置网格标题
  • AddColumn - 将列添加到网格中
  • SetUrl - 返回为jqGrid格式化的json的操作和控制器
  • SetLabel - 设置网格中显示的列的标签

网格的一个简单的MVC控制器是:

public ActionResult List(GridSettings gridSettings)
{
 CustomerRepository repository = new CustomerRepository();
 string name = string.Empty;
 string company = string.Empty;
 if (gridSettings.IsSearch)
 {
 name = gridSettings.Where.rules.Any(r => r.field == "Name")? 
 gridSettings.Where.rules.FirstOrDefault(r => r.field == "Name").data : string.Empty;
 company = gridSettings.Where.rules.Any(r => r.field == "Company")? 
 gridSettings.Where.rules.FirstOrDefault(r => r.field == "Company").data : string.Empty;
 }
 var customers = repository.List(name, company, gridSettings.SortColumn, gridSettings.SortOrder);
 int totalCustomers = customers.Count;
 var jsonData = new {
 total = totalCustomers/gridSettings.PageSize + 1,
 page = gridSettings.PageIndex,
 records = totalCustomers,
 rows = (
 from c in customers
 selectnew {
 id = c.CustomerID,
 cell = new[]
 {
 c.CustomerID.ToString(),
 string.Format("{0} {1}", c.FirstName, c.LastName),
 c.CompanyName,
 c.EmailAddress
 }
 }).ToArray()
 };
 return Json(jsonData, JsonRequestBehavior.AllowGet);
}

一个更复杂的示例,带有编辑和 delete 等操作的列是:

@(Html.Grid("CustomerGrid")
. SetCaption("Customers")
. AddColumn(new Column("CustomerId").SetLabel("Id").SetSearch(false))
. AddColumn(new Column("Name"))
. AddColumn(new Column("Company"))
. AddColumn(new Column("EmailAddress").SetLabel("Email Address").SetSearch(false))
. AddColumn(new Column("Last Modified").SetSearch(false))
. AddColumn(new Column("Telephone").SetSearch(false))
. AddColumn(new Column("").SetSearch(false).SetCustomFormatter("buttonize").SetWidth(60).SetAlign(Align.Right))
. SetUrl(Url.Action("List","Customer"))
. SetAutoWidth(true)
. SetRowNum(10)
. SetRowList(new[] { 10, 15, 20, 50 })
. SetViewRecords(true)
. SetPager("pager")
. SetSearchToolbar(true)
. SetSearchOnEnter(false)) 

其中buttonize是返回操作列Html的JavaScript函数。

function buttonize(cellvalue, options, rowobject) {
 return'<a href="http://xprog.blogspot.com">eXtreme Programming</a>';
 }

在更高级的场景中,应该发布请求的类型,因为默认值是。 SetRequestType 方法允许定义请求类型。 前面的示例使用的array 必须以与列定义相同的顺序返回值。 更通用的解决方案是返回具有命名属性的JSON对象。 MvcJqGrid通过 SetJsonReader 方法支持这里场景。 SetJsonReader 方法用于配置网格 jsonReader,以便JSON数据不必与jqGrid的列模型( ColModel ) 顺序匹配。 高级的另一个特性是,可以在每个需要的列中搜索,使用不同的搜索类型。 SetSearchType 设置列的搜索类型。 搜索类型可以是:

  • 输入( 默认)
  • 选择 SetSearchTerms 方法接收定义选择选项的字符串的Collection。
  • Datepicker SetSearchDateFormat 方法允许定义日期格式。

要启用工具栏搜索 SetSearchToolbar,必须将它的设置为 true。 SetSearchOnEnter 用于定义执行搜索的时间:

  • true: 当用户按enter键时执行搜索
  • false: 在用户停止键入后执行搜索

SetRowList 在网格的页导航中创建一个具有指定行数的行。

现在我们可以使用客户类创建一个示例。 视图:

<divstyle="width: 900px;">@(Html.Grid("customerGrid")
. SetRequestType(RequestType.Post)
. SetJsonReader(new MvcJqGrid.DataReaders.JsonReader { Id="id", RepeatItems = false})
. SetCaption("Customers")
. AddColumn(new Column("FirstName").SetWidth(100).SetLabel("First Name"))
. AddColumn(new Column("LastName").SetWidth(100).SetLabel("Last Name"))
. AddColumn(new Column("CountryName").SetLabel("Country")
. SetSearchType(Searchtype.Select)
. SetSearchTerms((string[])ViewBag.Countries))
. AddColumn(new Column("Phone").SetWidth(100))
. AddColumn(new Column("BirthDate").SetWidth(80).SetSearchType(Searchtype.Datepicker)
. SetSearchDateFormat("yy-mm-dd"))
. AddColumn(new Column("").SetSearch(false).SetCustomFormatter("buttonize")
. SetWidth(25)
. SetAlign(Align.Right))
. SetUrl(Url.Action("Search","Customer"))
. SetAutoWidth(true)
. SetRowNum(10)
. SetRowList(new[] { 10, 15, 20, 50 })
. SetViewRecords(true)
. SetPager("pager")
. SetSearchToolbar(true).SetSearchOnEnter(false) 
 )</div>

返回带有命名属性的JSON的控制器:

publicclass CustomerController : Controller
{
 public ActionResult Index()
 {
 var countries = new CountryRepository().Search();
 ViewBag.Countries = (from c in countries select c.Name).ToArray();
 return View();
 }
 public JsonResult Search(GridSettings gridSettings)
 {
 List<CustomerSearchResult> customers = null;
 int totalRecords;
 CustomerRepository customerRepository = new CustomerRepository();
 CustomerSeachFilter filter = new CustomerSeachFilter();
 if (gridSettings.IsSearch)
 {
 filter.FirstName = gridSettings.Where.rules.Any(r => r.field == "FirstName")? 
 gridSettings.Where.rules.FirstOrDefault(r => r.field == "FirstName").data : string.Empty;
 filter.LastName = gridSettings.Where.rules.Any(r => r.field == "LastName")? 
 gridSettings.Where.rules.FirstOrDefault(r => r.field == "LastName").data : string.Empty;
 filter.CountryName = gridSettings.Where.rules.Any(r => r.field == "CountryName")? 
 gridSettings.Where.rules.FirstOrDefault(r => r.field == "CountryName").data : string.Empty;
 filter.Phone = gridSettings.Where.rules.Any(r => r.field == "Phone")? 
 gridSettings.Where.rules.FirstOrDefault(r => r.field == "Phone").data : string.Empty;
 filter.BirthDate = gridSettings.Where.rules.Any(r => r.field == "BirthDate")? 
 filter.BirthDate = gridSettings.Where.rules.Any(r => r.field == "BirthDate")? 
 DateTime.ParseExact(gridSettings.Where.rules.FirstOrDefault(r => r.field == "BirthDate").data, 
 "yyyy-MM-dd", null) : DateTime.MinValue;
 }
 customers = customerRepository.Search(filter, 
 gridSettings.SortColumn, 
 gridSettings.SortOrder, 
 gridSettings.PageSize, 
 gridSettings.PageIndex, 
 out totalRecords);
 var jsonData = new {
 total = totalRecords/gridSettings.PageSize + 1,
 page = gridSettings.PageIndex,
 records = totalRecords,
 rows = (
 from c in customers
 selectnew {
 id = c.CustomerID,
 FirstName = c.FirstName,
 LastName = c.LastName,
 BirthDate = c.BirthDate.ToString("yyyy-MM-dd"),
 CountryName = c.CountryName,
 EmailAddress = c.EmailAddress,
 Phone = c.Phone,
 })
 };
 return Json(jsonData);
 }
}

这里示例将创建以下网格:

MvcJqGrid搜索功能还允许配置搜索:

  • SetSortName - 定义网格的默认搜索字段。
  • SetSortOrder - 使用网格的SortOrder枚举器定义默认的排序顺序。
  • SetDefaultSearchValue - 设置特定列的默认搜索值。

有关更多信息和活动示例,请按这里的到MvcJqGrid网站

about标签,包含许可证,源代码和文档的链接。

注:

MvcJqGrid现在有一个带有Id的Nuget软件包: MvcJqGrid和代码在GitHub中: https://github.com/robinvanderknaap/MvcJqGrid


相关文章