Coding With David

Most popular web applications have multiple different page layouts.  I can think of 2 different ones off the top of my head, Log In and Main.  You could add a message dialog and your standard CURD pages as well. Blazor uses a simple implementation to allow you to define the layout of pages.  They provide a main layout as well as allowing you to create any additional layouts you need by inheriting from the Blazor layout component because in Blazor, everything is a component, even the layouts. Default Layout Here is the default MainLayout.razor @inherits LayoutComponentBase <div class="sidebar">     <NavMenu /> </div> <div class="main">     <div class="top-row px-4">         <a href="https://docs.microsoft.com/en-us/aspnet/" target="_blank">About</a>     </div>     <div class="content px-4">         @Body     </div> </div> You can see that

In Blazor, the basic routing is defined in the App.razor file.  You can see the part that handles a known page route and assigns it a layout:     <Router AppAssembly="@typeof(Program).Assembly">         <Found Context="routeData">             <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />         </Found>         <NotFound>             <LayoutView Layout="@typeof(MainLayout)">                 <p>Sorry, there's nothing at this address.</p>             </LayoutView>         </NotFound>     </Router> There is a section, NotFound, that is invoked with the page route is not found.  It will apply a layout as well.  You can see that when a route is not found it simply say “There’s nothing at this address.” You can see that it is using the default layout as well.  What we want to do is make a more presentable message page

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

Convert Bootstrap template to Blazor => Part 3 This is part 3 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 Since we are building a Blazor application and everything cool in Blazor is a component, we need to create some components.  It might seem like over kill, but I will be building header and footer components in this post. Header This is the Header: You should notice there are a couple of variable items in this section: 1. Avatar 2. Name 3. Summary I want to make this section configurable.  In order to do this we can either pass in parameters into the component or we can have some type of a configuration service.  I prefer the configuration service, it allows us to take the application in a few different areas with minimal work.  Configuration Service This will be a simp

This is part 2 in my 7-part series on how to move a free Bootstrap Template and make a Blazor application out of it.  You can see  part one  here. In this post we are going to take a look at what it takes to get the NAV to work with anchor tags and how to make it responsive.  Make a NAV component  This is a Blazor application so we need to componenetize our controls so we can reuse them going forward.  We will be building a horizontal NAV bar component.    To achieve this:     1. Add new Razor component to the part 2 project called Nav.razor     2. Remove the NAV HTML from the Index.razor and add it to the Nav page     3. Add the new Nav component to the Index page              <Nav/>     4. Run it and the nav should show, but still be non-functional Anchor Tags  Currently anchor tags, href="#portfolio">Portfolio</a> do not work in Blazor.  There are several articles explaining why this is so.  At first, I looked for a common C# component t

There are a lot of free Bootstrap them web sites available, just google: free bootstrap themes.  It got me thinking what would it take to convert a simple web site to Blazor?      I found a nice single page web site called Freelancer .   It is a personal web site that allows the author to display their portfolio of projects.  It contains information about the author and a contact me form.     I decided to do a little more than just convert it over.  I want to make it more dynamic and generic so I can use it on multiple web sites.  This is the part one of a set of 7 blog posts that cover what it took to get it all done. Download    I downloaded  the template and opened  it  in  Visual Code .  I reviewed the code and then I  ran it .  It is a cure little site.     Start the Blazor Application   Create a Server side Blazor application   Run the Blazor application and make sure everything is building and running correctly.   Remove un-needed template a