Ajar anda cara menggunakan sintaks .Net MVC Razor dalam kemahiran Javascript files_javascript

Saya percaya semua orang telah mencuba javascript bersarang dalam View Pada masa ini, anda boleh terus menggunakan sintaks Razor untuk memanggil beberapa kaedah .NET. Contohnya, kod berikut bersarang dalam Pandangan Cukur:

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

Tetapi situasi lain ialah jika saya ingin menggunakan Razor dalam fail JS bebas, maka kaedah di atas tidak boleh dilaksanakan, kerana MVC tidak akan mentafsir fail JS secara langsung dan hanya boleh diletakkan dalam paparan Razor. Tetapi di sini saya mengesyorkan perpustakaan pihak ketiga yang membolehkan anda menggunakan Razor secara langsung dalam fail JS yang berdiri sendiri

Nama perpustakaan jenis ini ialah RazorJS Ini adalah projek sumber terbuka Anda boleh memuat turun kod sumber di alamat berikut:

https://bitbucket.org/djsolid/razorjs

Atau anda boleh memasangnya terus melalui Nuget:

PM> Install-Package RazorJS

Baiklah, mari kita bincangkan tentang perkara yang boleh dibawa oleh perpustakaan kelas ini kepada kita. Selepas pemasangan, anda boleh menggunakan semua kaedah yang disokong .NET secara terus dalam fail JS Contohnya, kod di atas boleh terus dimasukkan ke dalam fail JS yang berasingan untuk digunakan. Selain itu, anda juga boleh merujuk ruang nama penuh .NET dalam fail JS Jika anda ingin memanggil objek Fail untuk membaca kandungan fail teks, anda boleh terus merujuk ruang nama System.IO:

.

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

Selepas berjalan, anda boleh mendapatkan semua kandungan dalam fail web.config terus dalam JS. Nampak cantik, haha. Jadi bagaimana sebenarnya perpustakaan tersebut berfungsi? Malah, ia menggunakan perpustakaan kelas yang dipanggil RazorEngine untuk mencapai kesan di atas. RazorEngine ialah enjin tafsiran Razor yang sangat berkuasa dan saya telah menggunakannya dalam beberapa projek sebelum ini. Melalui enjin ini, anda juga boleh menggunakan sintaks Razor secara langsung dalam bentuk menang Haha, pernahkah anda memikirkan kebaikannya?

Nah, itu bagus dengan enjin ini, anda boleh menggunakan Pisau Cukur MVC sepenuhnya bebas daripada persekitaran web. Ciri ini membolehkan anda membuat beberapa templat yang fleksibel, seperti beberapa templat e-mel. Gunakan pelbagai kaedah .NET atau objek tersuai dan jana secara dinamik perkara yang anda mahukan. OK, tetapi enjin ini bukan yang saya ingin perkenalkan kali ini saya hanya bercakap mengenainya di sini

Seterusnya, mari bercakap tentang cara menggunakan RazorJS Jika anda memasangnya terus melalui Nuget, ia akan mengkonfigurasi web.config untuk anda secara automatik Ini adalah kaedah pemasangan yang disyorkan, jika tidak, anda perlu menambahkannya sendiri ke web.config. Terdapat beberapa tempat dalam konfigurasi, yang tidak diperincikan di sini Anda boleh membandingkannya selepas anda memasangnya. Untuk menggunakan RazorJS juga sangat mudah, hanya gunakan sintaks berikut untuk merujuk fail JS yang anda mahu:

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

Tetapi satu perkara yang perlu diperhatikan ialah dalam web.config anda akan ada direktori yang dikonfigurasikan untuk membolehkan RazorJS digunakan, yang bermaksud bahawa fail JS anda mesti diletakkan dalam direktori ini sebelum ia boleh dirujuk menggunakan kaedah ini:

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

Perkara terakhir yang saya ingin bincangkan ialah batasannya. Sudah tentu terdapat kelebihan dan kekurangan Memandangkan ia menggunakan RazorEngine, anda tidak boleh menggunakan kaedah HTML Helper MVC dalam JS, iaitu semua kaedah bermula dengan @Html. Masalah lain ialah ia tidak dapat mengenali kod komen dalam JS Maksudnya, jika anda menggunakan kaedah .NET dalam ulasan, ia masih akan dilaksanakan Jika kaedah anda betul, tidak akan ada masalah JS akan terganggu dan ralat akan dilaporkan secara langsung, jadi jangan fikir bahawa hanya mengulas kaedah yang tidak berguna sudah memadai.

Mengenai masalah tidak dapat melaksanakan @Html helper, saya menyediakan penyelesaian lain di sini, tetapi ini boleh mengubah suai kod sumbernya. Rakan-rakan yang ingin mengacaukannya boleh mencubanya. Malah, anda juga boleh menggunakan banyak kaedah tersuai untuk melakukan ini, yang lebih fleksibel dan mudah. Selepas memuat turun kod sumber RazorJS, anda boleh mengubah suainya secara terus dan menyusun semula DLL Kaedah lain ialah menganggap kod sumbernya sebagai projek lain dan menambahkannya terus ke projek anda sendiri.

Dalam kod sumbernya, buka fail HtmlTemplateBase.cs, anda boleh menambah kaedah anda sendiri di sini dan kaedah yang ditambahkan di sini boleh dipanggil terus dalam JS. Sebagai contoh, dalam kod sumber anda boleh menemui kaedah Href terkapsul yang menukar URL kepada URL yang tersedia pada klien yang meminta. Mengikut kaedah penulisan ini, kita boleh menambah kaedah kita sendiri Sebagai contoh, berikut ialah cara saya merangkum kaedah mendapatkan fail sumber antarabangsa secara dinamik, supaya fail sumber .NET boleh digunakan terus dalam JS untuk pengantarabangsaan:

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

Kemudian hanya panggil terus dalam JS:

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

Selepas berjalan, anda boleh terus memasukkan kandungan kunci CoderBlog dalam JS