Coding With David

This is part 7 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 4. Part 4 – About and Copyright 5. Part 5 – Contact Me 6. Part 6 - Portfolio In this post we will be refactoring the button at the bottom of the page on the phone window size and providing a summary of this series. Goto Top Button This bottom allows the user to go back to the top.  This is the button: As it turns out this refactor was less than expected.  We just had to create a new component, like we did on the other post.  We move the HTML code over into the new component.  There was an inline style that was moved to the CSS file. We removed a JS script call to detected when to show the button, we just show it when the media type is meet. Here is the code: <!-- Scroll to Top Button (Only visible

This is part 6 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 4. Part 4 – About and Copyright 5. Part 5 – Contact Me In this post we will be refactoring the Portfolio section to be more dynamic and Blazorized.  In the Portfolio section is where the author show cases their work for others to see.  This is the Portfolio section: We will be making the HTML dynamic and pulling the portfolio information from or configuration service.  When the user clicks on the portfolio image, we will be displaying the details in a modal.  Here are the steps we will be following: 1. Create the data model 2. Create the Configuration method to get the portfolio data. 3. Create the Portfolio page 4. Create the Portfolio detail modal 5. Run and test Data Model Our portfolio detail d

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 4.        Part 4 – About and Copyright With building this component there are a couple of new concepts that we get to deal with.  We can break down what we need to do into these steps: Create a contact data model with data annotations  Convert the current form into to a Blazor form component  Add the Submit button handler  Create a service to handle the submit  Data Model  The fields we need are listed above, we just need to determine the validation rules.  Here is what we decided:  Name  Required   Max length of 100  Phone Number   Required  Max length of 12  Minimum length of 10  Email  Required  DataType of Email  Message  Required  Max Length 1000 (we don’t wan

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 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