Posts

Showing posts from 2024

Donate

How To Prioritize xUnit Test Methods Using TestPriority Attributes and ITestCaseOrderer Interface

Image
Hello, A requirement for a project wherein we want to prioritize tests given that a certain algorithm depends on the execution of another one, we need to create tests priorities so that test methods are executed in a sequential order. After doing some research, I found an article here that demonstrates on how to control the execution order of test methods. Given the sample code below in a console application, I would like to set a priority for each method using the MDAS (Multiplication->Division->Addition->Subtraction) rule using the concepts from that article. public class MathOperations { public double Addition( double a, double b) { return a + b; } public double Subtraction( double a, double b) { return a - b; } public double Multiplication( double a, double b) { var result = a * b; return result; } public double Division( double a, double b) { var result = a / b; return result; } } The methodology that I ...

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...

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 ...

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...

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...

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...

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.

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...

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 = ...

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...

Donate