ASP.NET MVC-4、实体框架和JQGrid演示，带有一个简单的待办事项列表Web应用程序

Dileep Ashok

4.88/5 (37投票s)

2014 年 7 月 30 日

CPOL

10分钟阅读

270062

Asp.Net MVC-4、实体框架和JQGrid演示，带有一个简单的待办事项列表Web应用程序

使用MVC和EntityFramework学习并构建Web应用程序

https://www.youtube.com/watch?v=GanjklfebEc&index=1&list=PLdmgFSerzv2Kl00tz0qY-jxDPnPowpRaT

概述

TodoList是一个简单的Web应用程序，用于创建、存储和修改用户维护的待办事项任务，其中包含以下字段（任务名称、任务描述、严重性、目标日期、任务状态）。

TodoList Web应用程序是使用MVC - 4架构、Code-first实体框架（ORM）和Jqgrid来显示数据创建的。

源代码

您可以从 https://dotnetsourcedileep.codeplex.com/ 下载源代码

我将本主题分为2个部分。

第1节：包含我们所用技术的基本理论细节以及使用ASP.net MVC-4、Code-first实体框架和JQgrid技术的优势。

视频: https://www.youtube.com/watch?v=OhJtxRvgeK0

第2节：包含使用ASP.net MVC-4、Code-first实体框架和JQgrid逐步创建简单TodoList应用程序的实际实现。

视频: https://www.youtube.com/watch?v=d-d4C2SVAYQ

第3节: JQGrid和MVC演示，带有自定义过滤器或搜索功能

https://codeproject.org.cn/Tips/825724/Section-JQGrid-and-MVC-Demo-with-Custom-Filters-or

-----------------------------------------------------------------------------------------------------------------------------

第1节

MVC

MVC是一种开发结构良好且易于维护的应用程序的模式。因此，使用MVC我们可以开发可测试、灵活、可扩展、基于标准的应用程序。
MVC并非Asp.net Web Forms开发的替代品。它位于Asp.net开发之上。MVC框架定义在“System.Web.MVC.Assembly”中。
MVC遵循“约定优于配置”的原则。

模型

模型代表应用程序数据域。它可以包含与数据域相关的逻辑。简而言之，应用程序业务逻辑包含在模型中。
模型包含一组C#类，具有一组属性，并通过数据注释在其上定义了验证。它还可以包含数据访问、数据聚合逻辑等。
模型可以是实体或业务逻辑。

视图

视图代表Web应用程序的表示层。
视图根据模型的数据（即控制器请求的数据）管理信息的显示。
视图代表用户界面，最终用户与之交互。简而言之，所有与UI相关的逻辑都包含在视图中。

控制器 (Controller)

控制器处理用户与Web应用程序的交互。
用户请求通过控制器到达模型，操作其中的记录，并使用视图将数据渲染到UI。
控制器包含控制流逻辑。
控制器包含一组动作方法。

为什么选择MVC或使用MVC的优势

使用MVC有许多优点，如下所示：-

MVC帮助我们开发松耦合架构。
复杂的应用程序可以轻松管理。
通过将应用程序划分为模型、视图和控制器，可以实现关注点分离。
对测试驱动开发（TDD）的广泛支持。单元测试将变得容易，额外的测试层将为防止意外行为提供又一层防御。
Asp.net MVC轻量级，因为它不使用视图状态。
搜索引擎优化（SEO）干净的URL，并且不使用扩展方法来定位物理文件。
丰富的JavaScript支持，包括非侵入式JavaScript、带有Json绑定的Jquery验证。
没有回发事件。
富有表现力的视图，包括新的Razor视图引擎和HTML-5支持。

实体框架

Microsoft ADO.Net 实体框架是一个对象关系映射 (ORM) 框架，它使开发人员能够将关系数据作为特定领域对象进行处理，从而消除了开发人员通常需要编写的大部分数据访问管道代码。

代码优先方法

Code First 主要用于领域驱动设计 (DDD) 方法。我们可以专注于领域设计并根据领域需求开始编写类，而不是首先设计数据库，然后创建与数据库设计匹配的类。Code First API 将根据您的实体类和配置即时创建数据库。

为什么选择实体框架？

基本上，在现实世界场景中，存在两种类型的组或模型，如逻辑数据模型和面向对象领域模型

逻辑数据模型

几乎所有当今的业务应用程序都必须与关系数据库通信。这些关系数据库也可以说它有一个后端SQLSERVER，包含所有存储过程、带外键的表、视图等。这由一组人处理，称为数据库中心。

面向对象领域模型

应用程序的开发方式与逻辑数据模型完全不同。这些面向对象领域模型处理对象、行为、属性、继承、多态等。这由一组人处理，称为应用程序中心。

阻抗不匹配

由于上述两种模型，产生了阻抗不匹配，因为开发人员花费大量时间和精力编写代码，以在数据库希望看到数据的方式和应用程序希望看到数据的方式之间进行转换。

因此，Ado .net 实体框架旨在通过在逻辑数据模型和应用程序领域模型之间提供抽象层来解决该问题。

使用实体框架的优势

实体框架使开发人员能够通过针对概念性应用程序模型进行编程而不是针对关系存储模式进行编程来创建数据访问应用程序。
应用程序可以根据以应用程序为中心的更概念性模型（包括具有继承、复杂成员和关系的类型）进行工作。
实体框架是一个ORM工具，提供简单的API来执行CRUD操作。它帮助我们从前端自动执行DML和DDL操作，而不是手动从后端执行。
实体框架提供强类型类，提供智能感知支持、编译时和调试器选项。
管道和映射都为您完成。因此，开发人员无需编写通常需要的大部分数据访问管道代码（例如ADO.net）
节省大量时间，并帮助我们快速开发应用程序，更专注于业务细节。

JQGRID

Jqgrid 是一个启用 Ajax 的 JavaScript 控件，提供在网格上表示和操作表格数据的解决方案。由于网格是一个客户端解决方案，通过 Ajax 回调动态加载数据，因此它可以与任何服务器端技术集成，包括 PHP、ASP Java Servlet、JSP 和 Perl。

JQGrid 使用 Jquery javascript 库。

要求

JQGrid 插件
Jquery 库，版本 1.1.4 或更高。
网络浏览器
数据可以存储在 xml、json 中
Web 服务器（IIS、Apache、Tomcat）
数据库后端（SQL Server、Oracle MSSql）
服务器端脚本语言（PHP、ASP）

JQGrid 是一个组件，它以一种简单的方式帮助您使用服务器端技术在客户端表示数据库信息。此外，它还帮助您将数据操作回数据库。

JQGrid 的功能

JQGrid 帮助我们开发大部分浏览器兼容的网页，并支持跨浏览器支持功能。
基于 CSS 的主题。开发人员可以通过定义自己的 UI CSS 框架来更改网格皮肤。
新的渲染引擎加载速度比以前快 5-10 倍。
存在分页功能。因此无需从服务器检索所有数据。
排序、各种数据类型和子网格支持功能。
事件处理程序和用户 API。
格式化程序支持在客户端本身将单元格内容高级格式化为所需格式。
内联编辑：轻松更新特定行中的单元格内容。
搜索和过滤。
导入和导出数据。

第2节

使用 MVC-4、Code-first 实体框架和 Jqgrid 创建简单的 TodoList 应用程序。

创建一个新的 MVC 4 Web 应用程序。
输入应用程序名称并单击“确定”。

选择所需的模板和视图引擎。

打开位于 Views -> Shared -> _Layout.cs 页面中的布局页面，并为 TODOLIST 选项卡添加一个新的 Action Link。

 <li>@Html.ActionLink("TodoList", "Index", "TodoList")</li>

此操作链接用于菜单中的 TodoList 选项卡。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - Todo List Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
            </div>
            <div class="float-right">
                <section id="login">
                    @Html.Partial("_LoginPartial")
                </section>
                <nav>
                    <ul id="menu">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("TodoList", "Index", "TodoList")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div id="body">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

转到工具 -> 库包管理器 -> 包管理器控制台。
在包管理器控制台中安装实体框架 - 5。

右键单击“引用”并单击“管理 Nuget”。
搜索 Jqgrid 并选择 JQueryJQGrid 并安装它。

在 Model 中添加 TodoList 类文件以存储实体。

打开 -> "TodoList.cs" 并向 TodoList 模型类添加所需的实体。
Todo 列表包含屏幕中使用的所有属性。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace TodoListDemoApplication.Models
{
    public class TodoList
    {
        public int Id { get; set; }
        public string TaskName { get; set; }
        public string TaskDescription { get; set; }
        public DateTime TargetDate { get; set; }
        public string Severity { get; set; }
        public string TaskStatus { get; set; }
    }
}

向解决方案添加一个 DBContext 文件夹，并添加一个 "TodoContext cs" 类。

创建的 TodoContext 充当数据库和 LinqObject 之间的桥梁或连接对象，类似于 Ado.net 连接对象。
添加一个 DbSet，表示数据库中将存在的表。

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using TodoListDemoApplication.Models;

namespace TodoListDemoApplication.DBContext
{
    public class TodoContext:DbContext
    {
        public DbSet<TodoList> TodoLists { get; set; }
    }

修改 web.config 文件中的连接字符串，名称将是我们创建的上下文名称 (TodoContext)。
还要提供正确的连接字符串详细信息，例如数据源、初始目录和提供程序名称等。

<connectionStrings>
<add name="TodoContext" 
     connectionString="Data Source=(Local);Initial Catalog=TodoListDemo;Integrated Security=SSPI;"
     providerName="System.Data.SqlClient" />
</connectionStrings>

进入包管理器控制台。
通过执行命令 "EnableMigrations -ContextTypeName ContextName" 启用 Code First Code Migrations 方法的迁移。
Code-First 迁移将在架构修改期间处理数据。因此，我们无需编写在早期旧版本实体框架中需要由开发人员处理的 "dropcreate database" 方法。

为我们正在使用的特定上下文启用迁移后，下一步是添加迁移。
在包管理器控制台中执行 "Add-Migration" 命令。这将生成迁移文件、sql 代码，除非我们运行 "update-database" 命令，否则不会在 SQL Server 中执行。

代码迁移文件已生成。

"update-database" 命令将通过运行代码迁移文件中的代码来播种数据库。

打开 Sql Server 并检查使用代码迁移实体框架方法自动生成的数据库和表。

添加一个 Todolist 控制器。

向 index action 方法添加一个视图。

视图已添加。

添加 TodoList javascript 文件。

"GetTodoLists" 是一个动作方法，它将所有 Todo 列表呈现到 JQGrid，并在动作方法中实现排序和分页。

JQGrid 功能代码已添加到 TodoList.js 文件中，该文件将放置在 Jquery ready 函数内

一些重要的 JQGrid 属性细节，通常用于解释。

按照以下顺序在 index 页面中添加所需的 Jquery, Jqgrid 脚本引用。

删除布局文件中的 jquery 引用以避免冲突。

运行应用程序，我们应该能够看到 Jqgrid。
下一步是在 JQGrid 中实现 CRUD 功能。

在 "TodoList.Js" 文件中添加带有 CRUD 操作的 navGrid 功能。

Create 是 TodoList 控制器中用于创建 Todo List 的 HTTP Post 动作方法。
实体框架用于插入数据库，避免使用 ado.net 机制。
实体框架将在内部生成查询，并且只有在调用 SaveChanges 方法后才会在数据库中运行。
"ModelState.IsValid" 用于验证模型。"ModelState.IsValid" 将在所有模型验证在服务器端都满足时返回 true，否则返回 false，并且不允许执行后续代码。