Tag Archives: Blazor

CarShop .NET Core Blazor Project – Part 1

Leave a reply

Over the past few months I have been working on a sample project, which will eventually be published to my GitHub repo. The project specifically focusses on Microsoft Entity Framework with an Azure SQL database and also utilises Blazor as the underlying UI and logic layer, including DevExpress for Blazor UI components. This is an initial post which describes the project and it’s capabilities.

The CarShop project was envisioned from wanting to build something new and then work on multiple articles rather than only a few for a project, for part of this year. This will enable me to provide updates at various intervals and at some stage, including the publishing of the code.

Why a CarShop?

Since I am car fan and have been for many years, I thought this would be an exciting project to work on this year. With Blazor + .NET and DevExpress being some of my favorite development frameworks, I thought this would be ideal as a project.

The database schema

Since I am using the Microsoft Entity Framework in the Blazor Visual Studio project, the schema was exactly where I wanted to start. As the iterations developed, I decided to go straight into Azure SQL to provision my tables, entities and relationships, primary keys and foreign keys etc. The project needs to store car details (at a basic level), customer details, car manufacturers, car models, fuel types, engine sizes etc. Whilst it is a simple model to start with, it’s relatively simple to expand the schema as I see fit, both from the SQL backend as well as the coded elements and data classes.

For this post I will show an example of the schema, which is below, produced by dbForgeStudio 2022 for SQL Server.

CarShop Schema – Developed using dbForgeStudio 2022 for SQL Server

Since this is a relatively simple sample project, the data is held in a single Azure SQL database. As you can see, the Vehicles table has the most relationships with car fuel types, vehicle status, engine size, colours, models and manufacturers. For the customers table, I’ve kept the design simple for now although I intend to expand this into a scenario where there may need to be some data quality checks and periodic checks around when the customer data was last updated, for reasons I will include in a future post.

Part 2 will focus on the Transact-SQL, so that the schema can be provisioned.

Advertisement

DVLA Vehicle Enquiry Service API

Leave a reply

I’ve recently been developing a application for the car industry, to record vehicles, models, customer information, vehicle sales and storage of images etc. This is ASP.NET Blazor application which utilises Entity Framework Core, Microsoft Azure, Azure Web sites and Azure storage. One of the features I thought would really be interesting is for the car sales administrators to enter new vehicles into their stock and then dynamically have a component which allows them to query the vehicle information via the DVLA VES Web API.

Sometimes, to start with developing a component, I develop the component code outside of Blazor i.e. a Console application which can contains all the response structure, associated methods and calls the VES API with a HTTP client.

Now that I am finished with the basics of calling the VES web API, I can now expand this with all the necessary error handling e.g. HTTP error codes, and include this as a component within the Blazor application.

I’ve published the ASP.NET console application in my GitHub repo in the link below. You will need to request a VES API key and utilise your registrations, or set these as arguments in the console app, or just set a static string for this as it is in the current code.

DVLAConsoleAPICaller

If you prefer to perform a simpler test, I’ve provided a working PowerShell script below, you will just need to utilise your own API Key and set the registration as required.

$VehicleRegistrationNumber = "TE57VRN"
$APIKey = "[APIKEY]"
$DVLAURI = "https://driver-vehicle-licensing.api.gov.uk/vehicle-enquiry/v1/vehicles"
$Header = @{"x-api-key" = $APIKey} 
$RequestBody = @{"registrationNumber"= $VehicleRegistrationNumber} | ConvertTo-Json

Invoke-RestMethod -Method Post -Uri $DVLAURI -Body $RequestBody -ContentType "application/json" -Headers $Header

Cosmos DB World Blazor Application with DevExpress UI Components and Bing Maps: Part 2

Leave a reply

A few months ago I developed and published a post on a Blazor server project which utilises DevExpress UI Framwork components, Cosmos DB and Bing Maps with JSinterop. There are two Razor UI components, which are presented on the main index page, these display country and city selector drop down controls, a tiny javascript file to interact with the Bing Maps API and a Bing maps UI component.

To use this solution, you will need to provision a Cosmos DB account and create a single collection. You can utilise the Cosmos DB migration tool to load the dataset below, into the Cosmos DB collection. Various appsettings need to be updated to reflect your own Cosmos DB account, collection, partition key, database and cosmos db key. The _host.cshtml, will need to be updated for the Javascript link reference in relation to the Bing maps key too.

The project site is accessible on Microsoft Azure below and I have now uploaded the code to my GitHub public repo. Follow the links below.

Cosmos DB World Web Site

Cosmos DB World Source Code

Cosmos DB World Countries DataSet