I believe everyone has tried to use javascript in a View, and you can directly use Razor syntax to call some methods of .NET. As the following code is nested in a Razor View:
<script> var currDate = '@DateTime.Now'; //Directly call the .NET method console.log(currDate)</script>
But another situation is that if I want to use Razor in a separate JS file, the above method will not work, because MVC will not directly interpret the JS file, and it can only be put into the Razor view. However, here I recommend a third-party library to you, which allows you to use Razor directly in independent JS files
The name of this library is RazorJS. This is an open source project. You can download the source code from the following address:
https://bitbucket.org/djsolid/razorjs
Or you can install it directly through Nuget:
PM> Install-Package RazorJS
OK, let’s talk about what this library can bring to us first. After installation, you can directly use all .NET supported methods in the JS file. For example, the above code can be directly placed in an independent JS file for use. In addition, you can also refer to the full namespace of .NET in the JS file. If you want to call the File object to read the content of the text file, you can directly refer to the System.IO namespace:
@using System.IO; var s = 'Hello at @DateTime.Now /n @File.ReadAllText(System.Web.Hosting.HostingEnvironment.MapPath("~/web.config")))';After running, you can directly get all the contents in the web.config file in JS. It looks pretty good, haha. So how exactly does this type of library work? In fact, it uses a class library called RazorEngine to achieve the above effects. RazorEngine is a Razor explanation engine that is very powerful and I have used it in some projects before. Through this engine, you can even use Razor syntax directly in win form. Haha, I wonder if you have any idea of its benefits?
Well, good, with this engine, you can use MVC's Razor in a completely independent web environment. This function allows you to make some flexible templates very conveniently, such as some email templates. You can directly use various .NET methods or even custom objects in the template, and then dynamically generate the desired content. OK, but this engine is not what I want to introduce this time, I'm just talking about it here
Next, let’s talk about the usage of RazorJS. If you install it directly through Nuget, you will automatically configure web.config for you. This is the recommended installation method. Otherwise, you have to add the configuration in web.config yourself. There are several places, and I won’t go into details here. You can compare it after installing it. It's also very simple to use RazorJS, just refer to the JS file you want using the following syntax:
<p> @Html.RazorJSInline("~/Scripts/Example.js")</p>However, one thing to note is that there will be a directory in your web.config that allows RazorJS to use, that is, your JS file must be placed in this directory before you can use this method to reference:
<razorJSSettings handlerPath="~/razorjs.axd"> <allowedPaths> <add path="~/Scripts" /> </allowedPaths> </razorJSSettings>
The last thing I want to talk about is its limitations. There are good things and bad sides. Since it uses RazorEngine, you cannot use the HTML Helper method of MVC in JS, that is, all methods starting with @Html. Another problem is that it cannot recognize the comment code in JS. That is, if you use .NET methods in the comments, it will also be executed. If your method is correct, there will be no problem. Otherwise, the execution of JS will be interrupted and an error will be reported directly. So don't think that the useless method is enough to comment out.
Regarding the problem of not being able to execute @Html helper, I provide another solution here, but this allows you to modify its source code. Friends who want to toss can try it. In fact, you can use many custom methods to do this, which is more flexible and convenient. After downloading the RazorJS source code, you can directly modify it on it and recompile a DLL. Another way is to use its source code as another project and directly add it to your own project.
In its source code, open the HtmlTemplateBase.cs file, and you can add your own methods here, and then all the methods added here can be called directly in JS. If you can find an encapsulated Href method in the source code, you can convert the URL to a URL that is available on the requesting client. According to this writing method, we can add our own methods, such as the following is my method to encapsulate a dynamically obtain international resource files, so that we can directly use .NET resource files in JS for internationalization:
public class HtmlTemplateBase : TemplateBase { //Manually call the resource file manager private static ResourceManager resources = (ResourceManager)System.Type.GetType ("RazorJS.Resource").GetProperty("ResourceManager").GetValue(null, null); public HtmlTemplateBase() { Url = new UrlHelper(HttpContext.Current.Request.RequestContext); } public string Href(string originalUrl) { return Extensions.ResolveUrl(originalUrl); } public string GetLangText(string langKey) { Return related language based on key return resources.GetString(langKey); } public UrlHelper Url { get; set; } }Then call it directly in JS:
var s = '@GetLangText("CoderBlog")';console.log(s);After running, you can directly enter the content of the CoderBlog key in JS.