使用 ASP.NET Core 1.0、TypeScript 1.8 和 Gijgo 0.6 进行 CRUD 操作

• 下载源文件 - 731.5 KB

引言

本文将展示如何在 ASP.NET Core 中使用 TypeScript，通过 Gijgo Grid 和 Dialog 轻松实现分页、排序、过滤和 CRUD 操作。

背景

在本文可下载的示例项目中，我使用了 gijgo.com 的 jQuery Grid 和 jQuery Dialog 0.6.2，jQuery 2.2.3，jQuery 2.2.3，TypeScript 1.8，Entity Framework Core 1.0.0-rc2-final 和 ASP.NET Core MVC 1.0.0-rc2-final。

关于本文将要使用的库的一些说明

• ASP.NET Core 是 ASP.NET 的一个重新实现的模块化 Web 框架，同时还有 Entity Framework 等其他框架。新框架使用了新的开源 .NET Compiler Platform（代号“Roslyn”），并且是跨平台的。
• Gijgo 是一组免费的开源 JavaScript 控件，根据 MIT 许可证分发。所有控件都具有高性能，并且构建在 jQuery JavaScript 库之上。Gijgo 与 jQuery UI、Bootstrap 和 Foundation 兼容。
• TypeScript 是由 Microsoft 开发和维护的免费开源编程语言。它是 JavaScript 的一个严格超集，并为该语言添加了可选的静态类型和基于类的面向对象编程。

如何运行附件中的示例

如果您想运行附件中的示例，您需要按照以下步骤操作

1. 如果您的计算机上还没有以下包，请安装它们。
   • Visual Studio 2015 Update 2
   • .NET Core 1.0.0 RC2
   • TypeScript 1.8
   • Node.JS
   • PowerShell 版本 5.0
2. 在 Visual Studio 2015 中打开项目。
3. 在“程序包管理器控制台”中执行“Add-Migration InitialCreate”，然后执行“Update-Database”，以创建数据库。

   

4. 运行项目，并对玩家执行 CRUD 操作。

如何从头开始构建

如果您想从头开始构建相同的应用程序，可以按照以下步骤操作。请注意，由于我使用的是可能发生更改的候选版本，因此这些步骤将来可能会有所不同。

1. 如果您的计算机上还没有以下包，请安装它们。
   • Visual Studio 2015 Update 2
   • .NET Core 1.0.0 RC2
   • TypeScript 1.8
   • Node.JS
   • PowerShell 版本 5.0
2. 打开 Visual Studio 2015，并从“ASP.NET Core Web 应用程序（.NET Core）”类型创建新的 Web 项目。
3. 为您的应用程序选择“Empty”模板。
4. 在“程序包管理器控制台”中运行以下命令，以安装 ASP.NET Mvc Core 和 Entity Framework Core。
   • Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 1.0.0-rc2-final
   • Install-Package Microsoft.EntityFrameworkCore.Tools -Version 1.0.0-preview1-final
   • Install-Package Microsoft.EntityFrameworkCore.Tools.Core -Version 1.0.0-rc2-final
   • Install-Package Microsoft.AspNetCore.Mvc -Version 1.0.0-rc2-final
   • Install-Package Microsoft.AspNetCore.Razor.Tools -Version 1.0.0-preview1-final
   • Install-Package Microsoft.AspNetCore.StaticFiles -Version 1.0.0-rc2-final
   • Install-Package Microsoft.Extensions.Configuration.Json -Version 1.0.0-rc2-final
   • Install-Package Microsoft.Extensions.Configuration.EnvironmentVariables -Version 1.0.0-rc2-final
5. 向项目中添加一个类型为“Client-side/Bower Configuration File”（bower.json）的新项。
6. 在 bower.json 中添加对 jquery 2.2.3 和 gijgo 0.6.2 的依赖。这将自动将这两个库包含在项目中的“wwwroot/libs”文件夹下。
7. 打开“Node.js 命令提示符”，并导航到项目中的 wwwroot 文件夹。
8. 在命令提示符中运行以下命令。
   • npm install tsd@next -g （安装 DefinitelyTyped 的 TypeScript 定义管理器）
   • tsd install jQuery --save （安装 jquery 的 TypeScript 定义）
   • tsd install gijgo --save （安装 gijgo 的 TypeScript 定义）
9. 在解决方案中添加一个名为 appsettings.json 的“ASP.NET 配置文件”。

   

10. 配置正确的默认数据库连接字符串，用于此示例。请勿立即创建数据库，因为数据库将由 EntityFramework 自动创建。

    

11. 在项目根目录下创建一个 Models 文件夹。
12. 将 ApplicationDbContext.cs（EntityFramework 上下文）和 Player.cs（玩家实体类）添加到 Models 文件夹。
13. 在 StartUp.cs 文件中启用 appsettings.json、EntityFramework 和 MVC，如下所示

    public class Startup
    {
        public IConfigurationRoot Configuration { get; set; }
    
        public Startup(IHostingEnvironment env)
        {
            var builder = new ConfigurationBuilder()
                .SetBasePath(env.ContentRootPath)
                .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
                .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true);
            builder.AddEnvironmentVariables();
            Configuration = builder.Build();
        }
    
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContext(options => 
                options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
            services.AddMvc();
        }
    
        public void Configure(IApplicationBuilder app)
        {
            app.UseStaticFiles();
            app.UseMvc(routes => {
                routes.MapRoute(name: "default", 
                template: "{controller=Home}/{action=Index}/{id?}");
            });
        }
    }

14. 添加 Controllers 文件夹，并在该文件夹内添加 HomeController.cs 来管理服务器端的 CRUD 操作。
15. 创建 Views 文件夹和 Home 文件夹，并在 Views 文件夹内创建 Index.cshtml。在 Index.cshtml 中添加 CRUD 操作所需的 HTML 结构。
16. 创建 /wwwroot/scripts/site.ts 文件，该文件管理所有 TypeScript 的 CRUD 操作。
17. 创建 /wwwroot/css/site.css 文件，其中包含 Index.cshtml 的样式表。
18. 手动将 Microsoft.EntityFrameworkCore.Tools 添加到 project.json 文件中的 tools 部分。

    

19. 在“程序包管理器控制台”中执行“Add-Migration InitialCreate”，然后执行“Update-Database”，以创建数据库。

    

20. 运行项目，并对玩家执行 CRUD 操作。

希望本文对您的项目有所帮助。编码愉快！