MVC 中的 JqGrid - 基本知识
在 MVC 应用程序中使用 JqGrid
引言
我很久没写新文章了，这次选择的主题是 JQGrid。
在我之前写的 JQGrid 文章中，收到了非常好的反响。
我想感谢我所有的读者朋友们对我的支持，他们花了时间阅读我的文章，并给了我宝贵的反馈，这激励我写了新文章。
我收到了很多关于我之前 JQGrid 文章的问题，但我没能像预期的那样有效地回答这些问题，对此我表示歉意。
所以，在这篇文章中，我也想一起回答那些问题。
您可能对我在写什么感到好奇。
是的…
在这里，我将向您展示如何在 MVC 4 或说 MVC 应用程序中使用 JQGrid。
我从读者那里收到的一个问题是如何在 MVC 4 应用程序中使用 JQGrid。
这和我在上一篇文章中描述的在 asp.net 应用程序中的做法类似。
我计划将这篇文章作为我即将发布的 JQGrid 和 MVC 系列文章的铺垫。
我们将如何做？
我将使用 visual studio 2012 来开发这个演示应用程序，假设您知道如何使用基本模板创建一个 MVC 4 应用程序。
这样，我们就为这场演出搭建好了舞台。
第一个计划是让一个 MVC 4 应用程序运行起来，并包含一个单一的视图（页面）。
请按照以下步骤创建一个视图并运行应用程序。
在 VS 2012 中创建基本的 MVC 4 应用程序
打开 VS 2012
--> 文件
--> 新建项目
--> Web
--> Asp.net MVC 4 Web 应用程序
--> 选择模板
--> 空白
然后为你想要的项目起一个名字，我这里给我的项目和解决方案起名为 JQGridJQueryPlugin…
希望听起来不错。
根据以上步骤，我能够创建一个如下所示的、包含文件结构的优秀解决方案。
下一步，我们需要创建一个控制器，然后从控制器创建视图。
右键单击 Controllers 文件夹 --> 添加 -->控制器 --> DefaultController。
这样我们就创建了一个名为 DefaultController 的控制器。
下一步是从控制器创建视图。
打开 DefaultController.cs 文件 --> 在里面，你会看到一个名为 Index() 的操作方法 --> 右键单击它，然后会弹出一个上下文菜单 --> 从中选择添加视图 --> 将视图命名为 Index 本身。
现在我们的解决方案看起来应该像下面的图片。
尝试运行你的应用程序……。
你试过了吗……？
然后发生了什么……？
是的…
我明白了……
由于应用程序默认在路由配置中寻找 Home 控制器和 Index 操作，因此应用程序会抛出 404 异常。
总之，我不深入探讨路由等细节，要解决这个异常，你只需要编辑 App_Start 文件夹 中的 RouteConfig.cs 文件。
将 MapRoute 中的控制器名称从 Home 改为 Default。
现在尝试运行你的应用程序，看看会发生什么……。
是的……
你会在页面上看到一个写着 Index 的网页，对吧？
如果你在浏览器中看到上述内容，我们可以说我们的舞台已经搭建好了。
让我们添加一些样式，让它看起来更具吸引力，不过我不会自己创建一个新的样式表。
让我们谷歌搜索免费的 CSS 模板，找一些有趣的东西。
好的，经过 15 分钟的搜索，我找到了一些简单而标准的。
我花这么多精力只是因为，我不喜欢没有任何最低限度样式应用的应用程序；这就是为什么我花这么多精力来寻找更好的东西。
你不用担心 CSS。你所要做的就是下载解决方案文件夹，并将 styles 文件夹复制到你的解决方案的根目录，然后我创建了一个如下所示的文件夹，就在解决方案根目录下。
从上面的 BaseHtml.html 文件中，复制全部内容到你的 Index.cshtml 文件中。
在粘贴 BaseHtml.html 的内容之前，请确保 Index.cshtml 文件中的所有内容都已被删除。
然后尝试运行你的应用程序……。
看起来真的很漂亮……
对吧？
这是我的。
这样，我们就完成了带有单个时尚网页的 MVC 应用程序。
我明白，对于那些已经是 MVC 专家的人来说，你肯定会咒骂我；无非是浪费了你们宝贵的时间。
对此，我表示歉意……
我的目的是，即使是没有任何 MVC 经验的新开发者，也能直接尝试，而无需依赖任何其他支持材料。
将 JQGrid 插入 MVC 应用程序
好的，让我们开始吧。
首先，从 http://www.trirand.com/blog/?page_id=6 下载最新版本的 JQGrid。点击页面底部的下载按钮，这将以 zip 文件格式下载 grid 所需的所有文件。当我尝试下载时，我得到了一个名为 jquery.jqGrid-4.6.0 的 zip 文件夹，这表明我下载的是 JQGrid 的 4.6.0 版本。
然后将 zip 文件解压到方便的位置。
现在我们可以开始将解压后的文件夹中的必需文件一个一个地添加到我们的解决方案中。
首先创建一个名为 Script 的文件夹，并在 Scripts 文件夹内再创建一个名为 JQGrid 的文件夹，然后从 \jquery.jqGrid-4.6.0\js 的位置添加快照中的 .JS 文件。
还将 \jquery.jqGrid-4.6.0\js\i18n\ grid.locale-en.js 文件从解压位置添加到
Scripts --> JQGrid 文件夹。
这样我们就完成了脚本文件，接下来是添加 CSS 文件。
将文件 \jquery.jqGrid-4.6.0\css\ ui.jqgrid.css 添加到我们解决方案的 styles 文件夹中。
添加完所有这些文件后，我们的解决方案看起来应该像下面这样。
我们已经准备好了所有必需的文件，包括 JQuery 文件。
现在我们可以在 Index.cshtml 文件中开始组合所有这些文件了，所有这些新添加的与 JQGrid 相关的文件都应该添加到 Index.cshtml 文件的 head 标签内，如下图所示。
然后，我们在 Index.cshtml 文件中添加一个 id 为 tblJQGrid 的 table 用于 JQGrid，并通过 JavaScript 将 JQGrid 绑定到 table。
所以我已经在 Index.cshtml 文件中添加了具有上述 id 的 table，并像下面这样添加了用于将 table 绑定到 JQGrid 的脚本。
<script type="text/javascript">
$(document).ready(function () {$("#tblJQGrid").jqGrid(
{url: '',
datatype: "json",
mtype: 'GET',
colNames: ['Id', 'First Name', 'Last Name', 'Last 4 SSN', 'Department', 'Age', 'Salary', "Address", 'Marital Status'],
colModel: [
{ name: 'EmloyeeId', index: 'EmloyeeId', width: 20, stype: 'text' },
{ name: 'FName', index: 'FName', width: 150 },
{ name: 'LName', index: 'LName', width: 150 },{ name: 'SSN4', index: 'SSN4', width: 100 },
{ name: 'Department', index: 'Department', width: 80, align: "right" },
{ name: 'Age', index: 'Age', width: 80, align: "right" },
{ name: 'Salary', index: 'Salary', width: 80, align: "right" },
{ name: 'Address', index: 'Address', width: 150, sortable: false },
{ name: 'MaritalStatus', index: 'MaritalStatus', width: 100, sortable:false }],rowNum: 10,
sortname: 'EmloyeeId',
viewrecords: true,
sortorder: "desc",
caption: "List Employee Details",
scrollOffset: 0});
});
</script>
关于指定的所有属性的更多细节，你可以参考我之前的文章。
好的，让我们来运行应用程序，看看它是什么样的。jqgrid 是否显示出来了。
你准备好了吗……？
我在 UI 上看到了类似上面的内容。
是的……
我们可以说的是，grid 正在渲染，但没有数据。但是……样式呢？
我的意思是 CSS……
在我看来很糟糕。你觉得呢……？
哎呀，我忘了件事……我忘了在我们的解决方案中添加 JQuery UI 主题。
让我们去下载 jQuery UI 主题，看看我们的 grid 是什么样子的。
是的，我找到了链接，我下载了一个与我们的 CSS 匹配的主题，叫做 Cupertino。
我像 JQGrid 文件一样，将它下载为一个 zip 文件。
为了容纳这些文件，我们需要在我们的 styles 文件夹内创建一个 images 文件夹，然后将解压位置中的所有 images 添加到
\jquery-ui-1.10.4.custom\jquery-ui-1.10.4.custom\css\cupertino\images 到我们 styles 文件夹中的 images 文件夹。
然后也添加 CSS 文件
\jquery-ui-1.10.4.custom\jquery-ui-1.10.4.custom\css\cupertino\jquery-ui-1.10.4.custom.min
希望你已经完成了所有这些事情……
然后尝试再次运行应用程序，看看我们的 grid 是什么样子的。
看起来真的很棒……
对吧？
如果你想看我的 grid，请看下面的图片。
简直太棒了，对吧？
当你将 JQGrid 组合到 ASP.Net 应用程序中时，你是否感到有什么不同？
和之前一样，只是有一些细微的区别。
好的，不管怎样，我们已经完成了第二步。
将数据绑定到 JQGrid
在我之前的 JQGrid 文章中，我为了方便使用了 Mongo DB 作为我的数据库。我收到了许多读者询问连接 SQL Server DB 的代码。所以我想在这里使用 SQL Server。
为此，我创建了一个与 grid schema 匹配的表 Employee，以及一个用于从 grid 中获取数据的存储过程 spGetEmployee。
在继续之前，请注意，该数据库没有遵循任何最佳实践，仅用于演示目的。
让我们去为当前解决方案中的数据库操作创建一个 数据访问层 (DAL)，通过添加一个类库项目。我创建了一个名为 KDAL 的 DAL，并在其中创建了一个名为 KDATA 的类，利用 ADO.net 断开式连接 来从 DB 中检索 employee 数据。
请参考下面的代码，我用它来连接我的本地 DB。
namespace KDAL
{
public class KDATA
{
public static DataTable GetDataTable()
{
SqlConnection sqlCon = new SqlConnection("Data Source =(local);Initial Catalog=JQ GridDemo;Integrated Security=SSPI");
SqlDataAdapter da = new SqlDataAdapter("spGetEmloyee", sqlCon);
da.SelectCommand.CommandType = CommandType.StoredProcedure;
//da.SelectCommand.Parameters.Add("@EmpId", SqlDbType.Int).Value = 123;
DataTable dt = new DataTable();
da.Fill(dt);
return dt;
}
}
}
如果数据库名称与你的匹配，上面的代码将成功返回一个数据集。
我测试了代码，对我来说运行完美。
那么我们接下来需要做什么呢？往数据库里插入一些虚拟数据。我们继续做吧。
我用 notepad++ 创建了一些虚拟数据。
如果你需要表和存储过程的创建脚本以及虚拟数据，请查看 DAL 项目中的一个名为 CreateDbWithDummyData.txt 的文本文件。
你所要做的就是复制文本文件中的脚本，然后在你的 SQL Server 中执行它。
完成所有这些之后，只需交叉验证一下你的 DB 是否填充了足够的数据以供显示。
对我来说一切都很完美，现在我要创建一个新的控制器来为 JQGrid 获取数据。
在那个控制器里，我将调用数据访问方法来获取数据，然后使用 Newtonsoft dll 将数据序列化为 JSON 格式。
如果你使用默认的 MVC JSON 序列化机制进行 JSON 序列化，可能会遇到循环引用等异常，为了避免这种麻烦，最好使用 Newtonsoft dll。
我在这里所做的是在控制器中创建了一个方法，获取数据，然后将数据序列化为 JSON 字符串，如下所示。
这样我们就准备好了 JSON 字符串，接下来我们要做的就是将 JQGrid 与上面这个方法返回的字符串数据绑定。为此，我们需要将 JQGrid 的 URL 属性设置为这个新创建的方法。
然后尝试运行你的应用程序，看看它是否有效。
发生了什么……？
一切顺利吗？
对我来说，一切顺利，我得到了一个如下所示的 grid。
怎么样……？
我们完成了……
结束语
在撰写本文时，我的目标读者是 MVC 应用程序和 JQGrid 的初学者。
我只是想为初学者和中级开发人员搭建一个平台，让他们开始使用 JQGrid 和 MVC，并作为我即将发表的文章的第一个卷。
希望你得到了开始所需的东西。