Skip to main content

Posts

Showing posts with the label .NET 7

Part-4 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Create Operation

The main objectives of this article are: Implement HTTP Post Endpoint. In Blazor WebAssembly Create A Form Implement Insert Logic In Service Files In API Project: Let's add a method definition like 'CreateSuperHeroesAsync()' in 'ISuperHeroesService.cs' API_Project/Services/ISuperHeroesService.cs: Task<SuperHeroes> CreateSuperHeroesAsync(SuperHeroes newSuperHeroes); Let's implement the 'CreateSuperHeroesAsync()' in 'SuperHeroesService.cs' API_Project/Services/SuperHeroesService.cs: public async Task<SuperHeroes> CreateSuperHeroesAsync(SuperHeroes newSuperHeroes) { _myWorldDbContext.SuperHeroes.Add(newSuperHeroes); await _myWorldDbContext.SaveChangesAsync(); return newSuperHeroes; } Here we save the new item into the database. Create HTTP Post Endpoint In API Project: Let's add a new action method i.e HTTP Post endpoint in our 'SuperHeroesController.cs' API_Project/Controllers/SuperHeroesController.cs: [HttpPos

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