Bringen Sie Ihnen bei, wie Sie die .Net MVC Razor-Syntax in Javascript-Dateien verwenden_Javascript-Kenntnisse

Ich glaube, jeder hat versucht, Javascript in einer Ansicht zu verschachteln. Derzeit können Sie einige .NET-Methoden direkt mit der Razor-Syntax aufrufen. Beispielsweise ist der folgende Code in einer Razor-Ansicht verschachtelt:

<script>
 var currDate = '@DateTime.Now'; //直接调用.NET的方法
 
 console.log(currDate)
</script>

Eine andere Situation ist jedoch, dass die obige Methode nicht möglich ist, wenn ich Razor in einer unabhängigen JS-Datei verwenden möchte, da MVC die JS-Datei nicht direkt interpretiert und nur in der Razor-Ansicht platziert werden kann. Hier empfehle ich jedoch eine Bibliothek eines Drittanbieters, mit der Sie Razor direkt in einer eigenständigen JS-Datei verwenden können

Der Name dieser Art von Bibliothek ist RazorJS. Dies ist ein Open-Source-Projekt. Sie können den Quellcode unter der folgenden Adresse herunterladen

https://bitbucket.org/djsolid/razorjs

Oder Sie können es direkt über Nuget installieren:

PM> Install-Package RazorJS

Okay, lassen Sie uns zunächst darüber sprechen, was uns diese Klassenbibliothek bringen kann. Nach der Installation können Sie alle von .NET unterstützten Methoden direkt in JS-Dateien verwenden. Beispielsweise kann der obige Code zur Verwendung direkt in eine separate JS-Datei eingefügt werden. Darüber hinaus können Sie in der JS-Datei auch auf den vollständigen Namespace von .NET verweisen. Wenn Sie das File-Objekt aufrufen möchten, um den Inhalt der Textdatei zu lesen, können Sie direkt auf den System.IO-Namespace verweisen:

@using System.IO;
 
var s = 'Hello at @DateTime.Now \n @File.ReadAllText(System.Web.Hosting.HostingEnvironment.MapPath("~/web.config"))';

Nach der Ausführung können Sie den gesamten Inhalt der web.config-Datei direkt in JS abrufen. Es sieht ziemlich gut aus, haha. Wie genau funktionieren solche Bibliotheken? Tatsächlich wird eine Klassenbibliothek namens RazorEngine verwendet, um die oben genannten Effekte zu erzielen. RazorEngine ist eine sehr leistungsstarke Razor-Interpretations-Engine, die ich bereits in einigen Projekten verwendet habe. Mit dieser Engine können Sie die Razor-Syntax sogar direkt in Win-Form verwenden. Haben Sie jemals über die Vorteile nachgedacht?

Nun, das ist gut. Mit dieser Engine können Sie MVCs Razor völlig unabhängig von der Webumgebung verwenden. Mit dieser Funktion können Sie ganz einfach einige flexible Vorlagen erstellen, z. B. einige E-Mail-Vorlagen. Verwenden Sie verschiedene .NET-Methoden oder sogar benutzerdefinierte Objekte und generieren Sie dynamisch, was Sie wollen. OK, aber diese Engine ist nicht das, was ich dieses Mal vorstellen möchte. Ich spreche hier nur darüber

Lassen Sie uns als Nächstes darüber sprechen, wie Sie RazorJS verwenden. Wenn Sie es direkt über Nuget installieren, wird web.config automatisch für Sie konfiguriert. Andernfalls müssen Sie es selbst zu web.config hinzufügen. Es gibt mehrere Stellen in der Konfiguration, die hier nicht näher beschrieben werden. Sie können sie nach der Installation vergleichen. Die Verwendung von RazorJS ist ebenfalls sehr einfach. Verwenden Sie einfach die folgende Syntax, um auf die gewünschte JS-Datei zu verweisen:

<p>
 @Html.RazorJSInline("~/Scripts/Example.js")
</p>

Beachten Sie jedoch, dass in Ihrer web.config ein Verzeichnis konfiguriert ist, das die Verwendung von RazorJS ermöglicht. Das bedeutet, dass Ihre JS-Dateien in diesem Verzeichnis abgelegt werden müssen, bevor sie mit dieser Methode referenziert werden können:

<razorJSSettings handlerPath="~/razorjs.axd">
 <allowedPaths>
 <add path="~/Scripts" />
 </allowedPaths>
 </razorJSSettings>

Das Letzte, worüber ich sprechen möchte, sind seine Grenzen. Natürlich gibt es Vor- und Nachteile. Da RazorEngine verwendet wird, können Sie in JS nicht die HTML-Hilfsmethoden verwenden, d. h. alle Methoden, die mit @Html beginnen. Ein weiteres Problem besteht darin, dass der Kommentarcode in JS nicht erkannt wird. Das heißt, wenn Sie .NET-Methoden in Kommentaren verwenden, wird er trotzdem ausgeführt JS wird unterbrochen und ein Fehler wird direkt gemeldet. Denken Sie also nicht, dass das bloße Auskommentieren nutzloser Methoden ausreicht.

Bezüglich des Problems, dass der @Html-Helper nicht ausgeführt werden kann, stelle ich hier eine andere Lösung zur Verfügung, aber diese kann den Quellcode ändern. Freunde, die sich damit anlegen möchten, können es versuchen. Tatsächlich können Sie hierfür auch viele benutzerdefinierte Methoden verwenden, was flexibler und bequemer ist. Nachdem Sie den RazorJS-Quellcode heruntergeladen haben, können Sie ihn direkt ändern und eine DLL neu kompilieren. Eine andere Methode besteht darin, den Quellcode als ein anderes Projekt zu behandeln und ihn direkt Ihrem eigenen Projekt hinzuzufügen.

Öffnen Sie im Quellcode die Datei HtmlTemplateBase.cs. Sie können hier Ihre eigenen Methoden hinzufügen und die hier hinzugefügten Methoden können direkt in JS aufgerufen werden. Im Quellcode finden Sie beispielsweise eine gekapselte Href-Methode, die die URL in eine URL umwandelt, die auf dem anfordernden Client verfügbar ist. Gemäß dieser Schreibmethode können wir unsere eigenen Methoden hinzufügen. Im Folgenden kapsele ich beispielsweise eine Methode zum dynamischen Abrufen internationalisierter Ressourcendateien, sodass .NET-Ressourcendateien direkt in JS für die Internationalisierung verwendet werden können:

public class HtmlTemplateBase : TemplateBase
 {
 //手工调用资源文件管理器
 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)
 {
  根据key返回相关的语言
  return resources.GetString(langKey);
 }
 
 public UrlHelper Url { get; set; }
 }

Dann rufen Sie es einfach direkt in JS auf:

var s = '@GetLangText("CoderBlog")';
console.log(s);

Nach dem Ausführen können Sie den Inhalt des CoderBlog-Schlüssels direkt in JS eingeben