CSS Not Working In _Host.chstml In Blazor Server - c#

Here I have blazor server app, in app I have two _Host.cshtml, one for website which is default _Host.cshtml and another for admin panel that is _HostAdmin.cshtml. Both of them have separate css and js file. I too have separate layout, for website I have Mainlayout.razor which should use _Host.cshtml and for admin panel I have AdminLayout.razor which should use _HostAdmin.cshtml .
Now, the problem is that when I add new razor component and use AdminLayout.razor layout the view doesnot use css and js of _HostAdmin.cshtml.
Below is my _HostAdmin.cshtml
#page "/Admin"
#namespace MCQ.Pages._Pages_Admin__HostAdmin
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Admin Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="~/Admin" />
<link rel="stylesheet" href="/Adminlte/plugins/fontawesome-free/css/all.min.css" />
<link rel="stylesheet" href="/Adminlte/plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/jqvmap/jqvmap.min.css">
<link rel="stylesheet" href="/Adminlte/dist/css/adminlte.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="/Adminlte/plugins/summernote/summernote-bs4.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
<component type="typeof(App)" render-mode="ServerPrerendered" />
</div>
<script src="~/Adminlte/plugins/jquery/jquery.min.js"></script>
<script src="~/Adminlte/plugins/jquery-ui/jquery-ui.min.js"></script>
<script>$.widget.bridge('uibutton', $.ui.button)</script>
<script src="~/Adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="~/Adminlte/plugins/chart.js/Chart.min.js"></script>
<script src="~/Adminlte/plugins/sparklines/sparkline.js"></script>
<script src="~/Adminlte/plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="~/Adminlte/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<script src="~/Adminlte/plugins/jquery-knob/jquery.knob.min.js"></script>
<script src="~/Adminlte/plugins/moment/moment.min.js"></script>
<script src="~/Adminlte/plugins/daterangepicker/daterangepicker.js"></script>
<script src="~/Adminlte/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="~/Adminlte/plugins/summernote/summernote-bs4.min.js"></script>
<script src="~/Adminlte/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<script src="~/Adminlte/dist/js/adminlte.js"></script>
<script src="~/Adminlte/dist/js/pages/dashboard.js"></script>
<script src="~/Adminlte/dist/js/demo.js"></script>
</body>
</html>
Below is Startup.cs
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
endpoints.MapFallbackToPage("~/Admin/{*clientroutes:nonfile}", "/_HostAdmin");
});


You state
Now, the problem is that when I add new razor component and use AdminLayout.razor layout the view doesnot use css and js of _HostAdmin.cshtml.
and I assume your question is "Why".
You're adding a new razor component page to the existing application - probably with a route of something like "/admin/myadminpage". You're misunderstanding what's actually going on.
_Host.cshtml loads the SPA, but that's the only get/post that happens. Navigation after that is changing out components in the DOM. Loading a component with the layout AdminLayout just changes out the Layout component. There's no toing and froing with the server.
What you are trying to do requires a reload of the SPA. You could use:
NavigationManager.NavigateTo("/admin/myadminpage", true);
Also even if you do force a reload, the Fallbacks are in the wrong order - the default before the specific.
endpoints.MapFallbackToPage("/_Host");
endpoints.MapFallbackToPage("~/Admin/{*clientroutes:nonfile}", "/_HostAdmin");

Related

Create a cards carousel slider with blazor

I have been working with blazor server for some time now but I have not been able to achieve how to create a cards carousel with it. I want to use slick slider in my project. I have downloaded slick and jquery, linked jquery, slick.min.js, slick.js, slick-theme.css and slick.css but nothing seems to work. I've tried looking on the web for some solutions but none of these are clear to understand. I've also done this with html, css and js and it works just fine. Please anyone help me with this because i believe a carousel is a very important component in a website.
#using Microsoft.AspNetCore.Components.Web
#namespace Blogger.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en" class="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-500">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link href="css/site.css" rel="stylesheet" />
<link href="Blogger.styles.css" rel="stylesheet" />
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
#RenderBody()
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/slick.js"></script>
<script src="js/all.min.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>

Perhaps it is not working for you because you have implemented both the normal and the minified file?
<script src="js/slick.min.js"></script>
<script src="js/slick.js"></script>

Style.Render doesn't works on server side (Razor )

I m building a Wen Application using Razor page (c#). So in my "_Layout.cshtml page" I m build this code:
<!DOCTYPE html>
<html style="height:110%;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="../Scripts/jquery.min.js"></script>
<link href="../Content/jquery-ui.css" rel="stylesheet">
<script src="../Scripts/jquery-ui.min.js"></script>
</head>
<body style="width:100%;height:100%;">
<div class="container body-content">
#RenderBody()
</div>
</body>
</html>
So In my local pc, if I try to open Index Page, I can see this if I try to see Code of HTML page:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eresult srl</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="../Scripts/jquery.min.js"></script>
<link href="../Content/jquery-ui.css" rel="stylesheet">
<script src="../Scripts/jquery-ui.min.js"></script>
</head>
To see the index page on my local pc, I use this link "http:/localhost:9094/Pagina.aspx"
Now if I try to install this application on the server side, I have some problem of Graphic.
This is the url that I use: "http://url:9094/Questionario/Pagina.aspx"
This is the code that I can see if I see code of HTML page.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eresult srl</title>
<link href="/Questionario/Content/css?v=5h6Wc7kfOUsqxEEmYLsFbm8C9NAaEGNbzkeznwX1XR41" rel="stylesheet"/>
<script src="/Questionario/bundles/modernizr?v=inCVuEFe6J4Q07A0AcRsbJic_UE5MwpRMNGcOtk94TE1"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
<!--<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />-->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="../Scripts/jquery.min.js"></script>
<link href="../Content/jquery-ui.css" rel="stylesheet">
<script src="../Scripts/jquery-ui.min.js"></script>
</head>
As you can see on server side the system cannot load css and js file correctly.

You have to use relative paths all over your app especially when you deploy it to the server (like IIS):
~ won't work within static html code, therefore use:
<script src="#Url.Content("~/Scripts/jquery.min.js")"></script>
<link href="#Url.Content("~/Content/jquery-ui.css")" rel="stylesheet">
<script src="#Url.Content("~/Scripts/jquery-ui.min.js")"></script>

Why SignalR is not loaded properly when my ASP.NET MVC application is published on IIS using bundle optimization?

It seems that when running my application using SignalR on my development server with IIS I get the error below in the JS console (while it's completely fine running the application locally in Debug):
Uncaught Error: SignalR: SignalR is not loaded. Please ensure jquery.signalR-x.js is referenced before ~/signalr/js.
at hubs:17
at hubs:106
Line 17 is related to:
if (typeof ($.signalR) !== "function") {
throw new Error("SignalR: SignalR is not loaded. Please ensure jquery.signalR-x.js is referenced before ~/signalr/js.");
}
Line 106 is just the end of the IIFE.
Here is below BundleConfig class:
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
var scriptBundle = new ScriptBundle("~/Scripts/bundle");
// jQuery
scriptBundle.Include("~/Scripts/jquery-3.1.1.min.js");
// Bootstrap
scriptBundle.Include("~/Scripts/bootstrap.min.js");
// Knockout
scriptBundle.Include("~/Scripts/knockout-{version}.js");
// SignalR
scriptBundle.Include("~/Scripts/jquery.signalR-{version}.js");
// Custom site scripts
scriptBundle.Include("~/Scripts/scripts.js");
scriptBundle.Include("~/Scripts/scripts-bootstrap.js");
scriptBundle.Include("~/Scripts/scripts-devextreme.js");
var styleBundle = new StyleBundle("~/Content/bundle");
// Bootstrap
styleBundle.Include("~/Content/bootstrap-telus-theme.min.css");
// Font Awesome
styleBundle.Include("~/Content/font-awesome.min.css");
// Custom site styles
styleBundle.Include("~/Content/Site.css");
styleBundle.Include("~/Content/Site-bootstrap-plus.css");
styleBundle.Include("~/Content/Site-devextreme-plus.css");
bundles.Add(scriptBundle);
bundles.Add(styleBundle);
#if !DEBUG
BundleTable.EnableOptimizations = true;
#endif
}
}
The doctype on the development server looks like:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<title>Login</title>
<link rel="favicon" href="/Content/favicons/favicon.ico" />
<link rel="favicon" sizes="32x32" href="/Content/favicons/favicon-32.png" />
<link rel="favicon" sizes="128x128" href="/Content/favicons/favicon-128.png" />
<link rel="apple-touch-icon" href="/Content/favicons/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/Content/favicons/apple-touch-icon-72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/Content/favicons/apple-touch-icon-114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/Content/favicons/apple-touch-icon-144.png" />
<link href="/Content/bundle?v=KoFrSDNrdsCobjey_0WoDyRHewQDRrB1Ov9eEHg15EI1" rel="stylesheet"/>
<link href="/Content/DevExtremeBundle?v=dvjWkuzRNPhpuO8epzd1bapDA4VbH3NGrM9XfK6lfH41" rel="stylesheet"/>
<script src="/Scripts/bundle?v=bk8qAjn5FOZNS6DjmQ8qRN1l5sZzYFEHYS7tNOnf4vk1"></script>
<script src="/Scripts/DevExtremeBundle?v=EDbcZoJEzBcOEMDXw50S76TV4vRJy8nCjafsccwoAas1"></script>
<script src="/signalr/hubs" type="text/javascript"></script>
</head>
In local debug (so without the bundle optimization):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<title>Login</title>
<link rel="favicon" href="/Content/favicons/favicon.ico" />
<link rel="favicon" sizes="32x32" href="/Content/favicons/favicon-32.png" />
<link rel="favicon" sizes="128x128" href="/Content/favicons/favicon-128.png" />
<link rel="apple-touch-icon" href="/Content/favicons/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/Content/favicons/apple-touch-icon-72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/Content/favicons/apple-touch-icon-114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/Content/favicons/apple-touch-icon-144.png" />
<link href="/Content/bootstrap-telus-theme.min.css" rel="stylesheet"/>
<link href="/Content/font-awesome.min.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="/Content/Site-bootstrap-plus.css" rel="stylesheet"/>
<link href="/Content/Site-devextreme-plus.css" rel="stylesheet"/>
<link href="/Content/dx.common.css" rel="stylesheet"/>
<link href="/Content/dx.telus.light.css" rel="stylesheet"/>
<script src="/Scripts/jquery-3.1.1.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/knockout-3.4.2.debug.js"></script>
<script src="/Scripts/jquery.signalR-2.2.2.js"></script>
<script src="/Scripts/scripts.js"></script>
<script src="/Scripts/scripts-bootstrap.js"></script>
<script src="/Scripts/scripts-devextreme.js"></script>
<script src="/Scripts/cldr.js"></script>
<script src="/Scripts/cldr/event.js"></script>
<script src="/Scripts/cldr/supplemental.js"></script>
<script src="/Scripts/cldr/unresolved.js"></script>
<script src="/Scripts/globalize.js"></script>
<script src="/Scripts/globalize/message.js"></script>
<script src="/Scripts/globalize/number.js"></script>
<script src="/Scripts/globalize/currency.js"></script>
<script src="/Scripts/globalize/date.js"></script>
<script src="/Scripts/jszip.js"></script>
<script src="/Scripts/dx.all.debug.js"></script>
<script src="/Scripts/aspnet/dx.aspnet.data.js"></script>
<script src="/Scripts/aspnet/dx.aspnet.mvc.js"></script>
<script src="/signalr/hubs" type="text/javascript"></script>
</head>
What is published on the development server does not run with a DEBUG constant, how can I make it work without it?
Imho the BundleTable.EnableOptimizations = true; line is not supposed to mess up my signalR bundling and still that's pretty much the only difference I can see between the two. However when running with the development server configuration locally it also works even with the optimization bundle enabled...

The issue happened because bundle optimization is skipping min files. And you bundled JS doesn't have jQuery, which is required for SignalR.
For more details, please check this answer: Bundler not including .min files

script never run in .cshtml file of mvc

This is the formal structure of my .cshtml file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dashboard</title>
<link rel="stylesheet" href="~/lib/Hover/hover.css" />
<link rel="stylesheet" href="~/lib/fontawesome/css/font-awesome.css" />
<link rel="stylesheet" href="~/lib/weather-icons/css/weather-icons.css" />
<link rel="stylesheet" href="~/lib/ionicons/css/ionicons.css" />
<link rel="stylesheet" href="~/lib/jquery-toggles/toggles-full.css" />
<link rel="stylesheet" href="~/lib/morrisjs/morris.css" />
<link rel="stylesheet" href="~/lib/select2/select2.css" />
<link rel="stylesheet" href="~/lib/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" />
<link rel="stylesheet" href="~/css/quirk.css" />
<script src="~/lib/modernizr/modernizr.js"></script>
<script>
alert("hello from top");
</script>
</head>
<body style="background:none;">
---Several divs------
<script src="~/lib/jquery/jquery.js"></script>
<script src="~/lib/jquery-ui/jquery-ui.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.js"></script>
<script src="~/lib/jquery-toggles/toggles.js"></script>
<script src="~/lib/morrisjs/morris.js"></script>
<script src="~/lib/datatables/jquery.dataTables.js"></script>
<script src="~/lib/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="~/lib/select2/select2.js"></script>
<script src="~/js/quirk.js"></script>
<script>
alert("hello from bottom");
</script>
</body>
</html>
Actually It's the design provided by our designer, The first alert message from head is popping up successfully so that it's sure javascript is not disabled in my browser, But the last alert is never shown. When I link the external scripts then that also never works either. This is really annoying. I referenced this question and many more in stackoverflow, But nothing solved.
How can I find out what actually happened here ? Is it because some error in previous js files ? OR it's because of old html4 ? There is nothing in my Action method except return View(); statement so that I think it's not necessary to post.
One additional thing is I've rendered one partial view using #Html.Action("...") in body, I think it's not the issue because I tried removing it as well. Please guide me, I am a beginner.

It's seems the same mistake I did some months ago. Your page is started from
<!DOCTYPE ...>
<html ...>
means It clarifies that you are not using any master layout page so any kind of #Scripts.Render as given in the answer you referenced won't work in the current situation. Just a simple solution is set Layout to null at the top of the page like,
#{
Layout = null;
...
}
and everything will work fine.

How to import a VS MasterPage in Ektron

I recently installed a new site in Ektron. It created all the folders and files necessary to have it working. I created a custom MasterPage in VS 2012 with own folders and CSS/Script files and looking to import it into Ektron to use.
I imported from Workarea > Settings > Template and import template.
When I click on View for the template, I am seeing the following error:
Parser Error Message: Could not load type 'WMED.Site'.
Source Error:
Line 1: <%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WMED.Site" %>
Line 2:
Line 3:
Source File: /Site.Master Line: 1
How do I resolve the error
:: Should I remove the inherit and namespace from the MP for it to work?
The HEAD:
<head runat="server">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="icon" type="image/gif" href="favicon.gif" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<!--<script type="text/javascript" src="theScripts/sliderJS.js"></script>
<link rel="stylesheet" href="theStyles/sliderStyle.css" type="text/css" />-->
<link rel="stylesheet" href="theStyles/pageStyle.css" type="text/css" />
<link rel="stylesheet" href="theCustomFonts/trajanpro_style.css" type="text/css" />
<link rel="stylesheet" href="theCustomFonts/blackjar_style.css" type="text/css" />
<script src="theScripts/jquery.webticker.js" type="text/javascript"></script>
<link rel="stylesheet" href="theStyles/tickerStyles.css" type="text/css" />
<script src="theScripts/pageScript.js" type="text/javascript"></script>
<script src="theScripts/placeholders.min.js" type="text/javascript"></script>
<script src="theScripts/jquery.sidr.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="theStyles/jquery.sidr.light.css" type="text/css" />
<script src="theScripts/jssor.js" type="text/javascript"></script>
<script src="theScripts/jssor.slider.js" type="text/javascript"></script>
<script src="theScripts/jssorSlider.js" type="text/javascript"></script>
<link rel="stylesheet" href="theStyles/jssorSlider.css" type="text/css" />
<!-- ENSURES HTML TAGS ARE COMPLIANT -->
<!--<link rel="stylesheet" href="theStyles/styleDiagnostic.css" type="text/css" />-->
<script>
$(window).resize(function () {
var docHeight = $(document).height();
var docWidth = $(document).width();
$('#lbl').text("height: " + docHeight + " width: " + docWidth);
});
</script>
<script>
function SearchNMClick() {
document.getElementById('HiddenSearchNM').click();
}
</script>
<asp:ContentPlaceHolder ID="HeadPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</head>

You're probably using a Web Application project opposed to a Web Site. Because of this, the code for your MasterPages, ASPX templates, wireframes...etc. is compiled into a DLL (or DLLs) when you build the project.
When you deploy your Web Application project to your Ektron site, in additional to the files you've already pushed out, you have to copy your project's DLLs into the bin directory of the site. Your project will have a bin directory after building where you can find these, just look in File Explorer to find it if you don't see it.
/bin/WMED.dll
Also, if this is the case, do not push your .cs files to the server.

You don't need to import a MasterPage into Ektron, only ASPX templates are imported. The process is, create your ASPX template (with associated MasterPage), save it into your website and then register it with Ektron.

Check the master page's code behind file (the .cs) and make sure that the public partial class looks like public partial class WMED.Sitename is using the same. Also make sure that the .cs file is located in the same directory as the .master template.

Categories

Resources