Blazor For Kids

Step 1: Open Visual Studio and Create a New Project

Start by launching Visual Studio. Then go to the File menu, hover over New, and click on Project... to begin creating a new application.

Step 2: Select the Blazor For Kids Project Template

In the Create a new project window, use the last dropdown on the right to filter by Blazor For Kids. Then select the Blazor For Kids Solution Template and click Next.

Step 3: Name Your Application

In this screen, choose a name for your new application. You can also select a location where the solution will be saved. Once you're done, click Next to continue.

Step 4: Confirm Framework Version

This screen shows the supported .NET version for the Blazor For Kids template. You don’t need to change anything here, as only the supported framework will appear in the dropdown. Simply click Create to continue.

Step 5: Review the Solution Structure

After the solution is created, you'll see two projects listed in the Solution Explorer:

• BlazorForKidsDemo.Domain – This is where you define your backend logic, such as entities, data models, and validation rules.
• BlazorForKidsDemo.Web – This is your frontend project, where you build the user interface and connect it to the backend logic.

In the next step, we will set the Web project as the startup project so you can run your app.

Step 6: Set the Web Project as Startup

To run the application, you need to set the Web project as the startup project. In the Solution Explorer, right-click on BlazorForKidsDemo.Web and select Set as Startup Project from the context menu.

Step 7: Run the Application

Before making any changes, it's a good practice to test that the project runs correctly. Click the green play button (▶) in the toolbar to start the app in Debug mode. This will launch the application in your browser so you can confirm everything is set up correctly.

Step 8: Confirm the App is Running and Stop Debugging

When your browser opens and you see the BlazorForKids welcome screen, it means everything is working correctly. Now that you’ve confirmed the app runs, you can stop debugging by clicking the red square button in the toolbar, pressing Shift+F5, or using the Debug menu.

Step 9: Open the Home Layout to Add a Menu and New Page

To start customizing your app, let’s add a menu and a new page. First, open the HomeLayout.cs file located in the Source/Features/HomeFeatures folder of the BlazorForKidsDemo.Web project.

Step 10: Understand the HomeLayout Structure

Inside the HomeLayout.cs file, you’ll see a class named HomeLayout which implements the IBkApplicationLayout interface. This interface requires you to define three important methods:

• LayoutDesigner – Used to define the layout elements such as menus, headers, or sidebars.
• PagesDesigner – This is where you create and configure the pages for your application.
• ComponentsDesigner – Here, you can define reusable components like GridView, EditForm, etc.

In the screenshot below, you can see that a home page is already defined and linked to the root URL (/) and it displays a component named WelcomeView.

Step 11: Create and Customize Pages

Creating pages in BlazorForKids is simple and flexible. You use the CreatePage method to define each page. If you only provide a name, the page will be created with default settings—perfect for fast prototyping or quick menu links.

For more control, you can use the second argument to configure the page. A page in BlazorForKids typically has three parts:

1. Page Link: Set the text, description (tooltip), and icon that appear in the menu.
2. Title Bar: Customize the title and subtitle of the page header.
3. Content: Define the layout using rows, columns, and spacing, and insert components as needed.

In the example below, we create a page called ContactPage with a title bar and a grid-based layout that uses the built-in BkPlaceHolder component. This placeholder can be used while your actual components are under development.

Step 12: Add a Header and Menu to Your Layout

Most web applications have a header, and BlazorForKids makes it easy to define one using the LayoutDesigner method.

In the example below:

• We call CreateHeader to define the app's header section.
• Inside the header, we use the built-in ApplicationLogo component to show your app's name and logo. You can find and customize this component in Source/Components.
• We also create a menu using CreateMenu and add menu items for the pages we created earlier: HomePage, AboutPage, and ContactPage.

This way, users can navigate between your pages using the menu automatically shown in the app’s header.

Step 13: Run the Application Without Debugging

Now that you’ve added your pages and menu, it’s time to test the updated application. This time, you can run it without debugging for a faster startup.

Click the green play button with no bug icon in the toolbar or press Ctrl + F5. This will launch the app in your browser without attaching the debugger.

Step 14: View Your Header and Navigate Between Pages

After running the application, you can now see the header with the app name and the menu items for your pages. This is how your app’s navigation is structured by default:

• HomePage and AboutPage – These were created with minimal setup, so their links use default names and have no icons.
• ContactPage – This one was fully configured with a custom menu label, icon, title, and subtitle, so it looks more complete.

Each menu item leads to its corresponding page. As you can see in the examples below, the Contact page even includes a structured layout with placeholder components ready to be replaced.

Step 15: Create Your First Entity (Database Table)

To start working with a database in BlazorForKids, you'll need to define your data model. These models are called entities, and each one will represent a database table.

Let’s begin by creating our first table: Employee.

1. In the BlazorForKidsDemo.Domain project, locate the Entities folder.
2. Right-click on the folder and choose Add > Class...
3. In the dialog that appears, name the class Employee.cs and click Add.

This will create a new class file where you can define the structure of your Employee entity (e.g. properties like Name, Email, Position, etc.).

Step 16: Define Properties and Business Rules for the Employee Entity

After creating the Employee class, the next step is to make it functional as a database table in BlazorForKids. To do this:

1. Mark the class as partial.
2. Implement the interface IBkEntity<Employee, ApplicationDbContext>.
3. Define the BkConfiguration method, which is required by the interface. This is where you configure the entity's properties and business logic.

In the example below, we define two string properties: FirstName and LastName. Each property is configured with:

• Label, Placeholder, and Tooltip
• Maximum length using MaxLength
• Regular expression validation for FirstName
• Custom validation rules for LastName, including a uniqueness check against the database

The power of BlazorForKids is that you can centralize both data definition and business logic in one place, making it easy to understand and maintain your code later on.

Step 17: Enable Database Creation and Seeding

Before building your first UI components, it's important to make sure your database is created. The BlazorForKids framework makes this easy with a built-in method called SeedSampleData.

To enable it:

1. Open the Program.cs file in your Web project.
2. Locate the section that says:

   //await app.SeedSampleData();

   and uncomment the line:

   await app.SeedSampleData();

3. Make sure to add the correct namespace for this method. For example:

   using BlazorForKidsDemo.Web;

   Replace it with your Web project’s name if it's different.

This step ensures that your database is automatically created every time the application starts in development mode. Later, you can add sample data to help test and demonstrate your app.

Step 18: Create Your First GridView Component

Now it’s time to build a real UI component that displays data. In BlazorForKids, the GridView is a powerful component that lets you:

• View employee records
• Add new employees
• Edit or delete existing ones
• Search using built-in filters

To create a GridView, go to your HomeLayout class and find the ComponentsDesigner method. Inside it, call the CreateGridView method like this:

builder.CreateGridView<EmployeeModel, Employee>("EmployeesGridView");

This method requires:

• EmployeeModel – a model used for data binding in the UI
• Employee – the entity that represents your database table
• A name for the component (in this case, "EmployeesGridView")

Once registered, this GridView can be added to any page using its name, and it will automatically support full CRUD functionality.

Step 19: Display Your Component on a Page

Now that you’ve created the EmployeesGridView component, the next step is to display it on a page. In this example, we’ll add it to the AboutPage.

To do that, go to the PagesDesigner method where the AboutPage is defined. Inside the page.Content block, simply call:

content.DisplayComponent<EmployeesGridView>();

This is all you need to show a BlazorForKids component inside a page. The name you used when calling CreateGridView (in this case, EmployeesGridView) becomes the type parameter here.

Once added, the page will automatically display the GridView with all its built-in features like filtering, editing, and deleting records.

Step 20: Use the GridView to Create and View Records

Now that you’ve added the EmployeesGridView component to your AboutPage, you can see it in action when navigating to that page.

Here’s what happens:

• You’ll see a table structure with a header showing the entity name ("Employee").
• A New button is available in the top-left of the grid. Clicking it opens a form for creating a new employee.
• The form is automatically generated based on the properties and validations you defined in the Employee entity.
• Fill in the fields (e.g. FirstName and LastName), then click Create Item.
• A success popup will confirm the operation, the form will close, and the new employee record will appear in the table.

Just like that, you’ve created your first full CRUD experience—without writing any Razor pages or HTML!

Conclusion

In just a few simple steps, you’ve seen how easy it is to create a working web application using the BlazorForKids framework. Without writing a single line of front-end code or manually setting up database logic, you’ve built:

• A multi-page application with navigation
• A structured layout with a dynamic menu
• A working GridView component to manage data
• Server-side validation and data persistence with zero boilerplate

This is just the beginning. BlazorForKids is designed to help developers of all ages and experience levels build apps faster, cleaner, and with fewer moving parts.

For more details, advanced features, and examples, make sure to check out our official documentation.

Also, stay tuned to our YouTube channel where we will be posting video tutorials that demonstrate different techniques and strategies for building powerful web applications with ease.

Thank you for trying BlazorForKids. We’re excited to see what you’ll create!