Tech Seeker

The main objectives of this article are: Create Get By Id Endpoint In API Project. Create An Update Endpoint In The API Project. Create VueJS Component To Display Update Form. Create Get By Id Endpoint In API Project: To update any record, we first need to fetch the record by its 'id'. So let's create a get by 'id' endpoint in our API project. API_Project/Controllers/BeachController.cs: [HttpGet] [Route("{id:int}")] public async Task<IActionResult> Get(int id) { var becahById = await _myWorldDbContext.Beach.Where(_ => _.Id == id) .FirstOrDefaultAsync(); return Ok(becahById); } (Line: 1) Since it is a second HTTP Get action method, so we have to explicitly specify the route. (Line: 2) The route expression '{id:int}' represents 'id' value must be the integer value. (Line: 5) Fetching the record by 'id' from the database. Create An Update Endpoint In The API Project: Let's create the HTTP PUT action method. API_Pr

The main objectives of this article are: Create HTTP POST Endpoint In API Project. Create VueJS Component With A Form To Add New Item. Create A Post Endpoint Action Method In The API Project: Let's create an HTTP Post action method to save a new record into the database. API_Project/Controllers/BeachController.cs: [HttpPost] public async Task<IActionResult> Post(Beach newBeach) { _myWorldDbContext.Beach.Add(newBeach); await _myWorldDbContext.SaveChangesAsync(); return Ok(newBeach); } (Line: 1) The 'HttpPost' attribute invokes our action method for HTTP Post requests. (Line: 2) Here our action method should receive the item to add as payload data. (Line: 4) Our new record data instance adding to the database context. (Line: 5) The 'SaveChangesAsync()' method inserts the new record into the database. Create An 'AddBeach' Component In VueJS Application: Let's create the new vuejs component like 'AddBeach' in 'src/views/beaches

The main objectives of this article are: Create A HTTP GET API Endpoint To Fetch All Data Create Vue Component To Display All Data Create A 'Beach' Controller In The API Project: A Controller is an entity or class that contains a logical method or function that gets executed for an HTTP request from the clients. Let's create a controller 'BeachController.cs'. API_Project/Controllers/BeachController.cs: using Dot7.API.CRUD.Data; using Microsoft.AspNetCore.Mvc; namespace Dot7.API.CRUD.Controllers; [ApiController] [Route("[controller]")] public class BeachController:ControllerBase { private readonly MyWorldDbContext _myWorldDbContext; public BeachController(MyWorldDbContext myWorldDbContext) { _myWorldDbContext = myWorldDbContext; } } (Line: 6) The 'ApiController' attribute applies all API rules to the controller. (Line: 7) The 'Route("[controller]")' attribute enables the attribute routing for the contro

The main objectives of this article are: .NET7 Web API Install .NET7 SDK And IDE Create A .NET7 Web API Application SQL Database ConnectionString Entity Framework Core Install Entity Framework Core NuGet Packages Entity Framework Core DatabaeContext .NET7 Web API: Web API is framework for building an HTTP service that can be accessed by any clients like browser, mobile devices, and desktop apps. In simple terminology API(Application Programming Interface) means an interface module that contains a programming function that can be requested via HTTP calls to save or fetch the data from their respective clients. Some of the key characteristics of API are: Supports HTTP verbs like 'GET', 'POST', 'PUT', 'DELETE', etc. Supports default responses like 'XML', and 'JSON'. Also can define custom responses. Supports self-hosting or individual hosting, so that all different kinds of apps can consume it. Authentication and Authorization are easy to i

In this article, we will implement Razor Pages CRUD operation with one-to-many relationships between the tables using the Entity Framework Core. Razor Pages: Razor Pages is a simplified web application model. Compared with the 'MVC' template, razor pages won't have 'Controllers', which means Razor Page is a combination of  'View' and 'Model'. The route will be configured within the razor page or view. A Razor Page composed with 2 files like '*.cshtml.cs'(Model) & '*.cshtml'(view). One-To-Many Relationship Table SQL Script: For this demo, we will create 2 tables 'Employee'(parent table) and 'EmployeeAddresses'(child table). Between the tables, we make a one-to-many relationship which means one employee record can have multiple records in the employee address table. Employee Table Script: CREATE TABLE Employee( Id int IDENTITY (1,1) NOT NULL, FirstName varchar (200) , LastName varchar (200) , JobRole varchar(50) CON