DEV Community

Cover image for Build Web API using Angular with ASP.NET MVC5 (Part 1)
Hòa Nguyễn Coder
Hòa Nguyễn Coder

Posted on

2

Build Web API using Angular with ASP.NET MVC5 (Part 1)

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

Create project ASP.NET MVC 5 Web API 2, you can see : Build Angular + ASP.NET MVC 5
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

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);
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Okay, you need create Comment.cs in Models directory, properties config in Comment.cs

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; }
    }
}
Enter fullscreen mode Exit fullscreen mode

Go to Controllers folder, create CommentController.cs file, config method (GET,POST,DELETE,PUT)

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());
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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
Build Web API using Angular with ASP.NET MVC5 (Part 1) - hoanguyenit.com
Build Web API using Angular with ASP.NET MVC5 (Part 1) - hoanguyenit.com
Build Web API using Angular with ASP.NET MVC5 (Part 1) - hoanguyenit.com
Build Web API using Angular with ASP.NET MVC5 (Part 1) - hoanguyenit.com

The Article : Build Web API using Angular with ASP.NET MVC5 (Part 1)

Hot sauce if you're wrong - web dev trivia for staff engineers

Hot sauce if you're wrong · web dev trivia for staff engineers (Chris vs Jeremy, Leet Heat S1.E4)

  • Shipping Fast: Test your knowledge of deployment strategies and techniques
  • Authentication: Prove you know your OAuth from your JWT
  • CSS: Demonstrate your styling expertise under pressure
  • Acronyms: Decode the alphabet soup of web development
  • Accessibility: Show your commitment to building for everyone

Contestants must answer rapid-fire questions across the full stack of modern web development. Get it right, earn points. Get it wrong? The spice level goes up!

Watch Video 🌶️🔥

Top comments (0)

Cloudinary image

📊 Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay