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

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.