Javascript ファイルで .Net MVC Razor 構文を使用する方法を教える_JavaScript スキル

誰もがビューに JavaScript を入れ子にしてみたことがあると思います。現時点では、Razor 構文を直接使用して、いくつかの .NET メソッドを呼び出すことができます。たとえば、次のコードは Razor ビューにネストされています:

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

しかし、別の状況として、独立した JS ファイルで Razor を使用したい場合、MVC は JS ファイルを直接解釈せず、Razor ビューにのみ配置できるため、上記の方法は実行できません。ただし、ここではスタンドアロン JS ファイルで Razor を直接使用できるサードパーティ ライブラリをお勧めします

この種のライブラリの名前は RazorJS です。これはオープンソース プロジェクトであり、次のアドレスからソース コードをダウンロードできます。

https://bitbucket.org/djsolid/razorjs

または、Nuget を通じて直接インストールすることもできます:

PM> Install-Package RazorJS

OK、まずはこのクラス ライブラリが何をもたらすかについて話しましょう。インストール後、.NET でサポートされているすべてのメソッドを JS ファイルで直接使用できます。たとえば、上記のコードを別の JS ファイルに直接入れて使用できます。さらに、JS ファイルで .NET の完全な名前空間を参照することもできます。 File オブジェクトを呼び出してテキスト ファイルの内容を読み取る場合は、System.IO 名前空間を直接参照できます。

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

実行後、web.config ファイルのすべての内容を JS で直接取得できます。なかなかいい感じですね（笑）。では、そのようなライブラリはどのように機能するのでしょうか?実際、上記の効果を実現するために、RazorEngine と呼ばれるクラス ライブラリが使用されます。 RazorEngine は非常に強力な Razor 解釈エンジンであり、私は以前にいくつかのプロジェクトで使用したことがあります。このエンジンを使用すると、Razor 構文を Win フォームで直接使用することもできます。その利点について考えたことはありますか?

それは良いことです。このエンジンを使用すると、Web 環境から完全に独立して MVC の Razor を使用でき、一部のメール テンプレートなどの柔軟なテンプレートをテンプレート内に直接作成できます。さまざまな .NET メソッドやカスタム オブジェクトを使用して、必要なものを動的に生成します。さて、今回紹介したいのはこのエンジンではありません。

次に、RazorJS の使用方法について説明します。Nuget 経由で直接インストールすると、web.config が自動的に構成されます。それ以外の場合は、web.config に自分で追加する必要があります。構成にはいくつかの場所がありますが、ここでは詳しく説明しません。インストール後に比較できます。 RazorJS の使用も非常に簡単で、次の構文を使用して必要な JS ファイルを参照するだけです:

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

ただし、注意すべき点が 1 つあります。web.config には、RazorJS の使用を許可するように構成されたディレクトリがあることです。つまり、この方法を使用して JS ファイルを参照するには、その前に JS ファイルをこのディレクトリに配置する必要があります。 🎜>

最後に話したいのは、その限界についてです。もちろん良い点もありますが、悪い点もあります。 RazorEngine を使用しているため、JS では MVC の HTML ヘルパー メソッド、つまり @Html で始まるすべてのメソッドが使用できません。もう 1 つの問題は、JS 内のコメント コードを認識できないことです。つまり、コメント内で .NET メソッドを使用しても、メソッドが正しい場合は問題なく実行されます。 JS が中断され、直接エラーが報告されるため、無駄なメソッドをコメントアウトするだけで十分だとは考えないでください。

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

@Html ヘルパーを実行できない問題については、ここで別の解決策を提供しますが、これはソースコードを変更する可能性があるので、それをいじりたい友人は試してみてください。実際、これを行うために多くのカスタマイズされた方法を使用することもできます。これは、より柔軟で便利です。 RazorJS ソース コードをダウンロードした後、それを直接変更して DLL を再コンパイルすることもできます。もう 1 つの方法は、そのソース コードを別のプロジェクトとして扱い、自分のプロジェクトに直接追加することです。

ソース コードで HtmlTemplateBase.cs ファイルを開き、ここに独自のメソッドを追加すると、ここに追加されたメソッドを JS で直接呼び出すことができます。たとえば、ソース コードには、URL を要求側クライアントで使用可能な URL に変換する、カプセル化された Href メソッドが含まれています。この記述方法に従って、独自のメソッドを追加できます。たとえば、次のような方法で、国際化されたリソース ファイルを動的に取得するメソッドをカプセル化し、.NET リソース ファイルを国際化のために JS で直接使用できるようにします。

次に、JS で直接呼び出します:

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; }
 }

実行後、CoderBlog キーの内容を JS に直接入力できます