Posts

Showing posts with the label Blazor Web App

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>" ); }; In Code Behind" alt="Blazor - Not All Code Paths Return A Value In Lambda Expression Of Type 'RenderFragment In Code Behind" border="0" width="320" data-origin...
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

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