Convert Bootstrap Template to Blazor (Part 4)
This is part 4 in my 7-part series on how to move a free Bootstrap Template and make a Blazor application out of it. You can read about the other post here:
1. Part 1 – Create project and Copy over assets
2. Part 2 - Navigation
3. Part 3 – Header and Footer
Since we are building a Blazor application and everything cool in Blazor is a component, we will be continuing to build out our components with the About and Copyright component.
This section tells users about the person who is on the portfolio. We will continue to use our configuration service and add an about method.
1. Left Section message
2. Right Section Message
3. Link To Other Resource
4. Link Name
This component follows the structure of the header and footer and is fairly easy to build.
1. Create the About model
2. Add the GetAbout method to the configuration services
3. Create the “About” page
4. Move the about section copy from the Index page to the About page
5. Add the OnInitialized method to the page to get the configuration
6. Replace the text values with the @model values
7. Run and test
Lets repeat this process and build a copyright component.
There are 2 variables we can make:
1. Website name
2. Current year
Since we are using the configuration service, we can use the header model and pull the name from there. For the current year, we can simply get that from Date.Now.Year. We will need to convert to a string for the page to display it.
1. Create the “Copyright” page
2. Move the copyright section copy from the Index page to the "Copyright" page
3. Add the OnInitialized method to the page to get the configuration
4. Call the GetHeader and use the header model
6. Replace the text values with the @model values
7. Run and test
These components were easy to build now that we did the header and footer components. The next component we will be doing is the “Contact Us” page
[Source Code]
1. Part 1 – Create project and Copy over assets
2. Part 2 - Navigation
3. Part 3 – Header and Footer
Since we are building a Blazor application and everything cool in Blazor is a component, we will be continuing to build out our components with the About and Copyright component.
This is the About Section:
This section tells users about the person who is on the portfolio. We will continue to use our configuration service and add an about method.
About model will contain:
1. Left Section message
2. Right Section Message
3. Link To Other Resource
4. Link Name
This component follows the structure of the header and footer and is fairly easy to build.
Implementation:
1. Create the About model
2. Add the GetAbout method to the configuration services
3. Create the “About” page
4. Move the about section copy from the Index page to the About page
5. Add the OnInitialized method to the page to get the configuration
6. Replace the text values with the @model values
7. Run and test
Copyright
Lets repeat this process and build a copyright component.
There are 2 variables we can make:
1. Website name
2. Current year
Since we are using the configuration service, we can use the header model and pull the name from there. For the current year, we can simply get that from Date.Now.Year. We will need to convert to a string for the page to display it.
Implementation:
1. Create the “Copyright” page
2. Move the copyright section copy from the Index page to the "Copyright" page
3. Add the OnInitialized method to the page to get the configuration
4. Call the GetHeader and use the header model
6. Replace the text values with the @model values
7. Run and test
These components were easy to build now that we did the header and footer components. The next component we will be doing is the “Contact Us” page
[Source Code]
Comments
Post a Comment