One of my daughters is about to graduate in a few days, and she has a contract lined up already as a Game Developer! As a happy Dad, I am very proud of her accomplishments.
"Dad, how do I keep track of the employment opportunities I have applied to?"
Good question; you need to keep track of who you send your resume to. Your email application outbox doesn't work well because some job applications are submitted online, and most of the time, the platform that handles applications doesn't send you a thank-you email. Plus, you could see the same job elsewhere and apply again by mistake, which is detrimental to us.
You could create an Excel document and use it as a job submission database. You could search, filter, and add notes and comments after a phone call or interview. You could also make a record of any topics you might need to review before the initial contact with the potential employer based on the job description. This is practical, but not as fun.
"How do you make work search fun?"
You'll figure it out... she was looking for cream and I gave her skim milk.
A few days later, while browsing the net, I came across "Blazor", a web framework developed by Microsoft to allow developers to build interactive web user interfaces using reusable components that can be run from both the server and the client. These components can be built with C#, HTML, and CSS.
I remembered that I had left my daughter hanging.
Hey, kiddo! Use Blazor! You can use this framework along with Scaffolding and Entity Framework for MSSQL. Blazor already provides a bunch of reusable components, and you can create your own components following a pattern and you are off to the races! You already know .Net and C#. It will be fun! (2)
Create the App: Scaffolding a Blazor App
Here is how to do it:
You could create your project using the command line but you could also use Visual Studio. Unless you know what the command line instructions exactly do, creating the project with Visual Studio tells you a little more about what is going on. I will use Visual Studio 2022 Community.
Open Visual Studio and create a new project. Select the Blazor Web App template, and configure it. In the "Additional Information" dialog, select the framework. In this dialog you can select the Render Mode. I selected "Server", which means that the framework will manage UI events via WebSockets. There are two other render modes WebAssembly and Auto which is a combination of these two, and they are not explored in this Nugget. You can change the render mode later in the app if you need to.
After clicking "Create" the tooling generates a Blazor project, containing sample pages, which is fully functional. The Solution Explorer shows the following project structure:
An important file is the
appsettings.json. In this file is where the connection string to the database is stored. Like in any Asp.Net Core application, depending on the value of
ASPNETCORE_ENVIRONMENT files like appsettings.production.json or
appsettings.development.json could be created and used during development or production. Consequently, for the project Visual Studio created
launchSettings.json which is located in the properties directory of the app. This file has the
ASPNETCORE_ENVIRONMENT property(8). In this Nugget the launchSettings.json will not be updated. Only appSettings.json will be modified with the new connection string after it is created.
However, the launchSettings.json file contains interesting information worth noting. Open this file and inspect its content which is self explanatory be the naming convention used.
Note the Components directory and how it is organized. Note the extension of these files, ".razor". So, yes; Blazor uses razor to build the actual components.
The App component (App.razor) is the root component of the app with HTML <head> markup, the Routes component, and the Blazor <script> tag. The root component is the first component that the app loads (3). It reminds me a little about Facebook React, but not exactly the same.
Open _Imports.razor and you will see common Razor directives to include in then app's components.
Programs.cs: This is the app's entry point that sets up the WebAssembly host. Here is where services, middleware for anti forgery, razor components, dependencies, etc., are configured.
Build the JobBank
Add a Models directory to the root of the application and add a class JobPost model like this one:
Next, right click on the project and select "Add > New Scaffolded Item..." . The tooling magic starts!
Select "Razor Component using Entity Framework (CRUD)". A dialog like this one is loaded:
Select the Template dropdown list to see other options. Because I want CRUD (Create, Read, Update, Delete) I selected this option. The model is the class JobPost created above. Because we are using EF, we need a context class which has not been created yet. Click the "+" button and accept the default name for this class. Click "Add" button and Visual Studio generates a new component and added under Pages named "JobPostPages".
Not by a long shot, this is a production quality application! This is a tooling demonstration. This application showcases pivotal concepts used when building web applications using Blazor.
Could we use something like this to get a project started. Debatable, perhaps, however, we have learned a lot with this little exercise.
Open the "Components > Pages > JobCostPages > Index.razor", explore it. Note the built in <QuickGrid> component. Note the Razor code section and the OnInitialized() method.
Open "Components > Pages > JobCostPages > Create.razor" and note the use of the built in component <EditForm>. This component has an OnValidSubmit property and it is equal to AddJobPost which is a reference to a function in the @code section. Note the property Model="JobPost", indicating the model bound to this form.
<InputText id="title" @bind-Value="JobPost.Title" class="form-control" />
Note how a property of the model is bound to the component; @bind-Value="JobPost.Title".
Based on the property type, the tooling used the appropriate component.
Note how the model is validated in the form. We could enrich validation by annotating our model. You go ahead and play with that.
Ok, this Nugget is a bit too big already, Let us finish it by connecting the app to the database. Here is how to do it.
Connect to the Database. EF Migration
You can now open the appsettings.json file and note that the tooling has already added a connection string. We could use these settings and create the db and run the migration, nothing wrong.
Another option is to create a new server connection to the database and replace the connection string with your own settings.
You can now check your database server and confirm that the database has been created. In server explorer right click the JobBank database and select properties. Copy the value of the Connection string and replace the connection string in appsettings.json with this new value.
Now we are ready to Add Migration and Update the Database! From Visual studio menu select Tools > NuGet Package Manager > Package Manager Console and type Add-Migration:
After the migration has been created run
Update-Database. You can see in the console that the migration update has been executed successfully! Run the app, run the app! But, where is my stuff?! It is there!
Open the Components > Pages > JobPostPages > Index.razor and note the routing for this page "/jobposts". This is the path to the Job Posts index page. After updating the NavMeny.razor component, and creating a couple of entries you can now edit them, view their details or delete them.
Discussion and Conclusion
This demo shows that a web application using Blazor could be created very easily. Following this Nugget, which uses scaffolding with EF and MSSQL the app was generated in a few clicks. The demo app generated shows a variety of built in components, and how to setup navigation between components.
Note that the Edit, Details, and Delete components have an Id property annotated with SupplyParameterFromQuery attribute. This property is used in the OnInitializedAsync() event handler to find the JobPost. If the JobPost is not found then the Navigation Manager Navigates to "notfound" component. The tooling does not generate this component hence if you provide an id in the query string which does not exists the JobPost is not found and the manager redirects to a non existing component.
To fix this, right click on Components and add a Razor component and name it NotFound.razor. Add the following code to the page:
The first line indicates the routing to this component. Note that this is the URI that the navigation manager is using. Now if you try to navigate to a url that does not exist the error 404 page is loaded. Other error components could be created the same way.
Note in the generated code how the validation is done in the EditForm component.
<EditForm method="post" Model="JobPost" OnValidSubmit="AddJobPost" FormName="create" Enhance>
AddJobPost is executed only if validation of the model is successful. Properties of JobPost model were further decorated with data annotation attributes (7) to further enhance model validation. Attribute such as Required, StringLength, and RegularExpression were used to validate user input to Company name, Phone, and email.
In this example, adding sorting to the client component, QuickGrid (10), won't work because the rendering mode selected when the project was created was "Server." However, we can fix this by changing the rendering mode to "Interactive" (9), which demonstrates that these rendering modes can be used on different pages.
For further reading, point your browser to the references provided. You will find reference 6 particularly interesting. I had the privilege to attend Pr. Elmasry classes at the British Columbia Institute of Technology as one of his students. Medhat is also part of the Microsoft MVP program.
Disadvantages of Using Scaffolding
This Nugget can get you up and running very quickly when creating a Blazor App. It showcases the main features of the framework, from which we can learn a great deal. However, it will take me a while to determine all the NuGet packages I would need to create a similar small project from scratch.
Nevertheless, I think this is a fun way to start learning a new technology, and I thank the Blazor team for the opportunity to use the result of their hard work.
Comments
Post a Comment