Tech Seeker

What Are Templated Components? : One or more UI templates as a component parameter of type RenderFragment or RenderFragment<T>. A RenderFragment represents a chunk of UI to render. RenderFragment Parameter: RenderFragment parameters render the chunk of UI in a component. RenderFragment type parameter name must match with Html tag element. Pages/Card.razor(Html Portion): <h3>Card</h3> <div class="card text-center"> @CardHeader @CardBody @CardFooter </div> Pages/Card.razor(@code Portion): @code { [Parameter] public RenderFragment CardHeader { get; set; } [Parameter] public RenderFragment CardBody { get; set; } [Parameter] public RenderFragment CardFooter { get; set; } } @CardHeader, @CardBody @CardFooter are Templated Component parameters of type RenderFragment. Pages/Index.razor: <Card> <CardHeader> <div class="card-header"> My Templa

Introduction: A Page or Form or Dialog is used to construct a Blazor Application are made of Components. A Component is a block of code consist of C# + HTML + CSS. Components give the advantage of code splitting, nesting, and reusability. In this journey, we are going to explore Blazor components with sample examples. Blazor Or Razor Component: Blazor components can be called Razor Components because they implemented in a Razor file(.razor). In general, the component is a combination of  C# @code block and Html UI of Razor syntax. A simple component with c# code and Html as below: Pages/Parent.razor: <h3>Hey I'm Parent Component</h3> @code { } Component Naming Convention: Blazor Components should always start with a capital letter. Trying to create a component name with a small casing letter leads to a compilation error. Example create a component as 'Pages/parent.razor' result error as below @code block: C# @code block is lik

Introduction: In Blazor WebAssembly(client-side framework) form validation can be done with Data Annotations. Using Data Annotations we can validate form either by default validation attributes or by creating custom validation attributes. Using this Data Annotation attribute we can dynamically add or remove validation on a specific field in a form. Create Blazor WebAssembly Project: To create a Blazor WebAssembly template project need to install the latest version of VisualStudio 2019 for rich intelligence support or we can use VisualStudio code but less intelligence support from the editor.  Click here to know about Blazor WebAssembly template creation. Blazor WebAssembly is in preview mode, not yet ready for production. Create Razor Component: After creating a sample project using the Blazor WebAssembly template, in "Pages" folder add new Razor Component , name it as "UserForm.razor" Add Route: In Blazor routing can be configured using @

Introduction: In  Part 3  we have discussed on Update Operation using Blazor client-side application. Now we get hands-on Delete Operation in our sample application. Delete Operation: For a delete operation, we use a bootstrap modal for confirmation. Opening and closing of bootstrap in this sample we are going to use bootstrap js. In Blazor not all the operations related to UI can't be done alone with c#, we need to use javascript in few areas. But invokation of the javascript method will be done from the c# method using JavaScript Interoperability. Step 1: Goto "wwwRoot" folder open index.html file add the bootstrap js  links  as shown  below <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.j

Introduction: In  Part 2  we created a page to fetch all the data in Blazor Client-Side application. Now we are going hands-on UPDATE Operation. Update Operation: Step 1: In the "Pages" folder create a new razor file name it as "EditPlayer.razor".This page is used to update or edit the data in our Balzor Client-Side application. Now to navigate to this new page we need to add Blazor routing with "@page" directives. Add the routing code as below. @page "/player/edit/{PlayerId:int}" "PlayerId:int" is a placeholder in the URL, where the application expects numeric value in that place from the incoming requests. If we try to pass any string value in place of numeric, the application throws an error as no end found with your request. "PlayerId" data get accessed in c# code by creating c# property with same name "PlayerId" and it should be decorated with attribute "[Parameter]" which can observe in

Introduction: In  Part 1  we have worked on the CREATE Operation page in blazor client-side application. Now here we going to discuss on the READ Operation in blazor client-side application. Read Operation: Step 1: In the "pages" folder, add a new file name as "ShowPlayers.razor". Add players route in the file using "@page" directive as below. @page "/players" Run command "dotnet watch run" and navigate to "http://localhost:5000/players". Step 2: Add the HTML to show all the cricket players that we had created in our application as below <div class="row"> @foreach (var player in players) { <div class="col-sm-4"> <div class="card"> <img src="/images/player.jpg" class="card-img-top"> <div class="card-body"> <h4 Card-title>@player.FirstName @player.LastN

Introduction: 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). In Blazor client-side framework Dotnet Code executed via WebAssembly in the browser runs in the browser's javascript sandbox securely. Specs: 1. Asp.net core 3.0 Preview 2. Blazor (Client-side) 3. Bootstrap 4 4. VisualStudio Code Editor Core Concept: Blazor 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 follows Create Operation: Step 1: Create Blazor client-side application.  Step by step process to create a blazor template . Step 2: Go to Pages Folder, add a new file name it as "AddPlayer.razor".Now add the follo