Creating a simple Todo list with Angular2 and asp.net core – Part 3

Creating a simple Todo list with Angular2 and asp.net core – Part 3

This is part 3 in this series Ive appropriately named:

Creating a simple Todo list with Angular2 and asp.net core

If you’ve arrived at this page prior to reading part 1 & 2, you can check them out here:

Part 1

Part 2

Coding up the controller

We left off in part 2 having just created a vanilla controller. Im going to replace all of that boiler plate code with an implementation that access our database and provide full CRUD capabilities. Here is that new code:

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using SimpleTodo.Models;

namespace SimpleTodo.Controllers
{
    [Route("api/[controller]")]
    public class TodoController : Controller
    {
        
        ITodoRepository _TodoItems;

        //you can see here in the controller constructor that the TodoRepository is being 
        //injected for us by the DI Container - we set that up in Part 2 of this series
        public TodoController(ITodoRepository todoItems)
        {
            _TodoItems = todoItems;
        }
        
        // GET api/todo
        [HttpGet]
        public IEnumerable Get()
        {
            return _TodoItems.GetAll();
        }

        // GET api/todo/5
        [HttpGet("{id}")]
        public IActionResult Get(string id)
        {
            var item = _TodoItems.Get(Convert.ToInt32(id));
            if(item == null)
            {
                return NotFound();
            }
            return new ObjectResult(item);
        }

        // POST api/todo
        [HttpPost]
        public IActionResult Post([FromBody]TodoItem todo)
        {
            if(todo == null)
            {
                return BadRequest();
            }
            _TodoItems.Add(todo);
            return new NoContentResult();
        }

        // PUT api/todo/5
        [HttpPut("{todoId}")]
        public IActionResult Put(string id, [FromBody]TodoItem item)
        {
            if(item == null)
            {
                return BadRequest();
            }
            _TodoItems.UpdateTodo(item);
            return new NoContentResult();
        }

        // DELETE api/todo/5
        [HttpDelete("{todoId}")]
        public void Delete(string todoId)
        {
            _TodoItems.DeleteTodo(todoId);
        }
    }
}

Now that we have the controller coded up and in place, lets build and run the site and browse to it in chrome

alt text

NOTE: if you are following along with this series and building it as you go, you will have to kill your server and restart it each time you make changes to the server side code in order to see your changes reflected.

when we navigate to http://localhost/api/todo what do we see!!! Drum roll please…..

alt text

…and we get an empty array. Not all that exciting but it makes perfect sense. We dont have any records in the database yet. Lets use Postman to create a record as a quick test.

Using Postman

If you dont know, Postman is an extension for Chrome. You can get it by going to http://www.getpostman.com or when you’re in Chrome, click on the Hamburger icon -> More tools -> Extensions and search for Postman.

alt text

Once you have it installed, you can launch it like any other app.

Using the Postman builder, I set the method to POST, the address to http://localhost:5000/api/todo, in the Headers section I add Content-Type – application/json and finally in the Body tab, I entered the following JSON:

{name: "my first todo", isComplete: false}

with all that in place, I click the Send button and get a “204 – No Content” Response.

At first glance, that may feel wrong but if we look at the code for the POST action in our TodoController we can see that it return a NoContentResult() so we know all is good with the world.

// POST api/todo
        [HttpPost]
        public IActionResult Post([FromBody]TodoItem todo)
        {
            if(todo == null)
            {
                return BadRequest();
            }
            _TodoItems.Add(todo);
            return new NoContentResult();
        }

Now, if we open up the browser again, we can see our newly created record being served from the Database. Happy days!

alt text

Our server side setup and coding is now complete. In the next post, we are going to turn our attention to the client side of this application and actually start implementing the “Angular” part.

Until next time….Thanks for visiting.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Adobe Flash player