Following on from Part 5, where I provided the links to the CarShop C# project which defines the data model classes for the CarShop database tables and views, I have recently been working on the core components which interact with the entity framework to add data to the Azure SQL CarShop database. There are a number of components which are being developed and I focus on these so that I can start to build out the forms and the interactions from a user experience including the layout of the edit forms and controls. I haven’t yet published the source code onto my github repo, but I expect to do this in the next few months. For now, I’ve have provided a preview of the form layouts and basic capabilities whilst I complete the forms and capabilities, including the completion of testing the components.
There are a few components I’ve built, which I have briefly described below that query/display the data loaded in the previous data seeding scripts. There are components with parameters that dynamically update child components, another which uses a NavigationManager to re-direct edit pages and others that utilise lists and display the entity model data in DevExpress UI components, including ASP.Net Blazor EditForm controls.
Hint: Click on each image and the browser will expand the image to the full size of the screen. This will give you the same view as seen in the my development environment.
Fuel Types – two components with a dynamic fuel type view when new fuel types are added.
Car Manufacturer List
Car Fuel Types with edit functionality
Car Colours
Car Models
New Car Model
Customer List – inline Edit Capability (DevExpress UI Component)
Following on from Part 4, where I provided the links to the CarShop views SQL, I have now published the C# project which defines the data model classes for the CarShop database tables and views. The data classes project has been separated into it’s own project as this will be shared as a dependency with the CarShop Blazor Server project and in future, I will develop the API’s in a separate project.
The project has been published on my GitHub repo here.
You can also follow the guidance from Microsoft to create model classes with the Entity Framework, documented here.
Following on from Part 3, where I provided the links to the CarShop database seeding SQL, I have now published the database view SQL scripts in my public GitHub repo. At present there are two database views.
The CarShop database view SQL scripts can be found in my GitHub repohere.
It is likely that over the course of developing the project, the number of views will expand, hence the reason to separate out the location of the view SQL scripts as apposed to the database mode creation or data seeding SQL scripts.
Following on from Part 2, where I provided the link to the CarShop schema deployment SQL, I have now published the database seeding scripts in my public GitHub repo, for the initial supporting data. At present there are six tables in the database which have data seeding scripts.
The data seeding scripts are listed below.
1 – EngineSize.sql – Inserts a list of engine sizes into the EngineSize table. 2 – Salutation.sql – Inserts a list of salutations for customers into the Salutation table (only basic salutations are loaded) 3 – CarFuelType.sql – Inserts the car fuel types for vehicles into the CarFuelTypes table 4 – CarColour.sql – Inserts a basic list of car colours into the CarColours table 5 – CarManufacturers.sql – Inserts a basic list of car manufacturers into the CarManufacturers table 6 – VehicleStatus.sql – Inserts a list of Vehicle status flags into the VehicleStatus table.
The CarShop data seeding SQL scripts can be found in my GitHub repohere.
Following on from Part 1, where I introduced the CarShop project, I have now published the database scripts in my public GitHub repo, for the data model. At present there are nine tables in the database schema, which need to be created in a specific order to maintain relationships. The tables are listed below.
CarManufacturers – Table to hold all car manufacturer details
CarModels – Table to hold all car models
VehicleStatus – Table to hold the vehicle status e.g. “For Sale”
CarFuelTypes – Table to hold the fuel type for a vehicle
CarColours – Table to hold the car colours
Engine Size – Table to hold all car engine sizes
Vehicles – Table to hold all car vehicle details which has relationships to the above tables as per the Part 1 CarShop project blog post showing the schema diagram.
Salutations – Table to hold all customer salutations
Customers – Table to hold all customer details which has a relationship with Salutations
Some of the tables hold default e.g. Vehicles previous owners has a default of 1 since the vehicles are not new at the Carshop.
The CarShop model SQL scripts can be found in my GitHub repohere.
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.
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.
I’ve recently had a requirement to backup managed disks to Azure blob storage. Rather performing this manually, I scripted this with PowerShell. I created a structure within a .CSV file as an input file, which specifies the Virtual machine names and the storage container and folder, where the disks will be copied into. The script and a sample input file is in my repository below.
You might wonder, your an Architect, why are you posting blogs about coding? Good question I would say 🙂 Well, working as an Architect is my day job, but there are many different ideas I have in my head and some of them just require a bit more thought, where I might need to build a PoC, or sometimes like this post, I like to try out new frameworks, libraries or just build samples for fun. Having already coded for well over a decade in .NET, doesn’t stop me from wanting to keep up to date with my coding skills , especially C#, or trying out different architectural patterns to understand how they can be applied in software applications, hybrid architectures, native cloud architectures or help a project I am working on at a specific point in time. From a work perspective, all things Microsoft are highly important to me, especially since I consider myself lucky enough to have spent a fair bit of time working at Microsoft Canada, Microsoft UK and in Seattle at Microsoft HQ and at Microsoft conferences being trained and kept up to date on technologies, which were not always about Microsoft Azure of course.
Now back to this post…
With the recent updates announced at the .NET 2020 Conference last week, I decided to try out the new InputFile UI component in Blazor. Steve Sanderson had already posted a blog regarding a InputFile component herepreviously, in September 2019. This is now included with the launch of .NET 5. I’ve also been using the DevExpress Blazor UI Components library and used the <DXUpload/> UI component, which I highly recommend also.
In this post I wanted to try out the new native InputFile Control and upload some files to Azure blob storage for testing purposes. I am working on a project which will require the basic functionality of file uploads and downloads to and from Azure blob storage, I may add a future post about one of the new exciting projects I am working on.
Note: This is a very basic implementation for the purposes of this blog post, it is not at all production ready.
Nuget Packages
With any .NET project, the first thing you may want to do is to decide your approach on how you want to build out your components, whether or not you have existing shared libraries, component libraries, NuGet packages you work with regularly, or if you just like coding and building your own supporting toolsets and templates, you may not even need to include anything from the onset and just include packages whilst you are building out your solution in an agile way.
In my sample project, a Blazor Server application, called BlazorFileUploader, I used the following NuGet packages, Microsoft Azure.Storage.Blobs client library and DevExpress.Blazor.
The following configuration was added for the Azure blob storage connection string. Of course, in an enterprise scenario, if your hosting your application in Azure App Service, you could utilise Azure KeyVault, which is recommended instead.
The the default configuration provider, the connection string is set in string within a config context class.
public class Startup
{
public IConfiguration Configuration { get; }
readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
public Startup(IConfiguration configuration)
{
Configuration = configuration;
Config.AzureStorageConnectionString = Configuration.GetConnectionString("StorageAccountConnectionString");
}
....
Config.cs
The AzureStorageConnectionString is set by the code above, so this can be used when the server upload is handled server side.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection.Metadata.Ecma335;
using System.Threading.Tasks;
namespace BlazorAzureStorageFileLoader.Data
{
public class Config
{
public static string AzureStorageConnectionString { get; set; }
}
}
New Razor page
A new Razor page is created to handle the file uploads, a bulk of the code, with the <InputFile/> component.
Note: I hard coded a container named “files” in the code. This is not necessary of course, you can build your own blob storage browser and even have methods to retrieve files and create containers.
The navigation menu is updated to remove the default links and an update is made to the application display name. A new navigation link is added to the fileloader razor page.
I’ve recently been working on a Blazor server side application, to integrate with Cosmos DB. The Cosmos DB holds a single collection with a list of countries and cities with coordinates for each city. I’ve had the small dataset for a while now, most of the free sources of data can be downloaded from this location: http://www.geonames.org/.
Initially the data was in .CSV format and I initially imported the dataset into an Azure SQL database. I later decided to copy the dataset into Cosmos DB and utilise the SDK within a Blazor application, added my Blazor DevExpress nuget package, for the drop down controls, then integrated a Bing Maps application with the Bing Maps SDK. Transferring the data from Azure SQL to a Cosmos DB collection was straight forward using Azure Data Factory.
I have published the basic version of the Blazor application to https://cosmosdbworld.azurewebsites.net, where you can select a country and then a city, using the DevExpress drop down controls, then the map is updated dynamically as the IJSRuntime interface is dependency injected into a Bing Maps UI component. Overall, the Bing map renders extremely quickly, as the longitude and latitude is bound to the parameters of the Bing maps component from the parent country and city drop down component. The longitude and latitude coordinates are also fetched from the CosmosDB collection, everytime a city is selected, which refreshes the map automatically. The simple javascript functions update the <div> in the UI component, with the coordinates each time the city is changed.
I was working on an issue which seemed to be a conditional access policy issue in Azure AD today. Whilst the issue was related to a conditional access policy in the sign in logs, it actually turned out to be a user requiring SSPR security information verification. During research, I found that new Azure AD tenants from August 15th 2020, start utilising the combined experience for both MFA and SSPR. This is documented here.
Here’s a view of what was occurring, which may help someone else in the future.
Problem/Scenario
A cloud application was excluded from MFA, the user also has a password policy applied to the Azure AD account not requiring password resets (something which was required for the scenario). When the user signed into the cloud application, the user received a prompt for more security information, seeming as though from the sign in logs this was point to a conditional access policy blocking the request.
Actual Issue
The actual issue was the user needed to review their verification methods to keep the account secure, for SSPR. This is controlled through the password reset options. Upon review of the sign in logs, an AADSTS50125 was present confirming the issue.
AADSTS Error Code Reference
The actual AAD Security Token Service error message are well documented on this Microsoft docs page. You can also submit the code to the web page below:
Since the above form accepts an error action with a code, as per the HTML markup:
I decided to create my own Blazor application to submit my own AADSTS error codes for troubleshooting. I used the HtmlAgilityPack to pull out the response in the Blazor component to display the details of error codes. This makes it easier to parse the response html and embed the response into a razor page with a reference to ((MarkupString)[HTMLValue])
I have deployed the Blazor AADErrorChecker SPA here, using Azure App service.
Welcome to Tejinder Rai's blog, Cloud Solution Architect 