Develop Reference

Blazor Razor Class Library (RCL) No CSS Intellisense

I have a razor class library (RCL) that contains all the pages from my blazor application. The CSS intellisense does not seem to work within the RCL unless I change the RCL .csproj xml tag From Sdk="Microsoft.NET.Sdk.Razor" To Sdk="Microsoft.NET.Sdk.Web" .
Example: <p class="..(no intellisense is shown if used within an RCL)"
I am using VS2022 with the latest updates. Any information that can help resolve this issue, is appreciated.

I wrote an extension, that tackles this exact problem.
It should solve your problem, as it scans every project that exists in the solution, not just the ones of the type Microsoft.NET.Sdk.Web.
Furthermore, it also adds support for isolated CSS contexts (*.razor.css files), as well as external files, which are linked via the <link> attribute in an HTML file.
You can find more info about it in the GitHub repo.

It seems Blazor css intellisense is not that great. So my work around was to change the .csproj to Sdk="Microsoft.NET.Sdk.Web" reload the solution and then add a "Program.cs" class file to the root with one line of code.
It doesn't matter what that line of code does just add a line of code. In my project I added a variable like var workAround="empty"; to the program.cs file.
Now the css intellisense magically works. It doesn't work that great but it works. Microsoft needs to fix this.
Another thing to add is to close visual studio and delete the .vs folder. This is a hidden folder where you project resides.

Using #html.React() in a .cshtml razor view for a component that's inside an npm package

I have a .NET Core 3.1 ASP.Net project using razor views.
I'm using React components in those razor views by adding app.UseReact() to my startup.cs and then calling #html.React("myComponent") inside the .cshtml files. I'm not using React as an SPA.
This works fine when I have "myComponent" inside a .tsx file that's in the web project.
My company want to move some of these react components into npm packages so that they can be re-usable across projects. After moving the .tsx file for "myComponent" to an npm package, and referencing the package in package.json, upon running the project I get the error "myComponent" is not defined.
I've run a npm install and I can see that the package and the .tsx file for "myComponent" are in the node_modules folder of the project, but I'm guessing that asp.net mvc doesn't know to look in there for components when I'm calling #html.React("myComponent") inside the .cshtml file.
What do I need to do to make asp.net find the component? Do I need to explicitly import it somehow?
For now, I've managed to get by with a dirty hack. I'm using a pre-build script to copy the component's tsx file out of the node_modules folder and into the ClientApp folder, so that it sits along with the projects other react components. But it's not ideal because another developer may not realise that it's being copied there and try to edit it if they want to make changes, when really they should be editing the file in the npm package.

Direct Answer
Adding an npm package does not make it available to MVC automatically so you'll have to do some sort of file copy at some point in your development cycle. This can be a npm postinstall script or even something more complex such as a Grunt/Gulp task. You can even trigger the tasks via npm scripts if you choose to do so. All and all there's no "right" or "standard" way of doing react with MVC so you're free to make your own choices, carefully :)
if they want to make changes, when really they should be editing the file in the npm package.
Yes they will need to know about the npm package, clone its source git, update it, publish it, then update their project to the latest package version.
My Experience (read pain)
How can I forget this pain. It was a mistake to have React as a non-SPA because you're essentially making every main view an independent SPA and this has some major drawbacks. Firstly how do you share data between razor view and the component on the same page? The way we did it was to JSON stringify the data into a variable and then load this variable in the component (you can also opt-in for an additional http call to a web api endpoint). You can already see the start of fire as the pages evolve over time. Next problem we came across was bundling optimizations. We had to write a bunch of code in order to bundle per page and save outputs to the wwwroot folder. Developers coming on board often confused as to what this does in main razor views (e.g. Views/Home/Index.cshtml):
<script src="/Home.Index.min.js"></script>
Wait where is the /Home.Index.min.js file? This is created by the bundling task for this page at build time and copied to the scripts folder. Next question a developer would ask was why the page is missing its "user interface", of course they've forgotten to add an additional task for the new razor page they created (well and the script entry)... I can write for days on how terrible the idea of one bundle per razor page was and how messy the code became a few years into the maintenance cycle, not to mention the mysterious comeback of JQuery!!. The truth is that JS needs to be tree-shaken, minified and optimized. ASP.NET has no such a thing, the nuget packages simply glue your JS files and provide some level of minification, none of which can match standard bundlers such as webpack or parcel. This was another reason to have our bundling tasks run a bundler for each page. This also took care of the npm dependencies and third-party libraries.
My Recommendation (opinionated)
Save yourself and simply keep them separate. There's no such a thing as a razor page with react, that's a made up hack to make razor compatible with the evolved web technologies. Some of this applies to php so it's not just a Microsoft thing.
Best you can do is to create a SPA and use web api for back-end. You can have razor but they will be independent pages, for example the login page can be a razor page which then takes you to the home page that's a SPA written and bundled via react and the surrounding ecosystem. Interactions in the SPA happen over REST or even GraphQL apis.

Writing chrome extension in C#?

Today I started looking at the Chrome extensions the first time ever, I have a very silly questions, I am sure the answer is NO to this as per google search but I just wanted to make sure from the community here.
Is it possible to use C# to write code instead of javascript?
Is it possible to use Partial Views (ASP.NET MVC) in chrome extension as it renders HTML?
I found this in VS Marketplace
https://marketplace.visualstudio.com/items?itemName=MadsKristensen.GoogleChromeExtensionProjectTemplate Is there any other templates which have bootstrap etc
Cheers

You can create browser extension with C#.
Specifically, Using Client-side Blazor.
To publish, the following operations are required.
First, you publish like normal standalone app.
https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/blazor/webassembly?view=aspnetcore-3.1#standalone-deployment
Then, Remove the underscore from directory name. Since it cannot be used in the extension.
# remove underbar from directory name
mv _framework/_bin _framework/bin
mv _framework framework
# rewrite
sed 's/_bin/bin/g' framework/blazor.webassembly.js
sed 's/_framework/framework/g' framework/blazor.webassembly.js index.html
Then, Add manifest.json and setting CSP like this,
"content_security_policy": "script-src 'self' 'unsafe-eval' 'sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA='; object-src 'self'",
Blazor boot script add script tag to html, so you should add scripts hash to allow execute bootup script.
This is sample app I created.
https://github.com/key-moon/WeatherForecastExtensionWithBlazor
And, This is commentary (wrote in Japanese).
https://qiita.com/keymoon/items/03357e58eddf75871527

You can definitely create a Chrome Extension (fairly) easily using C# now with the help of Blazor WebAssembly.
If you are still interested in trying out or if anyone else is interested, I have created a package in the repository Blazor.BrowserExtension. Just follow the steps in the link to create the project.
With this package, you get the things that you need in an extension. Currently it supports Background, Popup (Browser Action), Options page and even Content Scripts (extra setup required). Just build the project and then you can load the unpacked extension from the output of the build.
Chrome Extensions API are accessible in Razor pages or from dependency injection. The APIs are imported from another package WebExtension.Net.

Yes you can write Chrome extension in C#, and it's easy.
I tried the below. It was fast and works right away:
Run dotnet new --install Blazor.BrowserExtension.Template.
Run dotnet new browserext --name to initialize a new project with the template.
Change the working directory into the newly created project directory.
Run dotnet build to build the project.
On Google Chrome:
Launch the Extensions page ( ⋮ → More tools → Extensions).
Switch on Developer mode.
Click on the Load unpacked button, then navigate to %ProjectDir%\bin\Debug\net5.0\ and select the foler browserextension.
Source: https://github.com/mingyaulee/Blazor.BrowserExtension
Thank you very much to "mingyaulee" for such an awesome work and sharing it.

UPDATES:
You can use C# based https://github.com/mingyaulee/Blazor.BrowserExtension project and build your chrome extension distributable.
ORIGINAL ANSWER:
Chrome Extension runs in the browser so you can not use C# in Chrome Extension Development.
Again the Chrome extension runs in the browser so you can not use ASP.NET MVC in Chrome Extension Development, but you can use ASP.NET MVC or any other language at server to generate the views and render them in the chrome extension using ajax.
Have a look at this: https://github.com/Ehesp/Chrome-Extension-Twitter-Bootstrap-3-Template

Technically, you can use a C# binary as a Native Host that talks to the JavaScript portion in the browser.
However, that would complicate your extension distribution, as you can't bundle the two to CWS; the native host component has to be separately installed.
This should only be used when you have legitimate reason to do something that's impossible within the browser sandbox.

Using Blazor and write it as normal html/css maybe? You still need to build blazor project though but I think it count as technically possible to write extension in C#

Aurelia MVC Set up having issues with 404 not found

I started using aurelia framework with Vs2015 and MVC.
Below is my implementation process
Created new project with MVC in VS 2015.
Copied all files except wwwroot inside skelton-es2016-asp.net5 from aurelia-skelton project from github.
Later added all bootstarp and jquery plugin inside script and added in bundleconfig.cs
Open command prompt from folder and jspm install,
Then jspm install aurelia-framework,
Then jspm install aurelia-bootstrapper
Finally attached to IIS and browse.
But I am getting 404 not found with core-js#1.2.6 js. Below is my screen.
Also below is my VS structure

Make sure you have installed core-js through JSPM. Add the dependency to your package.json.
package.json
"jspm": {
"dependencies": {
"core-js": "npm:core-js#1.2.6"
}
}
Then type jspm install in the command line.

Jquery.min.map File 404 in MVC4 Application

I have IIS 6.2 running a C# MVC4 application and I keep getting a jquery.min.map 404 error in Google Chrome. I do not get the same error in IE9. I have the uncompressed jquery file along with the minified one and the map all in my scripts directory controlled by a NuGet package. Is there something specific with Chrome that could be causing this or is there something else I can look into? It looks like all my references are correct (I'm including it in the Bundler, etc.)
Thanks!

I had the same problem today. The .map file wasn't being published. The solution was to right click on the .map file in Visual Studio and select properties. Note that the Build Action is None. Change None to Content and the .map file will be included when you publish.

You need to run Re-minify AA CSS/JS/HTML Files in Web Essentials.
Download here.