Blazor client-side framework is to build interactive client-side single page web apps which work in all modern web browsers, including mobile browser. The code is written in c# which can run on the browser like javascript frameworks (angular, react, vue etc).

@page "/player/add"

namespace Blazor.CRUD.Sample.Models { public class Player { public int Id { get;set; } public string FirstName { get;set; } public string LastName { get;set; } public int CurrentAge { get;set; } public string Teams { get;set; } public string PlayingRole { get;set; } public string BattingStyle { get;set; } public string BowlingStyle { get;set; } } }

@using Blazor.CRUD.Sample.Models

<h4>Create Player</h4> <form class="justify-content-center"> <div class="form-group row"> <label for="txtFirstName" class="col-sm-2 col-form-label" >FirstName</label> <div class="col-sm-8"> <input type="text" class="form-control" id="txtFirstName" @bind="@player.FirstName" placeholder="First Name" /> </div> </div> <div class="form-group row"> <label for="txtLastName" class="col-sm-2 col-form-label">LastName</label> <div class="col-sm-8"> <input type="text" class="form-control" id="txtLastName" placeholder="Last Name" @bind="@player.LastName"/> </div> </div> <div class="form-group row"> <label for="txtCurrentAge" class="col-sm-2 col-form-label">Current Age</label> <div class="col-sm-8"> <input type="text" class="form-control" id="txtCurrentAge" placeholder="Current age" @bind="@player.CurrentAge" /> </div> </div> <div class="form-group row"> <label for="txtTeams" class="col-sm-2 col-form-lable">Major Teams</label> <div class="col-sm-8"> <input type="text" class="form-control" id="txtTeams" placeholder="Major Teams" @bind="@player.Teams" /> </div> </div> <div class="form-group row"> <label for="txtPlayingRole" class="col-sm-2 col-form-label">Playing Role</label> <div class="col-sm-8"> <input type="text" class="form-control" id="txtPlayingRole" placeholder="Playing Role" @bind="@player.PlayingRole" /> </div> </div> <div class="form-group row"> <label for="txtBattingStyle" class="col-sm-2 col-form-label">Batting Style</label> <div class="col-sm-8"> <input type="text" class="form-control" id="txtBattingStyle" placeholder="Batting Style" @bind="@player.BattingStyle" /> </div> </div> <div class="form-group row"> <label for="txtBowlingStyle" class="col-sm-2 col-form-label">Bowling Style</label> <div class="col-sm-8"> <input type="text" class="form-control" id="txtBowlingStyle" placeholder="Bowling Style" @bind="@player.BowlingStyle" /> </div> </div> <div class="form-group row"> <div class="col-sm-8"> <button type="button" class="btn btn-primary" @onclick="Add">Add</button> </div> </div> </form>

@code { private Player player = new Player(); public async Task Add() { await _playerLogic.CreatePlayer(player); _navigationManager.NavigateTo("players"); } }

@using Blazor.CRUD.Sample.Logics

IPlayersLogic.cs

using System.Threading.Tasks; using Blazor.CRUD.Sample.Models; using System.Collections.Generic; namespace Blazor.CRUD.Sample.Logics { public interface IPlayersLogic { Task CreatePlayer(Player player); } }

using System.Collections.Generic; using System.Net.Http; using System.Threading.Tasks; using Blazor.CRUD.Sample.Models; using Newtonsoft.Json; using System.Text; namespace Blazor.CRUD.Sample.Logics { public class PlayersLogic : IPlayersLogic { private readonly HttpClient _http; public PlayersLogic(HttpClient http) { _http = http; } private async Task SaveOrUpdatePlayer(HttpRequestMessage request, Player player) { string postData = JsonConvert.SerializeObject(player); request.Content = new StringContent(postData, Encoding.UTF8, "application/json"); HttpResponseMessage responseMessage = await _http.SendAsync(request); return responseMessage.IsSuccessStatusCode; } public async Task CreatePlayer(Player player) { HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Post, "https://localhost:44316/api/player/save"); return await SaveOrUpdatePlayer(request, player); } } }

@page "/player/add" @inject IPlayersLogic _playerLogic

NavigationManager

@page "/player/add" @inject IPlayersLogic _playerLogic @inject NavigationManager _navigationManager

In Blazor client-side framework Dotnet Code executed viain the browser runs in the browser's javascript sandbox securely.1. Asp.net core 3.0 Preview2. Blazor (Client-side)3. Bootstrap 44. VisualStudio Code EditorBlazor client-side application sample CRUD (Create, Read, Update, Delete) operations. Let's create a sample application of the Indian cricket team players using the Blazor template. Our final sample looks as followsCreate Blazor client-side application. Step by step process to create a blazor template Go to Pages Folder, add a new file name it as "AddPlayer.razor".Now add the following code into this razor pageOpen VisualStudio code terminal and run "dotnet watch run". By default dotnet core gets to run the application with default port number 5000 then navigate to "http://localhost:5000/player/add"Create a new folder name it as "Models". In the Models, folder adds a new file name it as "Player.cs" as belowIn Blazor all file references need to be imported into "_import.razor" file. Now we need to import our "Player.cs" namespace as belowIn "AddPlayer.razor" page add the Html content as follows. "@bind" is razor syntax which helps in 2-way binding like in other javascript frameworks. "@onclick" is razor syntax of the click event, which invokes method written c#.Add the dotnet code in "AddPlayer.razor" file as follows.. "player" instance created, which is used in Html for data 2-way binding. "Add()" method which is bind to click event in HtmlNow to save player records we need to call API . For that let us create a folder name it "Logics" and add that namespace in "_import.razor" file as belowIn "Logics" folder create a file name it as "" and add the following codeIn the "Logics" folder create a file name it as "PlayersLogic.cs" and it will inherit the interface "IPlayerLogic.cs" file created in the above code. Add the code "PlayersLogic"Using c# httpClient we are calling API , to create the playersNow to access this create an API method "PlayersLogic.cs" file into "AddPlayer.razor" file "Add()" method, we need to inject as belowNow after the successful creation of the player, we need to redirect to the display page (this page we will create in part 2). Blazor provided "" that needs to be injected in "AddPlayer.razor" as belowRun command "dotnet watch run" and navigate to http://localhost:5000/player/add we can see the output as below.