2

I am currently working on a VS 2019 solution made of two projects: One is a class library containing a Javascript file, the other is a Blazor .Net Core project (client-side).

I am looking to reference the script in my class library to my blazor app in order to call its functions from the client-side.

I am aware I could simply add the file directly into the blazor project but I am looking for other ways to implement the Js file, specifically from a .Net class library.

5
  • The question is a little confusing. A class library, in .NET terms, is a DLL which has compiled code that is available for use by other .NET assemblies. A JavaScript file is a text file with code that needs to be parsed and interpreted by a JavaScript engine. Two separate ideas. You could, theoretically, embed the JavaScript file as a resource within a .NET DLL, load it in Blazor, then expose it to the browser for parsing and interpretation, but that's a lot of work and complication when you could just link to the file in your Blazor app... Commented Mar 3, 2020 at 13:51
  • I'm looking to make a project with my javascript file that a web app could reference like jquery or bootstrap. Commented Mar 3, 2020 at 14:00
  • 1
    Try creating a project using the template Razor Class Library in Visual Studio. It will create a sample project with an example of JavaScript interop using an included javascript file. Commented Jul 29, 2020 at 12:11
  • @hultqvist How is it misleading to describe the current state of Blazor? Or how JavaScript is interpreted by the browser? Also, the given answer is doing exactly what I described in my comment. Commented Jul 29, 2020 at 12:21
  • @HereticMonkey My bad, I was thining about static assets in razor components but I now see that was published after your initial comment. Commented Jul 29, 2020 at 12:51

1 Answer 1

3

The simplest way is to add the js file to the Blazor project like you said. For a slightly more maintanable solution, consider creating a Razor class library ("RCL") instead of a .Net class library, as it supports referencing static assets (see this article and more specifically here for instructions).

There is also the much more complicated way of "streaming" your js file from the resource file of your .Net Library. The advantage is that a normal .Net standard class library will do, and you don't need to reference the script with a script tag. You can implement this by referencing your js file as an embedded resource like this (in the .csproj of your .Net class library):

  <ItemGroup>
    <EmbeddedResource Include="wwwroot\script\MyJs.js" 
                      LogicalName="blazor:js:%(RecursiveDir)%(Filename)%(Extension)" />
  </ItemGroup>

and then invoke js with the contents of your file using eval:

// Get contents of resource
string scriptContent;
using (var stream = this.GetType().Assembly.GetManifestResourceStream("blazor:js:MyJs.js"))
{
  using (var sr = new StreamReader(stream))
  {
    scriptContent = await sr.ReadToEndAsync();
  }
}

JSRuntime.InvokeAsync<T>("eval", scriptContent)

Full-fledged example of the last strategy here (and here) (Disclaimer: I'm the maintainer).

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.