I am successfully using the Nancy Razor engine. I have a _Master.cshtml Layout which defines a razor #section for my javascript and others for my #Html.Partial() and CSS files.
This all works fine.
Edit 1
See here for more useful info including a neat extension method that fixes the problem:
Populate a Razor Section From a Partial
_Master Layout
#inherits Nancy.ViewEngines.Razor.NancyRazorViewBase<dynamic>
<!DOCTYPE html>
<html lang="en">
<head>
//Head stuff
#RenderSection("CSS", required: false)
</head>
<body>
//Body Stuff
#RenderBody()
#RenderSection("Partial", required: false)
#RenderSection("JS", required: false)
</body>
</html>
A Example View
#inherits Nancy.ViewEngines.Razor.NancyRazorViewBase<dynamic>
#{
Layout = "_Master.cshtml";
}
// View HTML
#section Partial{
#Html.Partial("Modal/FindWizard")
}
#section JS{
<script src="/Scripts/Coffee/example.view.min.js"> </script>
}
You can see from the Example View above that I have included a Partial called FindWizard. I would like this file to also take advantage of the razor sections defined in the _Master Layout.
Something like this:
FindWizard Partial with #sections
#inherits Nancy.ViewEngines.Razor.NancyRazorViewBase<dynamic>
<div>
//.. Wizard HTML
</div>
#section CSS{
<link href="/Content/css/bootstrap-wizard.css" rel="stylesheet" />
}
#section JS{
<script src="/Scripts/min/bootstrap-wizard.min.js"></script>
}
I have tried this but I cannot get the razor #sections from the Partial file to render into the final response.
Is this technique possible? Maybe its a plain bad idea as it may lead to duplicate js files being included if a Partial is re-used in the same view?
Thanks
Related
I have an angular.js app where the index.html looks something like with ng-app in the <html> tag
<html lang="en" ng-app="app">
<head></head>
<body>
<custom-navbar-directive></custom-navbar-directive> //angular js directive
<custom-loader></custom-loader>
<!-- To render components -->
<div ui-view ng-cloak></div>
</body>
</html>
I was following the steps in the single-spa angular.js guide. I removed the ng-app from <html> tag and added the following in my app.js
System.register([], function (_export) {
return {
execute: function () {
_export(
window.singleSpaAngularjs.default({
angular: angular,
mainAngularModule: "app",
uiRouter: true,
preserveGlobal: false,
})
);
},
};
});
Also I did the import map and singleSpa.registerApplication steps in the index.html
My issue is now the content is rendering but the <custom-navbar-directive> and <custom-loader> are missing. I added them inside the index.html since they are commonly used in each html template.
When I inspect and checked the rendered html I noticed that they are outside the loaded single spa angularjs app
<custom-navbar-directive></custom-navbar-directive>
<custom-loader></custom-loader>
<div id="single-spa-application:legacyAngularApp">
<div id="__single_spa_angular_1" class="ng-scope">
<!-- content -->
</div>
</div>
I guess since they are directives if those are inside the <div id="__single_spa_angular_1" class="ng-scope"> then it should render.
Any idea how to solve this?
Question
How can I serve different HTML (entry) files for an SPA application (Vue) in ASP.NET Core?
Explanation
Depending on a condition, I would like to serve a different HTML page (much like a controller would do for a non-SPA). The page would still include the entry point for Vue apps <div id="app">, but some other changes should be done before serving the HTML.
I know I somehow have to change the startup.cs file because that renders the HTML with app.UseStaticFiles() and app.UseSPAStaticFiles()
Example
Condition 1 is fulfilled, base.html is served from client -> public -> base.html
Condition 2 is fulfilled instead, special.html is served from client -> public -> special.html
Code
The basic HTML looks something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Title</title>
</head>
<body>
<noscript>
<strong>We're sorry but this webpage doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
The important parts of startup.cs looks like this:
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/dist";
});
// ....
app.UseStaticFiles();
app.UseSpaStaticFiles();
// ....
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller}/{action=Index}/{id?}");
if (env.IsDevelopment())
{
endpoints.MapToVueCliProxy(
"{*path}",
new SpaOptions { SourcePath = "ClientApp" },
npmScript: "serve",
regex: "Compiled successfully");
}
// Add MapRazorPages if the app uses Razor Pages. Since Endpoint Routing includes support for many frameworks, adding Razor Pages is now opt -in.
endpoints.MapRazorPages();
});
// ....
app.UseSpa(spa =>
{
spa.Options.SourcePath = "ClientApp";
});
I have the following code:
<head>
<title></title>
<link rel="stylesheet" href="./styles/darkula.css">
<link rel="stylesheet" href="./styles/github.css">
</head>
<body>
<div class="container">
<pre>
<code class="html">
<button class="button is-primary">Primary</button>
</code>
</pre>
<!-- Change theme button -->
<button onclick="changeTheme()">Change theme</button>
</div>
<script src="highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
document.querySelectorAll("code").forEach(function(element) {
element.innerHTML = element.innerHTML.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
});
function changeTheme() {
...
}
</script>
</body>
I am loading 2 themes in my file. Because the github theme is being loaded after the darkula theme, it gets applied to all the code elements automatically. This is fine, but I would like to allow users to dynamically change the theme to darkula with the click of the button. I could not find anything in the documentation. How can I do this?
If you are using sass/scss and handle your dependencies with npm, you can do the next thing:
#use "sass:meta";
html[data-theme="light"] {
#include meta.load-css("highlight.js/styles/a11y-light");
}
html[data-theme="dark"] {
#include meta.load-css("highlight.js/styles/a11y-dark");
}
To make it to work, you need to define the data-theme attribute in your html tag.
<html data-theme="light">
<!-- ensure to change it with javascript and define one with default -->
...
</html>
There's a github response to this same question here https://github.com/highlightjs/highlight.js/issues/2115
Basically you include all the themes you want, and then disable all the link tags except for the selected theme.
The highlight.js demo page does this https://highlightjs.org/static/demo/
The GitHub repository is for the code can be found here.
(https://github.com/highlightjs/highlight.js/blob/master/demo/demo.js)
I have a view Email1.cshtml (Build Action=Embedded Resource):
#model Email1Model;
<html>
<head>
</head>
<body>
<h1>Hello, #Model.Name</h1>
</body>
</html>
I render the cshtml view to string using ViewRenderService. The only difference is that I use IRazorViewEngine.GetView() instead of FindView();
However, in the output I some application insights stuff:
<html> <head>
<script type="text/javascript">
var appInsights=window.appInsights||function(config){....);
window.appInsights=appInsights;
appInsights.trackPageView();
</script> </head> <body>
<h1>Hello, Liero</h1> </body> </html>
In the startup.cs:
services.AddApplicationInsightsTelemetry(opt => opt.InstrumentationKey = appInsightsKey);
Question:
How do I turn off the javascript in specific views that I render using ViewRenderService?
If you _layout.cshtml has #Html.Raw(JavaScriptSnippet.FullScript) that will inject application insights javascript into each page, you could try adding a conditional in _layout.cshtml using:
#if (condition true for instrumenting)
{
#Html.Raw(JavaScriptSnippet.FullScript)
}
In an ASP.NET Core application I have a _Layout.cshtml file that defines 2 sections, both in the <head> of the layout like this:
<head>
#RenderSection("CSS", required: false)
#RenderSection("Scripts", required: false)
</head>
<body>
#RenderBody()
</body>
I'm trying to create a layout for certain views to use that will be nested, it consists of this:
#{
Layout = "_Layout";
}
<h1>#ViewBag.Title</h1>
#Html.ValidationSummary()
#BodyContent {
#RenderBody()
}
#section CSS {
#RenderSection("CSS", required: false)
}
#section Scripts {
#RenderSection("Scripts", required: false)
}
And Views needed this have their Layout defined to use this Layout instead of _Layout. The problem is that any View that uses this Layout has {} appended to the end of the content, and I cannot find where it is coming from. This appears regardless of whether or not the View defines a CSS and/or Scripts section, and wasn't appearing prior to including the new Layout in between the main _Layout and individual Views.
Fixed,
#BodyContent {
#RenderBody()
}
Should just be:
#BodyContent
#RenderBody()