在 ASP.NET MVC 中使用 jqGrid

下载免费的 .NET 和 JAVA 文件 API

试用 Word/Excel/PDF 的免费文件格式 API

 

数据库脚本.rar

 

 

在本文中，我们将学习如何在 ASP.NET MVC 中使用 jqGrid 以及如何使用实体框架来访问数据库。

下载源代码

下载

如果你属于ASP.NET web表单背景，那么我们使用最多的就是grid view，但是在某些场景下，如果数据量很大，那么它会被打破。但是，在 MVC 中，我们没有那种包含所有现成事件的网格，但是有 HTML 帮助程序可以帮助您在 Web 网格中生成 HTML。在那，我们需要使用不同的包来处理网格的分页，并且我们需要传递一个强类型模型来渲染网格。

现在，如果我们想要一个更轻巧且易于使用的网格，在该网格中，我们可以进行分页、搜索和创建新记录，轻松编辑记录、删除记录，那么我们将正确使用它。



让我们先从数据库部分开始。

数据库部分

我创建了一个名为“Northwind”的数据库，其中包含“Customers”表。



接下来，我们将创建一个 ASP.NET MVC5 Web 应用程序。

创建 ASP.NET MVC5 Web 应用程序

打开新的 Visual Studio 2015 IDE。



打开 IDE 后，接下来我们将创建 MVC 项目，只需单击文件 - 在该新建 - 项目中。



选择一个项目后，会弹出一个名为“New Project”的新对话框。在这里，我们将选择 Visual C# Project Templates >> Web >> ASP.NET Web Application。然后，我们将项目命名为“DemoGrids”。



命名项目后，我们将点击 OK 按钮创建一个项目。

将弹出一个新对话框，用于选择创建“ASP.NET Web 应用程序”的模板；在该模板中，我们将创建 MVC 应用程序。这就是为什么我们要选择“MVC 模板”，然后单击“确定”按钮来创建一个项目。



单击确定按钮后，它将开始创建一个项目。

项目结构



在创建项目之后，接下来我们将创建模型。

创建客户模型

我们将把客户模型添加到模型文件夹中。

 

 

[Table("Customers")]  
public class Customers  
{  
    [Key]  
    public int? CustomerID { get; set; }  
    [Required(ErrorMessage = "Required CompanyName")]  
    public string CompanyName { get; set; }  
    [Required(ErrorMessage = "Required ContactName")]  
    public string ContactName { get; set; }  
    [Required(ErrorMessage = "Required ContactTitle")]  
    public string ContactTitle { get; set; }  
    public string Address { get; set; }  
    [Required(ErrorMessage = "Required City")]  
    public string City { get; set; }  
    public string Region { get; set; }  
    [Required(ErrorMessage = "Required PostalCode")]  
    public string PostalCode { get; set; }  
    [Required(ErrorMessage = "Required Country")]  
    public string Country { get; set; }  
    [Required(ErrorMessage = "Required Phone")]  
    public string Phone { get; set; }  
    public string Fax { get; set; }  
}     

 

 

 

添加模型之后，接下来我们将使用实体框架来访问数据库，我们需要设置 DbContext 类。

注意

什么是 DbContext？

DbContext 是实体框架的重要组成部分。

它是域或实体类与数据库之间的桥梁。

DbContext 是负责与作为对象的数据进行交互的主要类。

引用自： - http://www.entityframeworktutorial.net/EntityFramework4.3/dbcontext-vs-objectcontext.aspx

设置 DbContext 类

在这一部分，我们首先要创建一个名为“DatabaseContext”的类，这个类将从“DbContext”类继承。

我们将在模型文件夹中创建这个类。



注意

“DBConnection”是连接字符串名称。

注意

什么是 DBSet？

引用自： - http://www.entityframeworktutorial.net/EntityFramework4.3/dbsetclass.aspx

DBSet 类表示用于创建、读取、更新和删除操作的实体集。当实体类型在构建时未知时，可以使用 DBSet (DbSet<TEntity>) 的通用版本。

添加“DatabaseContext”类之后，接下来我们将使用“DbContext”类继承该类。

在构造函数中继承类 next 之后，我们将创建一个连接，我们需要将连接字符串名称传递给“DbContext”类，我们将连接字符串名称作为 DBConnection 传递。

在传递连接字符串之后，我们将在“DbContext”类中声明 DbSet，这将帮助我们执行创建、读取、更新和删除操作。

代码片段

 

using System.Data.Entity;  
  
namespace DemoGrids.Models  
{  
    public class DatabaseContext : DbContext  
    {  
        public DatabaseContext() : base("DBConnection")  
        {  
        }  
  
        public DbSet<Customers> Customers { get; set;}  
    }  
}  

 

Web.config 文件中的连接字符串

 

 

<connectionStrings>  
  <add name="DBConnection"   
       connectionString="Data Source=####; initial catalog=Northwind; user id=sa; password=Pass####;"  
       providerName="System.Data.SqlClient" />  
</connectionStrings>  

 

在设置 DbContext 类之后，接下来我们将从 NuGet 包中添加 jQuery.jqGrid 包。

 

从 NuGet 包添加 jQuery.jqGrid

要从 NuGet 包中添加 jQuery.jqGrid 引用，只需右键单击项目，将填充一个列表，只需选择“管理 NuGet 包”，就会弹出 NuGet 的新对话框，其中有带有搜索的浏览选项，只需搜索 jQuery.jqGrid 和搜索结果选择“jQuery.jqGrid”包并点击安装按钮，这个包将添加jqGrid网格所需的CSS和jQuery文件。



下面是安装 jqGrid 后的项目结构，其中显示 jqGrid 网格引用已添加到 Content 和 Scripts 文件夹中。



接下来，我们将添加一个控制器。

添加演示控制器

在这一部分，我们将添加一个名为“Demo”的控制器。



接下来，在添加 Controller 之后，我们将获得一个名为 Index 的 Default Action 方法，我们将添加这个 View 用于显示 Grid，同时我们需要添加另一个 Action 方法来处理 Ajax Get Request for Getting Data 并绑定它到网格。

添加操作方法 GetCustomer

此操作方法将返回将数据绑定到网格所需的 JSON 对象。

添加 GetCustomers 操作方法，该方法将采用少量参数作为处理输入（排序、分页和在网格中搜索）。

 

//获取待办事项列表。
 public  JsonResult GetCustomers(string word,  int  page,  int  rows, string searchString)
 {
     //#1 创建用于访问数据库的DatabaseContext 类的实例。
     使用 (DatabaseContext db =  new  DatabaseContext())
     {
         //#2 设置分页
         int  pageIndex = Convert.ToInt32(page) - 1;
         int  pageSize = 行；

         //#3 Linq 查询以获取客户
         var 结果 = db.Customers.Select(
             a => 新
             {
                 a.客户ID，
                 a.公司名称，
                 a.联系人姓名，
                 a.联系方式，
                 一座城市，
                 a.邮政编码，
                 一个国家，
                 一部手机，
             });

         //#4 获取总行数
         int  totalRecords = Results.Count();
         var  totalPages = ( int )Math.Ceiling(( float )totalRecords / ( float )rows);

         //#5 设置排序
         if  (sord.ToUpper() ==  "DESC" )
         {
             结果 = Results.OrderByDescending(s => s.CustomerID);
             结果 = Results.Skip(pageIndex * pageSize).Take(pageSize);
         }
         别的
         {
             结果 = Results.OrderBy(s => s.CustomerID);
             结果 = Results.Skip(pageIndex * pageSize).Take(pageSize);
         }
         //#6 设置搜索
         如果 (!string.IsNullOrEmpty(searchString))
         {
             结果 = Results.Where(m => m.Country == searchString);
         }
         //#7 发送 Json 对象以查看。
         var  jsonData = 新
         {
             总 = 总页数，
             页，
             记录数 = 总记录数，
             行 = 结果
         };
         返回 Json(jsonData, JsonRequestBehavior.AllowGet);
     }
 }

 

理解代码片段。

1. 第一步，我们将创建用于访问数据库的 DatabaseContext 实例。
2. 第二步根据我们从请求中收到的参数设置页面索引。
3. 第三步，我们将编写用于从数据库中获取数据的 Linq 查询，我们将其以 IQueryable 形式存储在 Result 变量中。
4. 第四步，我们将计算需要将其发送到 View 的 Total Records 和 Total Pages。
5. 第五步设置排序顺序。
6. 六步设置搜索网格。
7. 在这一步的最后一步，我们将收集所有变量并将它们以 JSON 格式发送到 View。

在添加和理解 GetCustomer Action Method 之后，接下来我们将添加 View for Index Action Method，这是在创建 Controller 时默认创建的。

将索引视图添加到索引操作方法

在这一部分，我们将添加索引视图。



添加索引视图后的项目结构。



接下来，我们将向索引视图添加 jqGrid 脚本和 CSS 引用。

 

将 jqGrid 的脚本和 CSS 引用添加到索引视图

在这一步中，我们将向索引视图添加 jqGrid 脚本和 CSS 引用。

 

当我们从 NuGet 包中添加 jqGrid Grid 时，此脚本被添加到项目中。

<link href= "~/Content/themes/base/jquery-ui.css"  rel= "stylesheet"  />
<link href= "~/Content/jquery.jqGrid/ui.jqgrid.css"  rel= "stylesheet"  />
<script src= "~/Scripts/jquery-1.10.2.min.js" ></script>
<script src= "~/Scripts/jquery-ui-1.10.0.js" ></script>
<script src= "~/Scripts/i18n/grid.locale-en.js" ></script>
<script src= "~/Scripts/jquery.jqGrid.min.js" ></script>

添加空 <table> 元素

添加 Scripts 和 Css 之后，接下来我们需要添加 table 元素以保留应创建网格的位置。

 

<table id= "Demogrid" ></table>

下一步，我们将显示带有客户列的简单网格。

创建 jqGrid

在这一部分，我们将编写一个脚本来创建 JqGrid 并调用操作方法“GetCustomers”来获取要绑定到网格的数据。

代码片段

<脚本>
        $(函数 () {
            调试器；
            $( "#Demogrid" ).jqGrid
            ({
                url:  "/Demo/GetCustomers" ,
                数据类型:  'json' ,
                mtype:  '获取' ,
                //表头名称
                colNames: [ 'CustomerID' ,  'CompanyName' ,  'ContactName' ,
'ContactTitle' ,  'City' ,   'PostalCode' ,  'Country' ,  'Phone' ],
                //colModel 从控制器获取数据并绑定到网格
                颜色型号：[
                {名称：  “客户ID”  }，
                {名称：  “公司名称”  }，
                {名称：  “联系人姓名”  }，
                {名称：  “联系人标题”  }，
                {名称：  “城市”  }，
                {名称：  “邮政编码”  }，
                {名称：  “国家”  }，
                {名称：  “电话”  }
                ],
                高度:  '100%' ,
                行数：10，
                查看记录：  true ,
                标题：  'JQgrid 演示' ，
                emptyrecords:  '没有记录' ,
                jsonReader：
                {
                    根：  “行” ，
                    页面：  “页面” ，
                    总计：  “总计” ，
                    记录：  “记录” ，
                    重复项： 假，
                    编号：  “0”
                },
                自动宽度： 真，
            });
        });
    </脚本>

 

 

 

 

JqG​​rid 选项

引用自 - http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid

财产	描述
网址	告诉我们从哪里获取数据。通常这是一个服务器端函数，它连接到一个数据库，该函数返回要填充到网格中的 Body 层的适当信息
数据类型	这告诉 jqGrid 返回的信息类型，以便它可以构建网格。在这种情况下，我们告诉网格我们希望从服务器返回 XML 数据，但其他格式也是可能的。有关所有可用数据类型的列表，请参阅 API 方法
类型	告诉我们如何进行 Ajax 调用：'GET' 或 'POST'。在这种情况下，我们将使用 GET 方法从服务器检索数据
列名	我们在其中放置列名称的数组。这是出现在网格头部（Header 层）的文本。名称以逗号分隔
模型	描述列模型的数组。这是网格中最重要的部分。这里我只解释上面使用的选项。有关选项的完整列表，请参阅 colModel API name：列的名称。这个名称不一定是数据库表的名称，但稍后我们将看到当我们有不同的数据格式时如何使用它。 index：传递给对数据进行排序的服务器的名称（请注意，我们可以改为传递列号）。通常，这是数据库的名称（或多个名称）——这是服务器端排序，因此您传递的内容取决于您的服务器期望接收的内容。 width：列的宽度，以像素为单位。 align：列的对齐方式。 sortable：指定网格中的数据是否可以在此列上排序；如果为 false，则单击标题无效。
寻呼机	定义我们要使用分页栏来浏览记录。这必须是一个有效的 HTML 元素；在我们的示例中，我们为 div 指定了“pager”的 id，但任何名称都是可以接受的。请注意，导航层（“pager” div）可以放置在您想要的任何位置，由您的 HTML 决定；在我们的示例中，我们指定分页器将出现在 Body 层之后。
行数	设置我们要在网格中查看的记录数。此参数传递给 URL 以供检索数据的服务器例程使用
行列表	在寻呼机中构造选择框元素的数组，我们可以在其中更改可见行的数量。在执行期间更改时，此参数将替换传递给 URL 的 rowNum 参数
排序名称	设置初始排序列。可以是姓名或号码。此参数添加到 URL 以供服务器例程使用
查看记录	定义我们是否要在分页栏中显示来自查询的总记录数
标题	设置网格的标题。如果未设置此参数，则字幕层将不可见

 

在设置用于创建 JqGrid 的脚本之后，接下来我们将保存并运行应用程序以首先查看网格的外观。

 

 

 

 

 

 

 

 

 

 

JqG​​rid
添加分页器快照

现在在网格上方，我们可以看到我们只能看到 10 行，但是我们看不到这个网格的分页器，让我们启用对这个网格的分页，以便我们可以在其中显示大量数据。

1. 添加带有 id pager 的分页元素 <div>。
   

   <div id= "pager" ></div>

添加 pager 元素以查看下一步后，我们需要向 JqGrid 添加更多选项。

寻呼机：jQuery( '#pager' ),
行列表：[10, 20, 30, 40],

 

代码片段

<脚本>
        $(函数 () {
            调试器；
            $( "#Demogrid" ).jqGrid
            ({
                url:  "/Demo/GetCustomers" ,
                数据类型:  'json' ,
                mtype:  '获取' ,
                //表头名称
                colNames: [ 'CustomerID' ,  'CompanyName' ,  'ContactName' ,  'ContactTitle' ,  'City' ,  'PostalCode' ,  'Country' ,  'Phone' ],
                //colModel 从控制器获取数据并绑定到网格
                颜色型号：[
                {名称：  “客户ID”  }，
                {名称：  “公司名称”  }，
                {名称：  “联系人姓名”  }，
                {名称：  “联系人标题”  }，
                {名称：  “城市”  }，
                {名称：  “邮政编码”  }，
                {名称：  “国家”  }，
                {名称：  “电话”  }
                ],
                高度:  '100%' ,
                查看记录：  true ,
                标题：  'JQgrid 演示' ，
                emptyrecords:  '没有记录' ,
                行数：10，

                寻呼机：jQuery( '#pager' ),
                行列表：[10, 20, 30, 40],

                jsonReader：
                {
                    根：  “行” ，
                    页面：  “页面” ，
                    总计：  “总计” ，
                    记录：  “记录” ，
                    重复项： 假，
                    编号：  “0”
                },
                自动宽度： 真，
            });
        });
    </脚本>

将分页下拉列表从 10 更改为 20 后JqG​​rid调试视图的快照。

JqG​​rid 的调试视图快照添加分页后，接下来我们需要添加用于创建新客户、编辑客户、删除客户的图标以及我们需要搜索此网格。

向网格寻呼机添加编辑、创建、删除和搜索图标

在这一部分中，我们将向网格的寻呼机添加创建、编辑、删除和搜索图标，为此我们需要在网格上设置几个选项。

这些选项很容易设置，因为它们只理解布尔值 true 或 false。

如果我们只想显示添加图标，那么只需制作 {add: true} 并隐藏它只需制作 {add: false}。

.navGrid( '#pager' ,
{
    编辑： 真的，
    添加： 真实，
    德尔： 真的，
    搜索： 真,
    刷新： 真，
    closeAfterSearch: 真
}

代码片段

<脚本>
        $(函数 () {
            调试器；
            $( "#Demogrid" ).jqGrid
            ({
                url:  "/Demo/GetCustomers" ,
                数据类型:  'json' ,
                mtype:  '获取' ,
                //表头名称
                colNames: [ 'CustomerID' ,  'CompanyName' ,  'ContactName' ,  'ContactTitle' ,  'City' ,  'PostalCode' ,  'Country' ,  'Phone' ],
                //colModel 从控制器获取数据并绑定到网格
                颜色型号：[
                {名称：  “客户ID”  }，
                {名称：  “公司名称”  }，
                {名称：  “联系人姓名”  }，
                {名称：  “联系人标题”  }，
                {名称：  “城市”  }，
                {名称：  “邮政编码”  }，
                {名称：  “国家”  }，
                {名称：  “电话”  }
                ],
                高度:  '100%' ,
                查看记录：  true ,
                标题：  'JQgrid 演示' ，
                emptyrecords:  '没有记录' ,
                行数：10，

                寻呼机：jQuery( '#pager' ),
                行列表：[10, 20, 30, 40],

                jsonReader：
                {
                    根：  “行” ，
                    页面：  “页面” ，
                    总计：  “总计” ，
                    记录：  “记录” ，
                    重复项： 假，
                    编号：  “0”
                },
                自动宽度： 真，
            }).navGrid( '#pager' ,
            {
                编辑： 真的，
                添加： 真实，
                德尔： 真的，
                搜索： 真,
                刷新： 真，
                closeAfterSearch: 真
            });
        });
    </脚本>

JqG​​rid 快照



完成添加图标后，现在让我们研究如何使用 JqGrid 添加新客户。

添加新客户

为了首先添加新客户，我们需要添加处理创建新客户请求的操作方法。

为此，我们将添加名为“CreateCustomer”的新 Action 方法，它将客户模型作为输入参数。

在这个方法中，我们首先要验证我们将从 Ajax 请求接收的数据是否有效，然后我们将在实体框架的帮助下将该数据保存到数据库中，最后，我们将返回响应给 Ajax方法。如果数据无效，那么我们将读取 ModelState 中的错误，该错误将作为对 Ajax 方法的响应发送。

代码片段

 

[HttpPost]
    public  JsonResult CreateCustomer([Bind(Exclude =  "CustomerID" )] 客户客户)
    {
        StringBuilder msg =  new  StringBuilder();
        尝试
        {
            如果 （模型状态。IsValid）
            {
                使用 (DatabaseContext db =  new  DatabaseContext())
                {
                    db.Customers.Add(customers);
                    db.SaveChanges();
                    return  Json( "保存成功" , JsonRequestBehavior.AllowGet);
                }
            }
            别的
            {
                VAR  errorList =（从项目 中 的ModelState
                                 其中 item.Value.Errors.Any()
                                 选择 item.Value.Errors[0].ErrorMessage).ToList();

                返回 Json(errorList, JsonRequestBehavior.AllowGet);
            }
        }
        捕获 （异常前）
        {
            var  errormessage =  "发生错误："  + ex.Message;
            返回 Json(errormessage, JsonRequestBehavior.AllowGet);
        }

    }

 

在添加将处理发布请求的新操作方法之后，我们需要向 jqGrid 添加选项，它将使用 CreateCustomer 操作方法发布此请求。

用于创建新客户的 JqGrid 代码片段

{
    // 添加选项
    zIndex: 100,
    url:  "/Demo/CreateCustomer" ,
    closeOnEscape: 真,
    closeAfterAdd:  true ,
    afterComplete： 函数 （响应）{
        如果 （响应.responseJSON）
        {
            if  (response.responseJSON ==  "保存成功" ) {
                alert( "保存成功" );
            }
            其他 {
                无功 消息=  “” ；
                for  ( var  i = 0; i < response.responseJSON.length; i++) {
                    消息 += response.responseJSON[i];
                    消息 +=  "\n" ;
                }
            }

        }
    }
}

添加此选项后，我们将不会看到用于创建新客户的 create customer 弹出窗口，我们需要将 {editable: true} 添加到每个 colModel 属性。

添加可编辑的代码片段：对 colModel 属性为 true

颜色型号：
[

{ name:  "CustomerID" , editable:  true  },
{
    名称：  “公司名称” ，可编辑：  true
},
{
    名称：  'ContactName' ，可编辑：  true
},
{
    名称：  “ContactTitle” ，可编辑：  true
},
{
    名称：  “城市” ，可编辑：  true
},
{
    名称：  “邮政编码” ，可编辑：  true
},
{
    名称：  “国家” ，可编辑：  true
},
{
    名称：  “电话” ，可编辑：  true
}
],

将可编辑选项设置为 true 后，列将仅在添加记录弹出窗口中可见。

JqG​​rid 的快照



但是我们到现在还没有向这个字段添加任何验证。

让我们向这个字段添加验证。

添加验证（必需）

我们需要添加的第一件事是使所有字段都为必填项。

为此，我们需要向 colModel 添加一个编辑规则选项。

编辑规则：{必需：真实}

注意： - 编辑规则

此选项向可编辑元素添加其他属性，应在 colModel 中使用。大多数情况下，它用于在将值提交给服务器之前验证用户输入。

引用自 - http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules

 

颜色型号：[
{
    名称：  “CustomerID” ，可编辑：  true
},
{
    name:  "CompanyName" , editable:  true , editrules: { required:  true  }
},
{
    name:  'ContactName' , editable:  true , editrules: { required:  true  }
},
{
    名称：  “ContactTitle” ，可编辑：true ，编辑 规则：{required：  true  }
},
{
    name:  "City" , editable:  true , editrules: { required:  true  }
},
{
    名称：  “PostalCode” ，可编辑：true ，编辑 规则：{required：  true  }
},
{
    名称：  “国家” ，可编辑：真，编辑 规则：{ 要求： 真 }
},
{
    名称：  “电话” ，可编辑：true ，编辑 规则：{required：  true  }
}
],

 

 

 

 

 

 

 

 

 

 

 

 

 

 

JqG​​rid 的快照



在将所有字段设为必填项之后，接下来我们需要一些验证，例如文本框应该只接受整数值作为输入，这样做我们只需要向该列添加另一个选项。

代码片段

{
     名称：  “PostalCode” ，可编辑：true ，编辑 规则：{required：  true ，number：  true }
}

引用自 - http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules

以下是可用选项列表：

选项	类型	描述
编辑隐藏	布尔值	此选项仅在表单编辑模块中有效。默认情况下，隐藏字段不可编辑。如果该字段在网格中隐藏并且 edithidden 设置为 true，则在调用 add 或 edit 方法时可以编辑该字段。
必需的	布尔值	（真或假）如果设置为真，将检查该值，如果为空，将显示错误消息。
数字	布尔值	（真或假）如果设置为真，将检查该值，如果这不是数字，将显示错误消息。
整数	布尔值	（真或假）如果设置为真，将检查该值，如果这不是整数，将显示错误消息。
最小值	数字（整数）	如果设置，将检查该值，如果该值小于此值，将显示错误消息。
最大值	数字（整数）	如果设置，将检查该值，如果该值大于此值，将显示错误消息。
电子邮件	布尔值	如果设置为 true，将检查该值，如果这不是有效的电子邮件，将显示错误消息
网址	布尔值	如果设置为 true，将检查该值，如果这不是有效的 url，将显示错误消息
日期	布尔值	如果设置为 true，则获取 datefmt 选项中的值（如果未设置，则使用 ISO 日期）并且将检查该值，如果这不是有效日期，则会显示错误消息
时间	布尔值	如果设置为 true，则将检查该值，如果这不是有效时间，则会显示错误消息。目前，我们只支持 hh:mm 格式和可选的 am/pm 结尾
风俗	布尔值	如果设置为 true 允许通过自定义函数定义自定义检查规则。见下文
custom_func	功能	当自定义选项设置为 true 时，应使用此函数。传递给这个函数的参数是值，它应该被检查和名称 - colModel 的属性。该函数应返回一个带有以下参数的数组：第一个参数 - true 或 false。true 的值表示检查成功 false 否则；第二个参数只有在第一个值为 false 时才有意义，并且表示将向用户显示的错误消息。通常，这看起来像这样 [false，“请输入有效值”]

 

在接下来查看验证之后，我们最终将创建一个新客户。



发布数据后，下面是模型中填充的值的快照。

JqG​​rid 快照



完成添加新客户之后，我们将要编辑客户。

 

编辑/更新客户详细信息

首先要编辑记录，我们需要添加处理编辑请求的操作方法。

在下面的代码片段中，我们将客户模型作为输入，然后我们将验证模型并更新数据库中的值。

如果我们无法更新，那么我们将显示警报消息。

代码片段

公共 字符串 EditCustomer(Customers 客户)
{
    字符串味精；
    尝试
    {
        如果 （模型状态。IsValid）
        {
            使用 (DatabaseContext db =  new  DatabaseContext())
            {
                db.Entry(customers).State = EntityState.Modified;
                db.SaveChanges();
                msg =  "保存成功" ;
            }
        }
        别的
        {
            msg =  "一些验证" ;
        }
    }
    捕获 （异常前）
    {
        msg =  "发生错误："  + ex.Message;
    }
    回 消息；
}

 

 

 

 

 

代码片段

要启用编辑/更新选项，我们需要将这段代码添加到 JqGrid。

{
    // 编辑选项
    zIndex: 100,
    url:  '/Demo/EditCustomer' ,
    closeOnEscape: 真,
    closeAfterEdit:  true ,
    recreateForm:  true ,
    afterComplete： 函数 （响应）
    {
        如果 （响应。响应文本）
        {
            警报（响应。响应文本）；
        }
    }
},

 

为了更新和删除数据，我们需要唯一的 ID。

在 jqGrid 中，我们可以通过设置 Key: true 来标记唯一 id。

代码片段

颜色型号：[
{
    name:  '客户 ID' ,
    可编辑：  true ，
    关键： 真的，
    隐藏： 真实
},

要首先编辑记录，我们需要选择一行，然后我们需要单击编辑图标。



选择一行并单击编辑图标后，将显示一个弹出窗口，其中包含您选择进行编辑的记录。

在这里，我们将更改电话号码并单击提交按钮以更新记录，为了更新数据，它将调用 EditCustomer Action 方法。



以下是更新客户数据时的调试视图。

调试视图
更新数据后的输出完成编辑客户下一步后，我们将删除记录。

删除客户

首先要删除记录，我们需要添加处理删除请求的操作方法。

下面是处理删除请求的代码片段，该请求以 Id (CustomerID) 作为输入。

公共 字符串 DeleteCustomer( int  Id)
{
    使用 (DatabaseContext db =  new  DatabaseContext())
    {
        客户客户 = db.Customers.Find(Id);
        db.Customers.Remove(客户);
        db.SaveChanges();
        return "删除成功" ;
    }
}

要启用删除选项，我们需要将这段代码添加到 JqGrid。

{
    // 删除选项
    zIndex: 100,
    url:  "/Demo/DeleteCustomer" ,
    closeOnEscape: 真,
    closeAfterDelete:  true ,
    recreateForm:  true ,
    msg:  "您确定要删除此客户吗？" ,
    afterComplete： 函数 （响应）{
        如果 （响应。响应文本）{
            警报（响应。响应文本）；
        }
    }
}

 

以类似的方式删除记录，首先我们需要选择一行，然后我们需要单击删除图标。



删除确认消息



如果单击删除按钮，它将调用 DeleteCustomer 操作方法。对于删除，我们需要唯一的 id，即 CustomerID，当我们点击删除按钮时会填充它，因为我们已将 CustomerID 列设置为 JqGrid 中的 Key。

调试视图
删除记录后的确认最后，我们已经完成了大部分操作，但仍有一个待处理的操作是搜索选项。

 

 

 

搜索客户

要启用搜索，我们需要做的第一件事是在寻呼机上启用搜索。

为此，我们需要在寻呼机中启用 {search: true}。

调试视图

.navGrid( '#pager' ,
{
    编辑： 真的，
    添加： 真实，
    德尔： 真的，
    搜索： 真,
    刷新： 真，
    closeAfterSearch: 真
},

之后，启用此选项，您可以在网格页脚中看到搜索图标。



但这里的一个问题是，当您单击编辑搜索时，它会在第一个下拉列表中显示所有列名称。



但是我们想在特定的列上进行搜索，我们需要为每一列设置 {search} 选项，如果我们想启用该列的搜索然后设置 {search: true} 并禁用搜索然后设置 {search: false} .

我们将启用仅搜索 2 列 [CompanyName, ContactName]

代码片段

颜色型号：[
{
    name:  '客户 ID' ,
    可编辑：  true ，
    关键： 真的，
    隐藏： 真实，
    搜索： 假
},
{
    name:  "CompanyName" , editable:  true , editrules: { required:  true  }, search:  true
},
{
    name:  'ContactName' , editable:  true , editrules: { required:  true  }, search:  true
},
{
    名称：  “ContactTitle” ，可编辑：true ，编辑 规则：{required：  true  }，搜索：  false
},
{
    name:  "City" , editable:  true , editrules: { required:  true  }, search:  false
},
{
    名称：  “PostalCode” ，可编辑：true ，编辑 规则：{ required：  true ，number：  true  }，搜索：  false
},
{
    名称：  “国家” ，可编辑：true ，编辑 规则：{required：  true  }，搜索：  false
},
{
    名称：  “电话” ，可编辑：true ，编辑 规则：{required：  true  }，搜索：  false
}
],

 

接下来我们将按 CompanyName 搜索记录。



当我们搜索的时候，接下来会调用GetCustomers Action 方法。

在 GetCustomers Action Method 中有一个 searchString 参数，它填充了我们搜索的数据。

调试GetCustomers Action 方法





最后，我们来看一下Index View 的完整代码。

索引视图的完整代码片段

@{
    布局 = 空；
}

<!DOCTYPE html>

<html>
<头>
    <meta name= "viewport"  content= "width=device-width"  />
    <title>索引</title>
    <link href= "~/Content/themes/base/jquery-ui.css"  rel= "stylesheet"  />
    <link href= "~/Content/jquery.jqGrid/ui.jqgrid.css"  rel= "stylesheet"  />

    <script src= "~/Scripts/jquery-1.10.2.min.js" ></script>
    <script src= "~/Scripts/jquery-ui-1.10.0.js" ></script>
    <script src= "~/Scripts/i18n/grid.locale-en.js" ></script>
    <script src= "~/Scripts/jquery.jqGrid.min.js" ></script>

    <脚本>
        $(函数 ()
        {
            $( "#Demogrid" ).jqGrid
            ({
                url:  "/Demo/GetCustomers" ,
                数据类型:  'json' ,
                mtype:  '获取' ,
                //表头名称
                colNames: [ 'CustomerID' ,  'CompanyName' ,  'ContactName' ,  'ContactTitle' ,  'City' ,  'PostalCode' ,  'Country' ,  'Phone' ],
                //colModel 从控制器获取数据并绑定到网格
                颜色型号：[
                {
                    name:  '客户 ID' ,
                    可编辑：  true ，
                    关键： 真的，
                    隐藏： 真实，
                    搜索： 假
                },
                {
                    name:  "CompanyName" , editable:  true , editrules: { required:  true  }, search:  true
                },
                {
                    name:  'ContactName' , editable:  true , editrules: { required:  true  }, search:  true
                },
                {
                    名称：  “ContactTitle” ，可编辑：true ，编辑 规则：{required：  true  }，搜索：  false
                },
                {
                    name:  "City" , editable:  true , editrules: { required:  true  }, search:  false
                },
                {
                    名称：  “PostalCode” ，可编辑：true ，编辑 规则：{ required：  true ，number：  true  }，搜索：  false
                },
                {
                    名称：  “国家” ，可编辑：true ，编辑 规则：{required：  true  }，搜索：  false
                },
                {
                    名称：  “电话” ，可编辑：true ，编辑 规则：{required：  true  }，搜索：  false
                }
                ],
                高度:  '100%' ,
                查看记录：  true ,
                标题：  'JQgrid 演示' ，
                emptyrecords:  '没有记录' ,
                行数：10，

                寻呼机：jQuery( '#pager' ),
                行列表：[10, 20, 30, 40],

                jsonReader：
                {
                    根：  “行” ，
                    页面：  “页面” ，
                    总计：  “总计” ，
                    记录：  “记录” ，
                    重复项： 假，
                    编号：  “0”
                },
                自动宽度： 真
            }).navGrid( '#pager' ,
            {
                编辑： 真的，
                添加： 真实，
                德尔： 真的，
                搜索： 真,
                刷新： 真，
                closeAfterSearch: 真
            },
            {
                // 编辑选项
                zIndex: 100,
                url:  '/Demo/EditCustomer' ,
                closeOnEscape: 真,
                closeAfterEdit:  true ,
                recreateForm:  true ,
                afterComplete： 函数 （响应）
                {
                    如果 （响应。响应文本）
                    {
                        警报（响应。响应文本）；
                    }
                }
            },
            {
                // 添加选项
                zIndex: 100,
                url:  "/Demo/CreateCustomer" ,
                closeOnEscape: 真,
                closeAfterAdd:  true ,
                afterComplete： 函数 （响应）{
                    如果 （响应.responseJSON）
                    {
                        if  (response.responseJSON ==  "保存成功" ) {
                            alert( "保存成功" );
                        }
                        其他 {
                            无功 消息=  “” ；
                            for  ( var  i = 0; i < response.responseJSON.length; i++) {
                                消息 += response.responseJSON[i];
                                消息 +=  "\n" ;
                            }
                        }

                    }
                }
            },
            {
                // 删除选项
                zIndex: 100,
                url:  "/Demo/DeleteCustomer" ,
                closeOnEscape: 真,
                closeAfterDelete:  true ,
                recreateForm:  true ,
                msg:  "您确定要删除此客户吗？" ,
                afterComplete： 函数 （响应）{
                    如果 （响应。响应文本）{
                        警报（响应。响应文本）；
                    }
                }
            }

            );
        });
    </脚本>
</头>
<身体>
    <div>
        <table id= "Demogrid" ></table>
        <div id= "pager" ></div>
    </div>
</正文>
</html>

 

哇，终于我们完成了如何在 ASP.NET MVC 中使用 JqGrid。

源代码和数据库脚本可供下载。

 

 

 

 

 https://www.c-sharpcorner.com/article/using-jqgrid-with-asp-net-mvc/