To-Do List Implementation With ASP.NET Core, TypeScript And Gijgo

This article is going to show how you can easily create TODO List with Gijgo Controls and TypeScript in ASP.NET Core.

Background

In this article, I'm going to use jQuery Grid and jQuery Dialog 0.6.2 by gijgo.com, jQuery 2.2.3, TypeScript 1.8, Entity Framework Core 1.0.0 and ASP.NET Core MVC 1.0.0.

A few words about the libraries that I'm going use in this article:

• ASP.NET Core is a 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"), a cross platform.
• Gijgo is a set of free open source JavaScript controls, distributed under MIT License. All the widgets are of 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 an open source programming language, developed and maintained by Microsoft. It is a strict superset of JavaScript, adds optional static typing and a class-based object-oriented programming to the language.

Pre-Requirements

In order to be able to run the example from the attachment or build it from scratch, you need to have the following tools:

• Visual Studio 2015 Update 3
• .NET Core 1.0.0
• TypeScript 1.8
• Node.JS
• PowerShell version 5.0

How to run the example from the attachment.

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

1. Open the project in Visual Studio 2015.
2. Execute "Add-Migration InitialCreate" and then "Update-Database" in "Package Manager Console" in order to create the database.
   
   
   
   
3. 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 can change in the future, because I'm using release candidates that may change.

1. Open Visual Studio 2015 and create new Web project from type "ASP.NET Core Web Application (.NET Core)".
   
   
   
   
2. Choose "Empty" template for your Application.
   
   
   
   
3. 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
   • Install-Package Microsoft.EntityFrameworkCore.Tools -Version 1.0.0-preview2-final
   • Install-Package Microsoft.EntityFrameworkCore.Tools.Core -Version 1.0.0-rc2-final
   • Install-Package Microsoft.AspNetCore.Mvc -Version 1.0.0
   • Install-Package Microsoft.AspNetCore.Razor.Tools -Version 1.0.0-preview2-final
   • Install-Package Microsoft.AspNetCore.StaticFiles -Version 1.0.0
   • Install-Package Microsoft.Extensions.Configuration.Json -Version 1.0.0
   • Install-Package Microsoft.Extensions.Configuration.EnvironmentVariables -Version 1.0.0
     
     
4. Add new item to the project from type "Client-side/Bower Configuration File" (bower.json).
   
   
   
   
5. Add dependencies in bower.json to jquery 2.2.3, bootstrap 3.3.6 and gijgo 0.6.2.This is going to automatically include those 2 libraries in the "wwwroot/libs" folder of your project.
   
   
   
   
6. Open "Node.js command prompt" and navigate to the wwwroot folder in your project.
   
   
7. 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)
     
     
     
     
8. Add "ASP.NET Configuration File" to your solution called appsettings.json.
   
   
   
   
9. 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 will be created automatically by the EntityFramework.
   
   
   
   
10. Create Models folder at a root level of the project.
    
    
11. Add TODOItem class, that represents the TODO entity to the Models folder.
    1. public class TODOItem
    2. {
    3. public int ID { get; set; }
    4. public string Name { get; set; }
    5. public bool IsCompleted { get; set; }
    6. }
12. Add ApplicationDbContext class to the Models folder.
    1. public class ApplicationDbContext : DbContext
    2. {
    3. public DbSet TODOItems { get; set; }
    4. 
       
    5. public ApplicationDbContext(DbContextOptions options)
    6. : base(options)
    7. {
    8. }
    9. 
       
    10. protected override void OnModelCreating(ModelBuilder builder)
    11. {
    12. base.OnModelCreating(builder);
    13. }
    14. }
13. Enable appsettings.json, EntityFramework and MVC in the StartUp.cs file, as it shown below:
    1. public class Startup
    2. {
    3. public IConfigurationRoot Configuration { get; set; }
    4. public Startup(IHostingEnvironment env)
    5. {
    6. var builder = new ConfigurationBuilder()
    7. .SetBasePath(env.ContentRootPath)
    8. .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
    9. .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true);
    10. builder.AddEnvironmentVariables();
    11. Configuration = builder.Build();
    12. }
    13. public void ConfigureServices(IServiceCollection services)
    14. {
    15. services.AddDbContext(options =>
    16. options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
    17. services.AddMvc();
    18. }
    19. public void Configure(IApplicationBuilder app)
    20. {
    21. app.UseStaticFiles();
    22. app.UseMvc(routes => {
    23. routes.MapRoute(name: "default", template: "{controller=Home}/{action=Index}/{id?}");
    24. });
    25. }
    26. }
14. Add Controllers folder and HomeController.cs to manage operations with TODO items on the Server side inside this folder.
    1. public class HomeController : Controller
    2. {
    3. private ApplicationDbContext _context;
    4. 
       
    5. public HomeController(ApplicationDbContext context)
    6. {
    7. this._context = context;
    8. }
    9. 
       
    10. // GET: //
    11. public IActionResult Index()
    12. {
    13. return View();
    14. }
    15. 
        
    16. public JsonResult GetTODOItems(int? page, int? limit, string searchString = null)
    17. {
    18. var records = this._context.TODOItems.AsQueryable();
    19. if (!string.IsNullOrWhiteSpace(searchString))
    20. {
    21. records = records.Where(p => p.Name.Contains(searchString));
    22. }
    23. int total = records.Count();
    24. if (page.HasValue && limit.HasValue)
    25. {
    26. int start = (page.Value - 1) * limit.Value;
    27. records = records.Skip(start).Take(limit.Value);
    28. }
    29. return Json(new { records, total }, new JsonSerializerSettings
    30. {
    31. ContractResolver = new DefaultContractResolver { NamingStrategy = null }
    32. });
    33. }
    34. 
        
    35. [HttpPost]
    36. public JsonResult Save(TODOItem todoItem)
    37. {
    38. if (todoItem.ID > 0)
    39. {
    40. var entity = this._context.TODOItems.First(p => p.ID == todoItem.ID);
    41. if (!string.IsNullOrWhiteSpace(todoItem.Name))
    42. {
    43. entity.Name = todoItem.Name;
    44. }
    45. if (todoItem.IsCompleted != null)
    46. {
    47. entity.IsCompleted = todoItem.IsCompleted;
    48. }
    49. }
    50. else
    51. {
    52. this._context.TODOItems.Add(new TODOItem
    53. {
    54. Name = todoItem.Name,
    55. IsCompleted = false
    56. });
    57. }
    58. this._context.SaveChanges();
    59. return Json(true);
    60. }
    61. 
        
    62. [HttpPost]
    63. public JsonResult Remove(int id)
    64. {
    65. var entity = this._context.TODOItems.First(p => p.ID == id);
    66. this._context.TODOItems.Remove(entity);
    67. this._context.SaveChanges();
    68. return Json(true);
    69. }
    70. }
15. Create Views folder and Home folder with Index.cshtml inside the Views folder. Add the HTML structure in the Index.cshtml, which is required for the management of TODO items. You can find a sample code about it in the $Views\Home\Index.cshtml file from the attachment.
    
    
16. Create /wwwroot/scripts/site.ts file that manages TODO items with TypeScript on the client side. You can find a sample code about it in the $wwwroot\scripts\site.ts file from the attachment.
    
    
17. Add manually Microsoft.EntityFrameworkCore.Tools to the tools section in the project.json file.
    
    
    
    
18. Execute "Add-Migration InitialCreate" and then "Update-Database" in "Package Manager Console" in order to create the database.
    
    
    
    
19. Run the project and manage your TODO Items.

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