Sabari M Sabari M
Updated date Nov 05, 2020
Let's take a look at how to create and build an ASP.NET core 3.2 angular CRUD application using Visual Studio 2019. It provides an angular template and can easily choose and create an angular application without any issue. We will have an angular app as front-end and RESTful API in the back end. Also, we will see how to integrate the API CRUD operations (Create, Retrieve, Update and Delete) in the front-end. In this article, we will create an ASP.NET 3.2 angular application and RESTful API with CRUD operations.

In this article, we will learn how to create and build an ASP.NET core 3.2 angular CRUD application using the Visual Studio 2019 template. We will have an angular app as front-end and RESTful API in the back end. Also, we will see how to integrate the API CRUD operations (Create, Retrieve, Update, and Delete) in the front-end.

Prerequisites:

Once you have installed the above prerequisites, you can use a visual studio to create an ASP.NET Core Angular application template. To write server-side code, you can use Visual Studio and Visual Studio Code for client-side, however, if you are comfortable, then you can use Visual Studio instead of VS code.

Step 1: Create an ASP.NET Core 3.1 Angular Application Template

Open Visual Studio 2019 and click "Create a new project" and choose ASP.NET Core Web Application > Provide project name and location > Then choose .ASP.NET Core 3.2 version and the API template select "Angular" as shown below and click "Create",

Once the application is created, you will see the below application structure in Solution Explorer, and you will see Angular client-side application files in ClientApp folder as shown below,

All the packages will be automatically installed once you build the solution. You will see the below default page when you run the application using F5, you no need to run the ng serve in development mode, so your client-side resources are dynamically built on demand and the page refreshes when you modify any files. But In production mode, development-time features are disabled, and your dotnet publish configuration automatically invokes ng build to produce minified, ahead-of-time compiled JavaScript files.

Step 2: Add Models

Create a new folder name as "Models" and add class file name as "Employee" as shown below,

using System.ComponentModel.DataAnnotations;
namespace AspNetCoreAngularApp.Models
{
    public class Employee
    {
		[Key]
		public int Id { get; set; }

		[Required]
		public string Name { get; set; }

		[Required]
		public int Age { get; set; }

		[Required]
		public string Designation { get; set; }

		[Required]
		public int MobileNumber { get; set; }
	}
}

Step 3: Add Entity Framework Database Context

Right-click the Controllers folder and select Add -> Controller -> API controller with actions, using Entity Framework.

Enter the model class name as Employee and Click + button and add the EmployeesContext.

Once you click Add button, Visual Studio will automatically add the necessary NuGet packages and create a new database context. (you will see the installation progress as shown below)

You will see the EmployeesContext file in Data folder and EmployeesController with API actions under the Controller folder,

EmployeesContext.cs

using Microsoft.EntityFrameworkCore;
namespace AspNetCoreAngularApp.Data
{
    public class EmployeesContext : DbContext
    {
        public EmployeesContext (DbContextOptions<EmployeesContext> options)
            : base(options)
        {
        }

        public DbSet<AspNetCoreAngularApp.Models.Employee> Employee { get; set; }
    }
}

EmployeesController.cs


namespace AspNetCoreAngularApp.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class EmployeesController : ControllerBase
    {
        private readonly EmployeesContext _context;

        public EmployeesController(EmployeesContext context)
        {
            _context = context;
        }

        // GET: api/Employees
        [HttpGet]
        public async Task<ActionResult<IEnumerable<Employee>>> GetEmployee()
        {
            return await _context.Employee.ToListAsync();
        }

        // GET: api/Employees/5
        [HttpGet("{id}")]
        public async Task<ActionResult<Employee>> GetEmployee(int id)
        {
            var employee = await _context.Employee.FindAsync(id);

            if (employee == null)
            {
                return NotFound();
            }

            return employee;
        }

        // PUT: api/Employees/5
        // To protect from overposting attacks, enable the specific properties you want to bind to, for
        // more details, see https://go.microsoft.com/fwlink/?linkid=2123754.
        [HttpPut("{id}")]
        public async Task<IActionResult> PutEmployee(int id, Employee employee)
        {
            if (id != employee.Id)
            {
                return BadRequest();
            }

            _context.Entry(employee).State = EntityState.Modified;

            try
            {
                await _context.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!EmployeeExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return NoContent();
        }

        // POST: api/Employees
        // To protect from overposting attacks, enable the specific properties you want to bind to, for
        // more details, see https://go.microsoft.com/fwlink/?linkid=2123754.
        [HttpPost]
        public async Task<ActionResult<Employee>> PostEmployee(Employee employee)
        {
            _context.Employee.Add(employee);
            await _context.SaveChangesAsync();

            return CreatedAtAction("GetEmployee", new { id = employee.Id }, employee);
        }

        // DELETE: api/Employees/5
        [HttpDelete("{id}")]
        public async Task<ActionResult<Employee>> DeleteEmployee(int id)
        {
            var employee = await _context.Employee.FindAsync(id);
            if (employee == null)
            {
                return NotFound();
            }

            _context.Employee.Remove(employee);
            await _context.SaveChangesAsync();

            return employee;
        }

        private bool EmployeeExists(int id)
        {
            return _context.Employee.Any(e => e.Id == id);
        }
    }
}

Above controller, you will see the API methods like GET, POST, PUT and DELETE. This code will work without any modification. All the methods will return the data in JSON format.

In RESTful API, we will use the GetEmployee method to get the data from the database, PostEmployee to insert the data, PutEmployee to update the data, and DeleteEmployee to delete the data from the database.

Step 4: Setup Migration

Before migration you have to verify the database connection, this will be found in appsettings.json file as shown below,

"ConnectionStrings": {
"EmployeesContext": "Server=(localdb)\\mssqllocaldb;Database=EmployeesContext-79145ad7-6d46-4195-b012-1f5e06acb6c2;Trusted_Connection=True;MultipleActiveResultSets=true"
}

The above connection string was created when we create the Entity Framework Database Context. You can also use your own SQL database instead of LocalDb. But here in this example, we will use LocalDb only.

To enable migrations, Click Tools -> NuGet Package Manager -> Package Manager Console,

Run this command, Add-Migration Initial

You will see the below message once you run the command successfully and also you will see the filer 20200720095012_Initial.cs and EmployeesContextModelSnapshot.cs under Migrations folder.

Step 5: Create a Database

You have to execute below command in Package Manager Console to create a database,

Update-Database

To Open SQL Server Object Explorer, Click View -> SQL Server Object Explorer, You can now see the EmployeesContext-79145ad7-6d46-4195-b012-1f5e06acb6c2 database and Employee table as shown below,

Any changes to the data model, you should use the Add-Migration MigrationName and Update-Database commands to push changes to the database.

That's it. All done on the server-side.

Step 6: Test the API methods in Postman

Run the application using F5, once the application started to use the postman to insert the data using URL https://localhost:xxxx/api/Employees

JSON Request:

{
    "name": "Sabari",
    "age": 32,
    "designation": "Software Engg",
    "mobileNumber": 12345678
}

Postman Screenshot:

Insert Employee (POST)

Get Employees (GET):

Use below URL to get the employees,

https://localhost:44386/api/Employees/

Update Employee (PUT):

Use below URL and pass id in URL as shown below,

https://localhost:44386/api/Employees/2

Delete Employee (DELETE):

Use below URL and pass id to delete the employee,

https://localhost:44386/api/Employees/3

Our next article Create and Build an ASP.NET Core Angular CRUD Application - Part 2, we will see how to integrate the API CRUD methods to the angular application.

 

ABOUT THE AUTHOR

Sabari M
Sabari M

IT professional with 14+ years of experience in Microsoft Technologies with strong base in Microsoft .NET (C#.Net, ASP.Net MVC, ASP.NET WEB API, Webservices, V...Read More

https://www.techieclues.com/profile/alagu-mano-sabari-m

Comments (0)

There are no comments. Be the first to comment!!!
×