Develop Reference

MVC Razor, Javascript preload order of operations and feasibility

I have a question regarding an order of operations and to get some feedback on feasibility.
This involves MVC Razor, Javascript and the HTML preload property.
I have a partial view that runs some Javascript. It requires an external JS library to run but I don't want it to run on every page to save load times.
I know I can use MVC "Sections" to have blocks of code render within sections of a page by using the RenderSection function. However, I have a partial view that is part of many templates.
So the structure of my template system (and this is because this is an off the shelf product), that the View structure is as below.
Root.cshtml (is the main layout wrapper)
< Root.Head.cshtml > (Partial view contained within Root.cshtml that has the HTML Head markup)
THEN,
OneColumn.cshtml, TwoColumn.cshtml (Inherit Root.cshtml as their "master" template)
THEN
ProductTemplate1.cshtml,ProductTemplate1.cshtml,ProductTemplate1.cshtml,ProductTemplate1.cshtml (these inherit EITHER "OneColumn" or "TwoColumn" as their "master" template).
THEN each of those "Product" templates can have a partial view of "Calendar.cshtml".
The 'Calendar.cshtml' is the one that requires the external JS library to run some of its functions. I would like to have the external JS library only load if the Calendar.cshtml partial is included in a product template, BUT I want the library to not end up in the body of the HTML layout but instead, like any good formatted HTML, either in the HTML Head OR just before the closing tag of the HTML body.
Since the Calendar.cshtml file 'lives' in the Product template, the product template is actually already two levels deep in its inheritance of layouts.
My thought would be to put in the Calendar.cshtml file this code, BUT I don't know if it would load fast enough to allow the code that calls the external JS file to actually run.
Hence my question about the 'preload' property.
This is what I am thinking of putting in the 'calendar.cshtml' file.
function loadJQUERYUI(){
var importJQUERYUI= document.createElement('script');
importJQUERYUI.src = 'https://code.jquery.com/ui/1.13.0/jquery-ui.min.js';
importJQUERYUI.async = 'true';
importJQUERYUI.rel= 'preload';
document.head.appendChild(importJQUERYUI);
}
loadJQUERYUI();
<!--Code called in the Calendar.csthml partial-->
$('#datepicker').datepicker();
The thing is, would jQuery UI even load before the .datepicker() function fires?
I had looked at wrapping the $('#datepicker').datepicker(); call in a timeout so it gives the external script time to load, but I don't know how long an external responding server will take to respond to the request. That is super hacky, and don't really want to do that.
I tested it without a timeout and the $('#datepicker').datepicker(); function fired before the call to the jQuery UI library loaded. I tried it with a 1 second timeout and the datepicker loaded, but that is not ideal, because I don't know when the external library will respond in what timeframe.
If I were to use the MVC Razor "RenderSection", I have done it where it each section calls a sub section all the way down the line four levels deep, but since I have multiple templates that require this, isolating it so the Calendar.cshtml partial injects the external jQueryUI library is desired without having to next "RenderSections" all throughout my templates.
Is there another way?

How To Get Third Party Blazor Components Working In Razor Pages?

I'm working in a new ASP.NET Core 3.1 With Razor Pages application and I want to use third party Blazor components in it but I'm having trouble getting it to work. I've followed the instructions on numerous sites about how to enable Blazor components in an MVC based application using Razor pages (changing the Configure and ConfigureServices methods in startup.cs, adding the endpoint, including the .js for Blazor, etc.).
If I write a component myself and use that it seems to work just fine. But I tried using Syncfusion's Blazor library and it just refuses to work. I've tried things in the Razor page like
#(await Html.RenderComponentAsync<Syncfusion.EJ2.Blazor.Calendars.EjsDateTimePicker>(RenderMode.ServerPrerendered))
which works just fine for my manually created Blazor component but not the third party EjsDateTimePicker component. I've also made sure to include the #using references that are needed and VS finds everything, as well as including the JS references in my layout file.
I also tried including the third party component into my manually created component since Blazor allows for that and VS recognizes the component/tag but still refuses to render it. In that case, when I call my own component like
<CustomRazorTest>#(await Html.RenderComponentAsync<TestProj.Components.Pages.CustomRazorTest>(RenderMode.ServerPrerendered))</CustomRazorTest>
it loads everything except the third party component. I also tried the different rendering methods just in case that might fix it. But nothing seems to work.

I was able to get it working. There were several slight changes that had to be made to my project and some of them I'm not entirely sure why.
For anyone else who may be having issues, here's some of the issues I had to fix.
For whatever reason,
<script src="~/_framework/blazor.server.js" autostart="false"></script>
is NOT the same as
<script src="_framework/blazor.server.js" autostart="false"></script>
My project refused to work without the ~/ even though examples on MSFT's own pages don't use that.
After proper declaration of blazor.server.js, I needed the following code to get events working correctly or else things like button clicks wouldn't register. It must be placed AFTER the blazor.server.js above:
<script>
Blazor.start({
configureSignalR: function (builder) {
builder.withUrl('/_blazor');
}
});
</script>
I had some references to the MVC .js packages for Syncfusion because once I had an issue with the Blazor components I tried the MVC tools and I had left those references in. They were apparently causing a conflict and unexpected behavior.
I think there was one or two more things that also needed adjustment, but I am forgetting them right now. I will update my response if I remember anything else.

Manipulating a webpage by its source

I have googled this with a couple of differing terms and I could not find my solution. What I want to do is to manipulate a webpage by editing its source, for example removing a part from the code maybe a div or so. I know how to get the source of a webpage and know how to change the code but I have no idea how to manipulate the page instantly, by for example removing an element.
Your help would be appreciated!

If you want to manipulate client code (HTML) what you need is Ajax.
You can use JQuery javascript library to manipulate html of a page adding, editing and removing html tags, scripts, etc.
Here you can find a decent tutorial as a start point.
If you want to manipulate server code (C# codebehind) what you need is creating a web project in visual studio (ASP.NET Web Application)
EDIT: As commented by #CSharpened both solutions are not mutual exclusive. You can have an ASP.NET Web application that uses Ajax to manipulate UI. In fact lot of people does that.

I would consider using AJAX. You can use either javascript or jquery coupled with html, asp.net and C# to achieve the results you are after.
For simple editing like removing divs or collapsing menus etc simple Javascript or jquery will suffice. However changing the coding of the page requires you to use AJAX or similar.

Ajax Template Editor for Reports

I have been tasked to create a layout editor for my companies internal Reporting System. The Specifications they gave me indicate that templates must be able to be defined in .html files in a certain folder. These HTML files can have their own style etc. So it's a full HTML page with the html, head and body tag with content areas that are indicated with special a syntax.
Now what's been bothering me is that I have to load this page with it's styling etc. into a layout div (or IFrame maybe?) where I need to be able to work on it with Javascript (Using JQuery) to insert the controls to manage how the data is displayed.
I can't seem to find a way to do this. Any ideas as to how achieve this according to specifications? Any Help will be appreciated.

The only way to load the page with all referenced stylesheets applied appropriately, and avoiding javascript conflicts is to embed the html in an iframe.
This does however mean that your page will have to be served from the same domain as your application in order for you to be able to interact with the content in an easy way, but as long as this is so (possibly using your app as a proxy for the pages) there is cross browser support out there from jQuery * other javascript frameworks are available I'm sure.

.Net include page - like php require

Is there a c# command to include another web page - the equivelant of the php require?
I know how to do server side includes but was looking for something code based.
Thanks
Thanks for the answers all. I think I might need to explain further. I have several sub-pages that I will be loading during the use of the site using an xmlhttp request. Initially however, I need to load the starting sub-page before the user has interacted with the site. I could do this with js, but that would require more overhead in server calls from the client for the initial load. I already use master pages, but this is a little different. Since this is done serverside initally but must remain able to be refreshed clientside, I don't think I can make these pages into controls can I? I am pretty new to .Net so I may be making my life harder than I need to.

I think what you may be looking for are MasterPages and UserControls. A MasterPage allows you to define a basic template that is "filled in" by the implementing pages by having the implementing page add it's own content to the ContentPlaceHolders defined on the MasterPage. A UserControl is a re-usable piece of markup and associated code that you can reference from your mark up or add dynamically to the page being rendered in codebehind.

The way ASP.NET is structured, you shouldn't really need to do this. Code is compiled, so all of your classes and functions should be accessible simply by referencing the relevant assembly or namespace, without having to include individual code files.
You might be looking for user controls, which allow you to create fragments of markup with their corresponding code behind, and then reference these in your page.

With ASP.NET MVC it looks like this:
<% Html.RenderPartial("LogOnUserControl"); %>
This way you can put another UserControl on your page.

you can use include in asp.net like php include from below mentioned code
<!--#include file="include/leftmenuscript.inc"-->
You can also use a master page, as someone stated below, which flushes out your basic layout and lets you define content place holders, which other pages can implement and fill in the content. Master pages are a popular approach for defining page elements that are consistent across all pages, like your nav there (also things like headers, footers, common scripts, CSS, etc.).