Blazor Bug Tracker With Scafolding

 

In Visual Studio, there is a feature under Add – New – Item called "Add Scaffolding Item". After viewing a couple of  YouTube videos on how to use it, it got me thinking, is this a realistic feature, or is it just a nice demoable feature?  It does demo nicely.

I decided to try it and see for myself how much value this feature can add for me when creating new applications that need CRUD actions.

The Test Application

To validate the scaffolding, I will be building a basic defect-tracking application using the scaffolding feature.  We will have only three issue types and will be using Entity Framework with an SQLite database.  I will be focusing on the scaffolding, not the features of the application. Granted it will be a scaled-down system, but there is CRUD used. 

These are the issue types I will be creating:

            1.      Bug – issue report from the internal team
      2.      Defect – Like a bug but it was reported from a customer.
      3.      User Story – As defined in a scrum process.

Since I am focused on the CRUD aspect of the application, there will not be any reporting or dashboards for this post.

Base Issue

I will be creating a base class that all the other Issue Types will inherit from. We will call it Base Issue:

    public class BaseIssue

    {

        [Editable(false)]

        [ReadOnly(true)]

        public int Id { get; set; }

        [Required]

        public string Name { get; set; } = "";

        [Required]

        public DateTime CreateDate { get; set; }

        [Required]

        public DateTime ModifiedDate { get; set; }

        [Required]

        [MaxLength(50)]

        public string Reporter { get; set; } = "";

        [Required]

        [MaxLength(50)]

        public string AssignedTo { get; set; } = "";

        [AllowedValues("High", "Medium", "Low")]

        [Required]

        public string Priority { get; set; } = "";

        [AllowedValues("New", "Open", "Blocked", "Testing", "Closed")]

        [Required]

        public string Status { get; set; } = "";

    }

You should notice that I am using Data Annotations on my entities. Some are ok using them on your entities while others say you should not. Since I am using the scaffolding, the data annotations add more information for the scaffolding tool.  It will actually add validation on the UI page it creates based on the data annotations.

I am using a new, .Net 8, data annotation called "AllowValues".  This does what its name says.  It forces the UI to only accept the values listed as being allowed.  Since Enums are not supported directly with the scaffolding tool, this helps.

Also, you should not inherit a Defect from a Bug. That will cause you extra work when you need to identify if the entity you are working with is a Bug or Defect.

Bug

For the bug, we just need to add two properties:

            1.      Description
      2.      StepsToProduce

Defect

For the defect, we need to add three properties:

            1.      Company
      2.      Environment
      3.      FoundInVersion

            4.   Description

            5.   StepsToReproduce

 

User Story

For the user story, we need to add five new properties:

            1.      Points
      2.      AsA
      3.      IWant
      4.      SoThat
      5.      AcceptanceCriteria

These are the four models we will be using in the application. Now that we have our models, we are ready to do the scaffolding.

Scaffold The Bug Model

These are the steps to follow to do the actual scaffolding:

        1.      Under Components, right-click on Pages and select “New Scaffolded Item.”

        2.      On the left side of the dialog that is shown, select “Razor Component” under “MVC.”

        3.      Select Razor Components using Entity Framework (CRUD)

        4.      Click “ADD”

        5.      Once the new dialog shows, enter the information:

            a.      Template

                          i.      CRUD – all the pages to add, edit, delete, detail, and list out and show your data. 

                          ii.      Create – build out the add page.

                          iii.      Edit – build out the edit page.

                          iv.      Details – Build out a page to display the data.

                v.      Delete – build out a page to delete the page.

                          vi.      List – builds out the page to list out the data.

                    1.      Please note that it will create and use Quick Grid for the list page.

            b.      Model Class – select the model you want to scaffold.

            c.      DbContext class – this is the DbContext class you want to use. If you do not have one, select the “+” icon and it will create one for you.

                            i.      This is only if you select to use Entity Framework.

            d.      Database Provide – select which database provider you want to use. For my application, I selected SQLite. Also, note that this will only work on Server configuration.

6.      Click “Add”

            a.      This will

                             i.      Create the DBContext if needed.

                 ii.      Create each page you selected to create.

                 iii.      Add the DB to provide information in Program.cs if needed.

You now have the pages created and the system configured to use those pages. But we still need to create the database.

Create the Database

You only need to do this step if you are using entity framework, and you do not have a database already. I am including it because I learned this is a cool shortcut to do your migrations and update your database.

Create your migration.

1.      Double-click on Connection Services in the Solution Explorer

2.      Find your Service and click on the “…”

3.      Select “Add Migration”

4.      A dialog will pop up. Let it find the DbContext Class name for you.

5.      Click Finish

Update the Database

We have our migration that contains the models we added. Now we need to apply the migration to the database.

        1.      Click on the “…” for the Service you are using, in my case it was SQLite.

        2.      Select “Update Database”

        3.      Once the Dialog is displayed, let it find the DbContext Class name for you, and click “Finish.”

Now you have an updated database that is ready to be used.

Add the new List Page to the Navigation

If we want to see your data in the application, we need to be able to navigate to it. I like to just add the list view to the left-hand side navigation sidebar. Just cut and paste one of the existing nav items and add your list page:

        <div class="nav-item px-3">
            <Nalin class="nav-link" href="defects">
               <span class="bi bi-list-nested-nav-menu" span> Defects
            </NavLink>
        </div>

Now we can run and check out our new pages!

How do the Pages Look

List Page

            1.      The page is very generic, which is fine since we can style it how we want it.
      2.      I am not a fan of having the Edit | Details | Delete buttons there, but again that is something that we can easily style or move.
      3.      We will need to change the order of the fields.
      4.      We will need to Change the Names of the columns, again not a big deal.
      5.      We are displaying columns, like Modified Date and Created Date that we should not.
      6.      Using QuickGrid is a nice touch.
      7.      Overall, not bad.

       Add Page

            1.      Again, we would need to change the style and remove some fields.
      2.      One important thing on this page is that all the controls are just test boxes. We could use a drop-down for several of the properties like status and assigned to. Description and Steps to Reproduce could be Text Areas as well.
      3.      I did try to use Enums for priority and status, but it caused the build to fail after the scaffolding was created because the properties did not match the Enum types. You would have to manually address this.
      4.      It should be noted that the scaffolding does use the right control for numbers and dates.
      5.      I do like the “Back to list” as well.

 

Edit / Details

These are on the same page, but the details are ready only. Both pages suffer from the same styling issue as the rest of the pages. The details page does have a button that will allow you to go into Edit mode.

Delete Page

I usually use a modal for the delete confirmation, but it is nice to see all the information on a page, it is a nice touch. Just like the other pages, this page needs styling too.

UI Validation

Let's take a look at the UI validation you get from the scaffolding tool.

Required

Range Validation

Allow Values Validation

As with the normal Blazor validation components, you can customize the message and style the messages.

Thoughts

I started out thinking that scaffolding was a nice demoable feature but as I used it and started looking at what it generated, I started liking it. If I had an application with a lot of CRUD like an Admin app for a system, I would definitely use the scaffolding feature.  If I had a UI design guide for form input, I would use scaffolding as well. Using the data annotations to help the user input better data on the forms, is a big plus as well.

If you make schema changes to your entities, you will have to manually update the affected pages.  If you have not updated the generated pages, you can simply delete the old pages and regenerate them.

 

Summary

I now view the auto scaffolding feature like I do AI code assist. It is a nice tool, use it where appropriate but do not just use it and put it in production.

My original plan was to take my Defect application and document how long it would take to style it and include that in this post. But this post is longer than I expected, so I will save the “make it pretty” post for another time.

It was re-enforced to me doing this project that you need to plan out your entities including names, types, and values before you generate the UI.  this holds true for a manual UI of the scaffolded UI.

[source]