Posts

Showing posts from 2024

Donate

Contoso Crafts Website Converted To Blazor Web Application In .NET 8

-
Image
Hello, Here's an upgrade of the Contoso Crafts Website project from ASP.NET Razor Pages to Blazor Web Application. As you remember, Contoso Crafts is the final output of the course ASP.NET Core 101 hosted by Scott Hanselman. To ellaborate this in detail, here's how I migrated the project to Blazor. The project structure illustrates that the razor pages were converted to components specifically the Home.razor, ProductCard.razor and ProductRating.razor. The products.json, Products.cs and the services are located to it's designated folders. I have copied the styles from the razor pages to the site.css and have referenced the font styles used to the App.razor component <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "utf-8" /> <meta name= "viewport" content= "width=device-width, initial-scale=1.0" /> <base href= "/" /> <link rel= "stylesheet
Post a Comment
Read more

Properties With DisplayFormat Attribute And Timestamp Not Showing Correctly In Blazor Using DisplayFor(). DisplayFor() Isn't Recognized In Blazor.

-
Image
Hi All, Given that we were migrating a proof of concept from ASP.NET Core MVC to Blazor, we were used to using the DisplayFor() method to show the values of the properties decorated with DataAnnotations attributes such as the example below. [DataType(DataType.Date)] [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)] [Display(Name = "Start Date")] public DateTime StartDate { get ; set ; } = DateTime.Now; [DataType(DataType.Currency)] [Column(TypeName = "money")] public decimal Budget { get ; set ; } However DisplayFor() isn't recognized method in Blazor, so what we did was to create a display property to return the values with proper format strings. Note that we added a NotMapped attribute so that when we perform database migrations, these properties are ignored. [NotMapped] public string DisplayDate { get { return EnrollmentDate.ToString( "yyyy-MM-dd" ); } } [NotMapped] public string
Post a Comment
Read more

DotNet.invokeMethodAsync() Does Not Invoke C# Method In Blazor Component Using Microsoft Edge Browser

-
Hello, Here's an odd error of DotNet.invokeMethodAsync() that I encountered. This method works for both Google Chrome and Mozilla Firefox but not on Microsoft Edge. The code below will just call a weather API and deliver a response payload to the C# caller function. I window.checkWeather = (cityName) => { const API_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx" return new Promise((resolve, reject) => { fetch(`https: //api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${API_KEY}&units=metric`) .then(res => { if (!res.ok) { console.error(`HTTP error: ${res.status}`); } DotNet.invokeMethodAsync( 'WeatherApplication' , 'ShowWeatherContainer' ); return res.json(); }) .then(data => { resolve(data); }) . catch (error => reject(error)) }) } Afte
Post a Comment
Read more

Blazor TableTemplate DataSource Or Items Not Updating After Modifying Its Items When CheckBoxChanged Is Fired

-
Image
Good day! As I was following a module on component templates in Blazor, it illustrates a table template with a row template and has a checkbox control that when clicked, it will fire an event and alter the value of a property of a collection. <TableTemplate Items= "benefits" IsSmall= "true" > <TableHeader> <th class= "w-auto" >Benefit</th> <th class= "w-25" >Start date</th> <th class= "w-25" >End date</th> </TableHeader> <RowTemplate> <td> <input type= "checkbox" checked = "@context.Selected" @onchange= "e => CheckBoxChanged(e, context)" /> </td> <td>@context.Description</td> @if (@context.Selected) { <td>@context.StartDate?.ToString( "dd/MM/yyyy" )</td
Post a Comment
Read more

Blazor - Not All Code Paths Return A Value In Lambda Expression Of Type 'RenderFragment In Code Behind

-
Hello, When I was transferring the C# Rendering Fragment snippet from the razor component to the code-behind class, I encountered this error which is "Not All Code Paths Return A Value In Lambda Expression Of Type 'RenderFragment<string> as presented on the code below. @code{ private RenderFragment< string > intro = text => @<h3>@text</h3>; } Afer reading the docs, this issue can be fixed in the code behind csharp class, by using the AddMarkUpContent() method builder parameter which will add HTML tags with content to the component as the delegate function of the RenderFragment object. private RenderFragment< string > intro = (text) => builder => { builder.AddMarkupContent(0, $ "<h3>{text}</h3>" ); }; Cheers!
Post a Comment
Read more

Cascading Parameter Is Always Null Or Is Not Working In Blazor .NET 8

-
Hello, When working with cascading parameters in Blazor Web Application in .NET 8, I encountered an issue that this always returns null even if the logic is in place. After doing some research, I found the solution here which is to set the interactive mode attribute of Routes component in App.razor component. Routes component in App.razor without the interactive mode. <body> <Routes /> <script src= "_framework/blazor.web.js" ></script> </body> Routes component in App.razor the the interactive mode set. <body> <Routes @rendermode= "InteractiveServer" /> <script src= "_framework/blazor.web.js" ></script> </body> I just hope there will be a better solution for this issue in the near future.
Post a Comment
Read more

Using Blazor QuickGrid Component In .NET 8, Entity Framework Core And SQL Server

-
Image
Here's a Blazor Web App that demonstrates on how to show data in a tabular format using the ASP.NET Core Blazor QuickGrid component. As per Microsoft, The QuickGrid component is a Razor component for quickly and efficiently displaying data in tabular form. QuickGrid provides a simple and convenient data grid component for common grid rendering scenarios and serves as a reference architecture and performance baseline for building data grid components. QuickGrid is highly optimized and uses advanced techniques to achieve optimal rendering performance. Note that this is not as advanced as other commercial grids. To begin with, lets create a new Blazor Web App that target's the .NET 8 framework and then install these four NuGet packages. We will be getting data from WideWorldImporters database using Entity Framework Core and database approach methodology. Once you have these installed, next is to scaffold the WideWorldImporters database for you to generate the model classe
Post a Comment
Read more

Blazor QuickGrid Component Inside Div Element Overlaps Horizontally

-
Image
Hello, As I was experimenting with Blazor QuickGrid component, I decided to populate the Grid component with records from WideWorldImporters database and opt to display at least nine columns. Upon rendering on the page, I noticed that the QuickGrid component overlaps horizontally even if it's inside a div element with bootstrap row as it's class. To fix this issue, I added an id attribute to the grid component so I can apply a css style explicitly. <QuickGrid Id= "qGridCustomer" Class= "table table-responsive table-bordered table-striped" Items= "@FilteredCustomers" Pagination= "@pagination" > <PropertyColumn Title= "Customer Name" Property= "@(p => p.CustomerName)" Sortable= "true" > <ColumnOptions> <div class= "search-box" > <input type= "search" autofocus @bind= "nameFilter" @bind: event = &quo
Post a Comment
Read more

Blazor Web App CRUD Project Using Visual Studio 2022, .NET 8 And Entity Framework Core

-
Image
Good day Team! Here's a basic Blazor Web App CRUD Project using Visual Studio 2022, .NET 8 and Entity Framework Core. The database for this project is SQL Server and the approach to communicate the database is database first. Let's begin. I. Project Setup 1. Open your SSMS editor and execute the create Employee table script that is used in this project into your SQL Server instance. This will be the datasource for our employee information. USE [ASPCoreTestDB] GO SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [dbo].[Employee]( [EmployeeID] [int] IDENTITY (1,1) NOT NULL , [EmployeeGovtID] [varchar](50) NULL , [EmployeeName] [varchar](200) NULL , [Age] [int] NULL , [Address] [nvarchar]( max ) NULL , [Salary] [decimal](18, 2) NULL , [Designation] [varchar](50) NULL , [HasDependents] [bit] NULL , CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED ( [EmployeeID] ASC ) WITH (PAD_INDEX = OFF , STATISTICS_NORECOMPUTE = OFF , IGNORE_DUP_K
Post a Comment
Read more

Donate