Where do I put the blazor.server.js script tag in a RazorPages app? - asp.net-core

Right now I have it at the bottom of the _Layout.cshtml layout page that is used by every other page. The problem I'm having is that pages under the Identity area throw errors in the console when navigating to Identity pages:
POST https://localhost:5001/Identity/Account/_blazor/negotiate 404
and
blazor.server.js:1 Uncaught (in promise) Error: Cannot send data if the connection is not in the 'Connected' State.
These errors make me think I'm doing something wrong with how I enable Blazor Server in my RazorPages app.
So I'm wondering, should I only have the blazor.server.js scripts on pages that are actually using Blazor? Is there a way to make it available to Areas that putting it in the Layout seems to not do?

I believe this post answers my question:
How do I use blazor server-side inside a razor component library using areas?
By default, the SignalR service uses a relative path and was unable to find the _blazor/negotiate endpoint within an Area. The suggested code change in _Layout will make it use absolute paths and normalize to /_blazor/negotiate wherever you are in the page structure.

I know this is late but incase it help others.
I got this error when I was trying to add blazor to my existing app.
I added:
<base href="~/" />
at the end of the head tag of the _layout.cshtml file found in the shared folder.
enter image description here

Related

How to call a razor page from a Blazor component in a Server Side Blazor Application without causing a page refresh

I am developing a Blazor Server Side Application which I need to include cookie authentication. We created a custom login page component, but in order to create a cookie I need to call a Razor page to create the cookie.
Is there a way to call the razor page without doing a page refresh.
I tried using the UriHelper.NavigateTo but does not work with non Blazor component routes.
Then I tried with a Javascript call to do a window.location, but the issue is that this causes a browser refresh that makes all my instances to be recreated (like AppState, HttpClient), so all the information in these instances are lost (like httpclient headers, etc).
I expect to call the razor page to create a cookie, in a way that the httpclient and appstate scoped instance keep their values.
We tried the Identity scaffolding but it has a bug in the latest Preview 8
I've seen that bug, easily corrected. You can scaffold now. And otherwise,
the only problem that we have is that we could not find a way to customize the bland Login and Register pages.
maybe you could live with those 'bland pages' until the release, end of September?
The steps, based on a Preview8 server-side project with "Individual user accounts"
NB: it is a good idea to Commit-changes in Git before and after this
temporarily disable this line in Startup: // endpoints.MapBlazorHub<App>(selector: "app");
run the scaffolding wizzard, add any pages you want
uncomment the endpoints.MapBlazorHub() line again
remove Pages/_ViewStart.cshtml
fix Pages/Shared/_Layout.cshtml, the first line is missing an #using
fix Pages/Shared/_Loginpartial.cshtml, the second line is missing #inject
Compile and Run

Blazor server-side app throws error: The SPA default page middleware could not return the default page '/index.html'

I found a client-side Blazor app that implements Identity here.
It works correctly, but when I turn it to server-side Blazor it throws an error:
"Exception thrown: 'System.InvalidOperationException' in System.Private.CoreLib.dll ("The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request.")
on CsrfTokenCookieMiddleware line 28.
I really don't know what the problem could be. I guessed the error occurs because when using server-side Blazor, more logic is handed over to the Server project instead of the Client project, and the server doesn't contain a wwwroot. Therefore I created a symlink from the wwwroot of the Server project to the wwwroot of the Client project. But that also didn't work.
Can anybody help me with this issue? I am completely stuck. The creator also doesn't know what the problem is.
When you do server-side rendering with blazor, that don't use the blazor.webassembly.js for bootstrap the app, instead it uses blazor.server.js.
in your index.html file which resides in wwwroot file says as below,
<script src="_framework/blazor.webassembly.js"></script>
I checked the given GitHub repo and found the above script tag.
Make it to the shown as below and try,
<script src="_framework/blazor.server.js"></script>
The server-side rendering of the blazor does not run in the web assembly it runs in the asp.net core host and makes the communication with UI thread with signal R. This is the major difference between server-side rendering and client-side rendering of blazor.

Aurelia with out a router, navigate to login.html and not /#login

I'm writing custom views for Identity Server 3 for its login, logout, consent, etc. I want to use Aurelia but in Identity server I have to pass in the actual html file. So, how can I navigate to localhost:9000/login.html and not localhost:9000/#login
Thanks
if you want to remove the # from URLs in an aurelia application:
Configuring PushState
Remember that Aurelia is "just JavaScript," so when you want to link to another page on your site, you'll do it the same way you always would, by giving either an absolute or relative path to the file. You're not going to be able to link to an HTML file that is in your bundle though, the file will have to be unbundled, like index.html is.
At this point, this becomes just a standard JavaScript question about building a URL, and not anything to do with Aurelia. So just have the url point to wherever login.html is. I'm hoping this is enough for the answer, if not we can discuss it further.
With #Ashley Grant's help, I was able to create an aurelia replacement for IViewService example coded in angular. Identity Server 3 IView Service Example
It's honestly quite easy. Just create a standard aurelia project and put your html in app.html and view model in app.js. In addition to having the vendor_bundle reference link in your Index.html you will also have to create a link for the app_bundle as well because of a bug that tries to locate app_bundle in the root of your folder structure for Identity Server.
If anyone is interested in the source I can put something together just IM me.

Seeing bundle files path in login url and redirecting multiple times

I'm using mvc4 and .Net 4.5 in my project with SSL. Now, on localhost and even on server, the login page gets redirect a bunch of times and then loads without and css on page. In browser debugger I get error as:
Uncaught SyntaxError: Unexpected token <http://localhost:55248/Account/Login? ReturnUrl=%2fbundles%2fjqueryval%3fv%3dWrBNyT_GYLXAZ7iWD7vDdFccq24m7v_9MPi3rcQ8FO01&v=WrBNyT_GYLXAZ7iWD7vDdFccq24m7v_9MPi3rcQ8FO01...
I'm using bundling and code snippet as below.
bundles.Add(new ScriptBundle("~/bundles/BaseJs")
.Include("~/Scripts/jquery-{version}.js")
.Include("~/Scripts/jqueryui/jquery-ui.js")
.Include("~/Scripts/bootstrap.js"));
The syntax error is from the error page being loaded as JavaScript (when it's obviously not JavaScript). It's a red herring. The true problem is that your JavaScript file is needing authorization in the first place.
Typically, this wouldn't be an issue. By default, anything with an extension (.js, for example) is ignored by MVC and handled directly by IIS. Worst case scenario, there, IIS doesn't have permission to read the file, and you end up with a 403 Forbidden. It would end there, as an IIS-level 403 would not trigger a login page redirect, mostly because, again, MVC is not involved.
However, if you've bungled around the with default setup, such that MVC is now handling all requests, even for static files. Then, the action that's being triggered to handle the request to your JavaScript file is requiring authorization, and therefore is redirecting to the login page. So find out what action is being hit and either remove the requirement for it to be authorized or have the right action serve the file. Or, ideally, leave things as they should be and let IIS do what IIS does best and serve the static files.
EDIT
I wasn't paying attention to the fact that bundles are rendered without a file extension. However, the steps to correct the issue are largely the same. Something is mostly likely off with your routing, and the request for the bundle is actually being caught by one of your actions, particularly one that requires authorization. Look out for catch-all routes and make sure that you're not using a route like "bundles" anywhere in your RouteConfig.cs or any of your Route attributes, if you're using attribute routing.
First try to include your bundles like that :
.Include( "~/Scripts/jquery-{version}.js",
"~/Scripts/jqueryui/jquery-ui.js",
"~/Scripts/bootstrap.js"
);
Include takes string[] as parameter and you don't need to call include for each row. Then you should debug your bundles to see which js is giving the error.
Try to comment out rows 1 by 1 to see what would be the result. The problem is definatelly in your bundles, I also had these kind of errors. If you can provide more code - > snippet from the view, of the css loading and bundles and stuff like that I would be able to help you more.

Web API Routing - Returning 404

I have a Web API project in MVC 4 but cannot find the URL to my web service. Rather than MVC, I am actually just using the C (controller) as I'm not returning a view and my model is located in an external project.
I'm using the default route, which is api/{controller}/{id}. The name of my controller is RESTController (I know, probably wasn't the best name) and is located at ~/Controllers/RESTController.cs
Based on naming convention, it seems that my web service should be located at localhost:port/api/REST but I'm just getting a 404 resource cannot be found error (no XML representation of the object returned or anything). Is this the expected behavior without a view?
The funny thing is that I also have a SOAP API in an external project that is actually just returning the REST API result and it works as it should. Doing unit tests on my methods passes... I just can't access it from a browser. I've tried every url imaginable.
Basically...
Would there a way to debug this? (ie. Turning on ASP.NET directory listing)
Does not having a view effect what is shown in the browser?
Shouldn't the browser return an XML file representing the object?
Am I missing something obvious?
Nevermind, I'm a moron. I found the problem... At some point I accidentally drag and dropped (drug and dropped past tense?) my Global.asax file into my Views folder... therefore my routes were not getting registered.
Working as intended now.