I am working on a Blazor WASM e-commerce application using the .NET 6 old version with a default template. I want to add a new razor page with a different look while keeping the old ones in the project. How can I achieve this?Specifically, I want to add a new page with custom CSS and JavaScript, without affecting the existing pages. Can you guide me on how to do this step by step?
What I have done so far is, create an empty SampleLayout and add it under Shared folder beside the MainLayout.
@inherits LayoutComponentBaseI created a Test folder under Pages and added _Imports.razor having this inside of it.
@layout SampleLayoutThen added Home.razor page inside of the Test folder. Having page directive (@page "/Test/Home") and some markup with bootstrap. When I start the application and navigate to /Test/Home there is nothing displayed and no error as well.
I also added the required CSS and JavaScript files under wwwroot-css and -js folders. But I am not sure where to call them in the Home.razorpage.
Edit 1)
Adding @Body to this new layout makes the page display. But still, I need to somehow add the related JS and CSS to this new Home.razor page.
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="apple-touch-icon" href="assets/img/apple-icon.png"><link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico"><link rel="stylesheet" href="assets/css/bootstrap.min.css"><link rel="stylesheet" href="assets/css/templatemo.css"><link rel="stylesheet" href="assets/css/custom.css"><!-- Load fonts style after rendering the layout styles --><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;700;900&display=swap"><link rel="stylesheet" href="assets/css/fontawesome.min.css"></head>...<!-- Start Script --><script src="assets/js/jquery-1.11.0.min.js"></script><script src="assets/js/jquery-migrate-1.2.1.min.js"></script><script src="assets/js/bootstrap.bundle.min.js"></script><script src="assets/js/templatemo.js"></script><script src="assets/js/custom.js"></script><!-- End Script -->