Build Web API using Angular with ASP.NET MVC5 (Part 1)
Tags: csharp, angular, javascript, webdev
Published: 2020-06-09 06:49:29

Continue, The article **Build Angular + ASP.NET MVC 5**, Today, I'm will example Build Web API using Angular + ASP.NET MVC 5

Part1 : Configuration method (GET,POST,PUT,DELETE) in ASP.NET MVC 5
Part2 : [Configuration in Angular call method from ASP.NET MVC 5](https://dev.to/skipperhoa/build-web-api-using-angular-with-asp-net-mvc5-part-2-225j)

Create project ASP.NET MVC 5 Web API 2, you can see : [Build Angular + ASP.NET MVC 5](https://dev.to/skipperhoa/build-angular-asp-net-mvc-5-4gi3)
After then, Click right Controllers folder->Add->Controller->Web API 2, Create **CommentController.cs**
Okay, We will see **WebApiConfig.cs** in App_Start folder, when create Controller API
Continue, open **Global.asax.cs** in project, register WebApiConfig file to **Glogbal.asax.cs**, the following code below
```csharp
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
using System.Web.Http;
namespace Angular_mvc5
{
    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            GlobalConfiguration.Configure(WebApiConfig.Register);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }
}
```
Okay, you need create **Comment.cs** in Models directory, properties config in Comment.cs
```csharp
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Angular_mvc5.Models
{
    public class Comment
    {
        public int id { get; set; }
        public string content { get; set; }
        public int parent { get; set; }
    }
}
```
Go to Controllers folder, create **CommentController.cs** file, config method (GET,POST,DELETE,PUT)
```csharp
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using Angular_mvc5.Models;
namespace Angular_mvc5.Controllers
{
    public class CommentController : ApiController
    {
        // GET: api/Comment

        List<Comment> _cmt = new List<Comment>();
        public CommentController()
        {

            _cmt.Add(new Comment() { id = 1, content = "Cmt A", parent = 0 });
            _cmt.Add(new Comment() { id = 2, content = "reply Cmt A", parent = 1 });
            _cmt.Add(new Comment() { id = 3, content = "reply Cmt A", parent = 2 });
            _cmt.Add(new Comment() { id = 4, content = "Cmt B", parent = 0 });
            _cmt.Add(new Comment() { id = 5, content = "reply Cmt B", parent = 4 });

        }

        public IHttpActionResult Get()
        {
            var data = _cmt.ToList();
            return Ok(data);
        }

        // GET: api/Comment/5
        public IHttpActionResult Get(int id)
        {

            var data = _cmt.Where(s => s.id == id).ToList();
            return Ok(data);
        }

        // POST: api/Comment
        public IHttpActionResult Post(Comment _data)
        {
            _cmt.Add(_data);
            var result = _cmt.ToList();
            return Ok(result);
        }

        // PUT: api/Comment/5
        public IHttpActionResult Put(int id, Comment _data)
        {
            _cmt.Where(s => s.id == id).ToList().ForEach(s => s.content =_data.content);
            return Ok(_cmt.ToList());
        }

        // DELETE: api/Comment/5
        public IHttpActionResult Delete(int id)
        {
            _cmt.Remove(_cmt.FirstOrDefault(s => s.id == id));
            return Ok(_cmt.ToList());
        }
    }
}
```
The following code above, we add (using Angular_mvc5.Models) call to Models folder
Okay, now we run project, test API on Postman
![Build Web API using Angular with ASP.NET MVC5 (Part 1) - hoanguyenit.com](https://hoanguyenit.com/public/upload/images/buill-web-api-angular-with-aspmvc5-01.jpg)
![Build Web API using Angular with ASP.NET MVC5 (Part 1) - hoanguyenit.com](https://hoanguyenit.com/public/upload/images/buill-web-api-angular-with-aspmvc5-02-get.jpg)
![Build Web API using Angular with ASP.NET MVC5 (Part 1) - hoanguyenit.com](https://hoanguyenit.com/public/upload/images/buill-web-api-angular-with-aspmvc5-03-post.jpg)
![Build Web API using Angular with ASP.NET MVC5 (Part 1) - hoanguyenit.com](https://hoanguyenit.com/public/upload/images/buill-web-api-angular-with-aspmvc5-04-put.jpg)
![Build Web API using Angular with ASP.NET MVC5 (Part 1) - hoanguyenit.com](https://hoanguyenit.com/public/upload/images/buill-web-api-angular-with-aspmvc5-05-delete.jpg)

The Article : [Build Web API using Angular with ASP.NET MVC5 (Part 1)](https://hoanguyenit.com/build-web-api-using-angular-with-aspmvc5-part-1.html)