Reputation: 9
Server side scripts reloading Issue
I'm creating a blazor web app rendermode InteractiveServer in .net 8. I've implemented an admin bootstrap template in project and put all required CSS and JS files in app.razor.
The issue is when I navigate to another component by clicking on nav link in sidebar then it doesn't load scripts and style sheets.
In simple words After navigating to other page or component style sheets and scripts does not load. When I reload page by pressing CTRL + R then all files are resolved correctly. I
Is there anyone to help with this issue?
I tried blazor.web.js auto start=false then it reloads the page that I don't want. I want that simple the all style sheets and scripts should be loaded while navigating to any component. I am attaching my app.razor below
<!doctype html>
<html lang="en"class="layout-navbar-fixed layout-menu-fixed layout-compact "dir="ltr" data-skin="default" data-assets-path="assets/" data-template="vertical-menu-template" data-bs-theme="light">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>Blazor</title>
<meta name="description" content="Sneat is the best bootstrap 5 dashboard for responsive web apps. Streamline your app development process with ease." />
<meta name="keywords" content="Sneat bootstrap dashboard, sneat bootstrap 5 dashboard, themeselection, html dashboard, web dashboard, frontend dashboard, responsive bootstrap theme" />
<meta property="og:title" content="Sneat Bootstrap 5 Dashboard PRO by ThemeSelection" />
<meta property="og:type" content="product" />
<meta property="og:url" content="https://themeselection.com/item/sneat-dashboard-pro-bootstrap/" />
<meta property="og:image" content="../../../../themeselection.com/wp-content/uploads/edd/2024/08/sneat-dashboard-pro-bootstrap-smm-image.png" />
<meta property="og:description" content="Sneat is the best bootstrap 5 dashboard for responsive web apps. Streamline your app development process with ease." />
<meta property="og:site_name" content="ThemeSelection" />
<link rel="canonical" href="https://themeselection.com/item/sneat-dashboard-pro-bootstrap/" />
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src = 'www.googletagmanager.com/gtm5445.html?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-5DDHKGP');
</script>
<link rel="icon" type="image/x-icon" href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/assets/img/favicon/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com/" />
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="assets/vendor/fonts/iconify-icons.css" />
<link rel="stylesheet" href="assets/vendor/libs/pickr/pickr-themes.css" />
<link rel="stylesheet" href="assets/vendor/css/core.css" />
<link rel="stylesheet" href="assets/css/demo.css" />
<link rel="stylesheet" href="assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
<link rel="stylesheet" href="assets/vendor/fonts/flag-icons.css" />
<link rel="stylesheet" href="assets/vendor/libs/apex-charts/apex-charts.css" />
<script src="assets/vendor/js/helpers.js"></script>
@* <script src="assets/vendor/js/template-customizer.js"></script> *@
<script src="assets/js/config.js"></script>
</head>
<body>
<Routes />
<script src="_framework/blazor.web.js"></script>
<script src="assets/vendor/libs/jquery/jquery.js"></script>
<script src="assets/vendor/libs/popper/popper.js"></script>
<script src="assets/vendor/js/bootstrap.js"></script>
<script src="assets/vendor/libs/%40algolia/autocomplete-js.js"></script>
<script src="assets/vendor/libs/pickr/pickr.js"></script>
<script src="assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="assets/vendor/libs/hammer/hammer.js"></script>
<script src="assets/vendor/libs/i18n/i18n.js"></script>
<script src="assets/vendor/js/menu.js"></script>
<script src="assets/vendor/libs/apex-charts/apexcharts.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/dashboards-analytics.js"></script>
@* <script src="site.js"></script> *@
</body>
</html>
and this is my sidebar
<aside id="layout-menu" class="layout-menu menu-vertical menu">
<div class="app-brand demo ">
<a href="/" class="app-brand-link">
<span class="app-brand-logo demo">
<span class="text-primary">
<svg width="25" viewBox="0 0 25 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M13.7918663,0.358365126 L3.39788168,7.44174259 C0.566865006,9.69408886 -0.379795268,12.4788597 0.557900856,15.7960551 C0.68998853,16.2305145 1.09562888,17.7872135 3.12357076,19.2293357 C3.8146334,19.7207684 5.32369333,20.3834223 7.65075054,21.2172976 L7.59773219,21.2525164 L2.63468769,24.5493413 C0.445452254,26.3002124 0.0884951797,28.5083815 1.56381646,31.1738486 C2.83770406,32.8170431 5.20850219,33.2640127 7.09180128,32.5391577 C8.347334,32.0559211 11.4559176,30.0011079 16.4175519,26.3747182 C18.0338572,24.4997857 18.6973423,22.4544883 18.4080071,20.2388261 C17.963753,17.5346866 16.1776345,15.5799961 13.0496516,14.3747546 L10.9194936,13.4715819 L18.6192054,7.984237 L13.7918663,0.358365126 Z" id="path-1"></path>
<path d="M5.47320593,6.00457225 C4.05321814,8.216144 4.36334763,10.0722806 6.40359441,11.5729822 C8.61520715,12.571656 10.0999176,13.2171421 10.8577257,13.5094407 L15.5088241,14.433041 L18.6192054,7.984237 C15.5364148,3.11535317 13.9273018,0.573395879 13.7918663,0.358365126 C13.5790555,0.511491653 10.8061687,2.3935607 5.47320593,6.00457225 Z" id="path-3"></path>
<path d="M7.50063644,21.2294429 L12.3234468,23.3159332 C14.1688022,24.7579751 14.397098,26.4880487 13.008334,28.506154 C11.6195701,30.5242593 10.3099883,31.790241 9.07958868,32.3040991 C5.78142938,33.4346997 4.13234973,34 4.13234973,34 C4.13234973,34 2.75489982,33.0538207 2.37032616e-14,31.1614621 C-0.55822714,27.8186216 -0.55822714,26.0572515 -4.05231404e-15,25.8773518 C0.83734071,25.6075023 2.77988457,22.8248993 3.3049379,22.52991 C3.65497346,22.3332504 5.05353963,21.8997614 7.50063644,21.2294429 Z" id="path-4"></path>
<path d="M20.6,7.13333333 L25.6,13.8 C26.2627417,14.6836556 26.0836556,15.9372583 25.2,16.6 C24.8538077,16.8596443 24.4327404,17 24,17 L14,17 C12.8954305,17 12,16.1045695 12,15 C12,14.5672596 12.1403557,14.1461923 12.4,13.8 L17.4,7.13333333 C18.0627417,6.24967773 19.3163444,6.07059163 20.2,6.73333333 C20.3516113,6.84704183 20.4862915,6.981722 20.6,7.13333333 Z" id="path-5"></path>
</defs>
<g id="g-app-brand" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Brand-Logo" transform="translate(-27.000000, -15.000000)">
<g id="Icon" transform="translate(27.000000, 15.000000)">
<g id="Mask" transform="translate(0.000000, 8.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use fill="currentColor" xlink:href="#path-1"></use>
<g id="Path-3" mask="url(#mask-2)">
<use fill="currentColor" xlink:href="#path-3"></use>
<use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-3"></use>
</g>
<g id="Path-4" mask="url(#mask-2)">
<use fill="currentColor" xlink:href="#path-4"></use>
<use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-4"></use>
</g>
</g>
<g id="Triangle" transform="translate(19.000000, 11.000000) rotate(-300.000000) translate(-19.000000, -11.000000) ">
<use fill="currentColor" xlink:href="#path-5"></use>
<use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-5"></use>
</g>
</g>
</g>
</g>
</svg>
</span>
</span>
<span class="app-brand-text demo menu-text fw-bold ms-2">Sneat</span>
</a>
<a href="" class="layout-menu-toggle menu-link text-large ms-auto">
<i class="icon-base bx bx-chevron-left"></i>
</a>
</div>
<div class="menu-inner-shadow"></div>
<ul class="menu-inner py-1">
<!-- Dashboards -->
<li class="menu-item active open">
<NavLink href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon icon-base bx bx-home-smile"></i>
<div data-i18n="Dashboards">Dashboards</div>
<div class="badge text-bg-danger rounded-pill ms-auto">5</div>
</NavLink>
<ul class="menu-sub">
<li class="menu-item active">
<NavLink href="/counter" class="menu-link">
<div data-i18n="Analytics">Analytics</div>
</NavLink>
</li>
<li class="menu-item">
<NavLink href="/weather" class="menu-link">
<div data-i18n="CRM">CRM</div>
</NavLink>
</li>
</ul>
</li>
</ul>
</aside>
Upvotes: 0
Views: 64
Answers (1)
Reputation: 16066
First of all, in .Net 8, we have a new template named Blazor web app, and accordingly blazor server app template is removed, but we can still run the blazor server app. Here I deduce you are workning on blazor web app interactive server render mode.
In your application, you have a sidebar which containing many blades containing nav link. The issue is that when you click the nav link, the app do redirects to another component but there's no stylesheet and scripts worked in that components. The symptom is that no styles applied and sidebar toggler/nav links drop-down stopped working.
Just like what you know, blazor helps c# developers to write fronent app using c# language, it will help to convert C# codes into html content finally based on Blazor native components, so that we'd better to use native components to realize the features we want.
Since you didn't share your code, I could only share normal and general advice to troubleshoot and resolve your issue. I think we could start from investigating the template project created in VS. Then we can follow the template to use component to acheive the sidebar feature. Let's say you created a component named DataGrid.razor, then you should have @page "/grid" in the top of the component, and you can add codes below into your side bar codes.
<nav class="flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="grid" Match="NavLinkMatch.All">
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> DataGrid
</NavLink>
</div>
</nav>
You are tripped when loading scripts. This makes me puzzled as the script you referred to shall be JS code, and JS is usually used to control DOM element behavior, such as content loading, all kinds of event handling and data management. But we should use c# native methods to do them. For example, if we want to add click event handler, we should used codes like below.
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
And we have some specific scenarios that we have to use JS code such as scrolling to an element dynamically or contact with 3rd js libraries. Then we have IJSRuntime class, we inject @inject IJSRuntime JS into the component we want to call JS method. And the JS method( part) should be put in App.razor after <script src="_framework/blazor.web.js"></script>.
@page "/grid"
@rendermode InteractiveServer
@inject IJSRuntime JSRuntime
<button @onclick="SetStock">Set Stock</button>
@code {
private decimal price;
private async Task SetStock()
{
price = Random.Shared.Next(1, 101);
await JS.InvokeVoidAsync("displayTickerAlert1", price);
}
}
<script>
window.displayTickerAlert1 = (price) => {
alert(`$${price}!`);
};
</script>
Blazor script will appear in outermost layer.
Upvotes: -1
Related Questions
- How do I keep two side-by-side div elements the same height?
- CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
- Best practice to call ConfigureAwait for all server-side code
- C# Equivalent of SQL Server DataTypes
- Changing css Display property once a key is hit with javaScript
- How to load all css and js at a time in Cakephp
- CSS with SpraedPDFGeneratorBundle
- boostrap in a rails application, 404 (Not Found)
- Javascript Minification Caching Issue
- Pane not resizing after easing / transition