Using two different html template in Blazor

In Blazor, you can achieve the scenario of having two different HTML templates, one for the landing page and another for the dashboard, by organizing your project structure and using routing appropriately. Here's how you can implement this:

1. **Project Structure**:

   Organize your Blazor project into two main sections: one for the landing page and one for the dashboard. You can create separate folders for each section to keep things organized.

   ```
   - Pages
     - Landing
       - LandingPage.razor
       - LandingSubPage1.razor
       - LandingSubPage2.razor
       - ...
     - Dashboard
       - SignIn.razor
       - SignUp.razor
       - DashboardPage1.razor
       - DashboardPage2.razor
       - ...
   ```

2. **Routing**:

   Define your routing configurations in the `App.razor` file to handle navigation between the landing page and the dashboard:

   ```razor
   
       
           
           
               
               
           

           
           
               
               
           
       
       
           
       
   
   ```

   In the code above, we have two sets of routes defined: one for the landing pages and another for the dashboard pages. Each set of routes uses a different layout component (`MainLayout` for the landing and `DashboardLayout` for the dashboard).

3. **Layouts**:

   Create separate layout components (`MainLayout.razor` and `DashboardLayout.razor`) for the landing page and the dashboard. You can include the respective CSS and JavaScript libraries, styles, and templates in these layout components.

   ```razor
   
   

   ```

   ```razor
   
   

   ```

4. **Navigation**:

   Use Blazor navigation components (e.g., `NavigationManager`) to handle navigation between the landing page and the dashboard. For example, in your SignIn and SignUp components, you can add buttons or links to navigate to the dashboard:

   ```razor
   @page "/dashboard/signin"
   
   Go to Dashboard
   
   @code {
       [Inject] private NavigationManager NavigationManager { get; set; }
   
       private void NavigateToDashboard()
       {
           NavigationManager.NavigateTo("/dashboard");
       }
   }
   ```

5. **CSS and JavaScript**:

   Include the necessary CSS and JavaScript libraries specific to the landing and dashboard pages in their respective layout components. You can use standard HTML `link` and `script` tags to include these resources.

By following this approach, you can have separate HTML templates, styles, and scripts for the landing page and the dashboard while keeping them in the same Blazor application. Users can navigate between the landing page and the dashboard as needed.

Note - AI generated