CRUD Operations with ASP.NET Core 1.0, TypeScript 1.8 and Gijgo 0.6

• Download source - 731.5 KB

Introduction

This article is going to show how you can easily implement paging, sorting, filtering and CRUD operations with Gijgo Grid and Dialog in ASP.NET Core with Typescript.

Background

In the sample project that you can download from this article, I'm using jQuery Grid and jQuery Dialog 0.6.2 by gijgo.com, jQuery 2.2.3, TypeScript 1.8, Entity Framework Core 1.0.0-rc2-final and ASP.NET Core MVC 1.0.0-rc2-final.

A Few Words About the Libraries that I'm Going to Use in This Article

• ASP.NET Core is re-implementation of ASP.NET as a modular web framework, together with other frameworks like Entity Framework. The new framework uses the new open-source .NET Compiler Platform (codename "Roslyn") and is cross platform.
• Gijgo is a set of free open source JavaScript controls distributed under MIT License. All widgets are high performance and built on top of the jQuery JavaScript Library. Gijgo is compatible with jQuery UI, Bootstrap and Foundation.
• TypeScript is a free and open source programming language developed and maintained by Microsoft. It is a strict superset of JavaScript, and adds optional static typing and class-based object-oriented programming to the language.

How to Run the Example from the Attachment

If you want to run the example from the attachment, you have to follow the steps below:

1. Install the following packages if you don't have them already on your machine.
   • Visual Studio 2015 Update 2
   • .NET Core 1.0.0 RC2
   • TypeScript 1.8
   • Node.JS
   • PowerShell version 5.0
2. Open the project in Visual Studio 2015.
3. Execute "Add-Migration InitialCreate" and then "Update-Database" in "Package Manager Console" in order to create the database.

   

4. Run the project and perform CRUD operations with players.

How to Build It From Scratch

If you want to build the same app from scratch, you can follow the steps below. Keep in mind that this could change in the future, because I'm using release candidates that may change.

1. Install the following packages if you don't have them already on your machine.
   • Visual Studio 2015 Update 2
   • .NET Core 1.0.0 RC2
   • TypeScript 1.8
   • Node.JS
   • PowerShell version 5.0
2. Open Visual Studio 2015 and create new web project from type "ASP.NET Core Web Application (.NET Core)".
3. Choose "Empty" template for you application.
4. Run the following commands in "Package Manager Console" to install ASP.NET Mvc Core and 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. Add new item to the project from type "Client-side/Bower Configuration File" (bower.json).
6. Add dependencies in bower.json to jquery 2.2.3 and gijgo 0.6.2. This is going to automatically include those 2 libraries in the "wwwroot/libs" folder of your project.
7. Open "Node.js command prompt" and navigate to the wwwroot folder in your project.
8. Run the following commands in the command prompt.
   • npm install tsd@next -g (install TypeScript Definition manager for DefinitelyTyped)
   • tsd install jQuery --save (install TypeScript definitions for jquery)
   • tsd install gijgo --save (install TypeScript definitions for gijgo)
9. Add "ASP.NET Configuration File" to your solution called appsettings.json.

   

10. Configure correct default connection string to DB that you are going to use for this example. Don't create the database yet, because the database would be created automatically by the EntityFramework.

    

11. Create Models folder at a root level of the project.
12. Add ApplicationDbContext.cs (EntityFramework context) and Player.cs (Class for the player entity) classes to the Models folder.
13. Enable appsettings.json, EntityFramework and MVC in the StartUp.cs file as it is shown below:

    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<applicationdbcontext>(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?}");
            });
        }
    }</applicationdbcontext>

14. Add Controllers folder and HomeController.cs inside this folder to manage CRUD operations on the server side.
15. Create Views folder and Home folder with Index.cshtml inside the Views folder. Add the HTML structure in the Index.cshtml that's needed for the CRUD operations.
16. Create /wwwroot/scripts/site.ts file that manages all CRUD operations with TypeScript.
17. Create /wwwroot/css/site.css file with stylesheets for Index.cshtml.
18. Add manually Microsoft.EntityFrameworkCore.Tools to tools section in the project.json file.

    

19. Execute "Add-Migration InitialCreate" and then "Update-Database" in "Package Manager Console" in order to create the database.

    

20. Run the project and perform CRUD operations with players.

I hope that this article is going to be useful for your project. Happy coding!