Skip to main content

Posts

Part-3 | .NET7 Web API | SQL Database | VueJS(3.0) - Composition API | CRUD Example

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

Part-2 | .NET7 Web API | SQL Database | VueJS(3.0) - Composition API | CRUD Example

The main objectives of this article are: Vue(3.0) Vue(3.0) Composition API. Vue(3.0): Vue(3.0) is a javascript framework for creating a single-page application. Vue application built by components. The components are the smallest unit of the application which comprises 'Script', 'Template'(HTML), and 'Style'. Eventually, multiple components together create the Vue application. Vue(3.0) Composition API: VueJS application can be developed with either 'Options API' or 'Composition API' or 'Both combinations'. Using composition API we can import the functions(vue functions) instead of declaring them as options The primary advantage of Composition API is that it enables clean, efficient logic reuse in the form of composable functions. Example Vue Component - Composition API Technique 1: <script> import { reactive } from 'vue' export default { setup() { const state = reactive({ count: 0 }) function increment() {

Part-1 | .NET7 Web API | SQL Database | VueJS(3.0) - Composition API | CRUD Example

The main objectives of this article are: .NET 7 Web API And Vue(3.0) Application Communication. Install The SQL Server And SQL Management Studio .NET 7 Web API And Vue(3.0) Application Communication: The user requests the VueJS(3.0) application(single page application) then js files are downloaded and run the app on the browser. Since VueJS(3.0) is a single-page application, it depends on API for data to display. API runs at the server that gives JSON response. API communicates with the database for fetching the data. Install The SQL Server And SQL Management Studio: First, install the SQL server on our local machine. So go to  "https://www.microsoft.com/en-in/sql-server/sql-server-downloads" and then install the developer version which is accessible and fully functional. Next, install the SSMS(SQL Server Management Studio) IDE at "https://learn.microsoft.com/en-us/sql/ssms/download-sql-server-management-studio-ssms?view=sql-server-ver16" Create A Sample Databas

.NET7 | Razor Pages | EF Core | One To Many Relationships | CRUD Example

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

Entity Framework Core 7 JSON Columns | Mapping | Querying | Updating | Example

In this article, we are going to discuss about EF Core 7 feature that JSON data mapping, querying and updating operation. JSON Document Case Study: Here we can observe a 'Employee' table whose contact details are saved as document data. In general, we have to read it as string data in our dotnet application. But EF Core 7 supports that we can map the JSON document as a normal C# class and also we query them and also we can update the data inside of the document either fully or partially. Fetch JSON As Simple String: First, let's check the simple API endpoint which will fetch data directly which means our 'ContactDetails' column in the database is a simple string. Our table class is like 'Employee.cs'. Employee.cs: public class Employee { public int Id { get; set; } public string? FullName { get; set; } public string? ContactDetails { get; set; } } Our database context is like 'MyWorldDbContext.cs'. MyWorldDbContext.cs: using Dot7.JsonM

.NET 7 | Web API | Azure Blob Storage | File Management | Example

This article will explain the communication between Web API(.NET 7) and Azure Blob Storage for managing files. Azure Blob Storage: Azure Blob Storage is a Microsoft Cloud Storage. Azure Blob Storage is used to manage the files for storing or reading. Storage Account: A Storage account gives us a unique namespace. Every file we save or store on Azure Storage must have an address, and that address is nothing but the unique name of our Storage Account name. The combination of the storage account name and Azure blob Storage endpoint forms the base address. For example, if our storage account is named as 'my-azure-account' then the base address will be like 'https://my-azure-account.blob.core.window.net'. Containers: The Containers are just like folders. Blob: The actual item or file we will store inside of the container. Create Azure Blob Storage In Azure Portal: (Step 1)First, we have to 'Sing-Up' in 'Microsoft Azure Portal', after completing 'Sing-Up&#