使用 MVC、 Entity Framework 和 MySQL 创建基于 JSON 数据的 div 网格

• 下载包 - 4.93 MB
• 下载解决方案 - 2.57 MB

引言

带有 Razor 的 MVC 改变了我们设计网页的方式。带有 jQuery 的客户端控件减少了服务器在解析服务器控件和加载页面事件上的负载。ASP.NET 中非常强大的 GridView 控件已被许多作为开源提供的 jQuery 网格所取代，但是在理解其源代码方面存在一些缺点或困难。此网格非常易于理解和实现，因为它使用程序员通常知道的 JavaScript、jQuery、JSON、CSS 和 HTML。因此，程序员在实现此网格之前无需学习任何新的插件。

这个基于 JSON 的网格在客户端完全执行以下操作

1. 基于 JSON 的搜索
2. 排序
3. 分页（首页、末页、上一页、下一页、当前页码显示和总页数显示）
4. 打开一个新行以添加数据或编辑数据
5. 取消/添加新行或取消编辑现有行
6. 必填字段以及数据类型和长度的验证

此网格在客户端和服务器端完全执行以下操作

浏览器仅通过 jQuery AJAX 请求发送所需的输入，并仅从 MVC 控制器获取以 JSON 形式添加或更新的特定行的更新数据。在删除的情况下，删除状态作为 JSON 在浏览器处接收。

然后，此 JSON 数据在浏览器中已存在的完整 JSON 中更新。标记在浏览器中通过 jQuery 重新创建。

Using the Code

运行源代码所需的软件平台需要带有 Visual Studio 2012 的 MVC4、MySQL 5.2.47 CE Revision 10398 或更高版本、来自 Nuget 的 Entity Framework、来自 Nuget 的 NewtonSoft.Json 以及下载 *jquery.validator-0.3.6.min.js*。我已经自定义它以在附加的源代码中使用。

我开始着手于此网格的工作，方法是为所有操作（插入、更新、取消、删除以及在网格中添加新数据行）创建部分视图，但是后来我创建了一个基于 JSON 的网格。所有代码都附加在源代码中。

关注点

有趣的是，我期待了解一种使用带有 Entity Framework 的 MySQL 的巧妙技术，与此同时，我获得了一个使用市场上可用的开源 jQuery 网格的要求。我在想，为什么我应该学习插件的功能。为什么不使用 JSON 数据创建自己的网格并完全控制代码？最后我想出了一些东西。这是一个开始，很快就会有更多对程序员友好的高效插件可用。