Apprenez à utiliser la syntaxe .Net MVC Razor dans les compétences Javascript files_javascript

Je pense que tout le monde a essayé d'imbriquer du javascript dans une vue. À l'heure actuelle, vous pouvez directement utiliser la syntaxe Razor pour appeler certaines méthodes .NET. Par exemple, le code suivant est imbriqué dans une Razor View :

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

Mais une autre situation est que si je souhaite utiliser Razor dans un fichier JS indépendant, alors la méthode ci-dessus n'est pas réalisable, car MVC n'interprétera pas directement le fichier JS et ne pourra être placé que dans la vue Razor. Mais ici je recommande une bibliothèque tierce qui permet d'utiliser Razor directement dans un fichier JS autonome

Le nom de ce type de bibliothèque est RazorJS. Il s'agit d'un projet open source. Vous pouvez télécharger le code source à l'adresse suivante :

.

https://bitbucket.org/djsolid/razorjs

Ou vous pouvez l'installer directement via Nuget :

PM> Install-Package RazorJS

OK, parlons d’abord de ce que cette bibliothèque de classe peut nous apporter. Après l'installation, vous pouvez utiliser toutes les méthodes prises en charge par .NET directement dans les fichiers JS. Par exemple, le code ci-dessus peut être directement placé dans un fichier JS distinct pour être utilisé. De plus, vous pouvez également référencer l'espace de noms complet de .NET dans le fichier JS. Si vous souhaitez appeler l'objet File pour lire le contenu du fichier texte, vous pouvez directement référencer l'espace de noms System.IO :

.

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

Après l'exécution, vous pouvez obtenir tout le contenu du fichier web.config directement dans JS. Ça a l'air plutôt bien, haha. Alors, comment fonctionnent exactement ces bibliothèques ? En fait, il utilise une bibliothèque de classes appelée RazorEngine pour obtenir les effets ci-dessus. RazorEngine est un moteur d'interprétation Razor très puissant et je l'ai déjà utilisé dans certains projets. Grâce à ce moteur, vous pouvez même utiliser la syntaxe Razor directement sous forme gagnante Haha, avez-vous déjà pensé à ses avantages ?

Eh bien, c'est bien. Avec ce moteur, vous pouvez utiliser Razor de MVC de manière totalement indépendante de l'environnement Web. Cette fonctionnalité vous permet de créer facilement des modèles flexibles, comme certains modèles d'e-mails. Utilisez diverses méthodes .NET ou même des objets personnalisés et générez dynamiquement ce que vous voulez. OK, mais ce moteur n'est pas ce que je veux présenter cette fois, j'en parle juste ici

.

Parlons ensuite de la façon d'utiliser RazorJS. Si vous l'installez directement via Nuget, il configurera automatiquement web.config pour vous. C'est la méthode d'installation recommandée, sinon vous devez l'ajouter vous-même à web.config. Il y a plusieurs endroits dans la configuration qui ne sont pas détaillés ici. Vous pouvez les comparer après les avoir installés. Utiliser RazorJS est également très simple, utilisez simplement la syntaxe suivante pour référencer le fichier JS souhaité :

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

Mais une chose à noter est que dans votre web.config il y aura un répertoire configuré pour permettre l'utilisation de RazorJS, ce qui signifie que vos fichiers JS doivent être placés dans ce répertoire avant de pouvoir être référencés en utilisant cette méthode :

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

La dernière chose dont je veux parler, ce sont ses limites. Bien sûr, il y a des avantages et des inconvénients. Puisqu'il utilise RazorEngine, vous ne pouvez pas utiliser les méthodes HTML Helper de MVC dans JS, c'est-à-dire toutes les méthodes commençant par @Html. Un autre problème est qu'il ne peut pas reconnaître le code du commentaire dans JS, c'est-à-dire que si vous utilisez des méthodes .NET dans les commentaires, il sera toujours exécuté si votre méthode est correcte, sinon l'exécution de. JS sera interrompu et une erreur sera signalée directement, alors ne pensez pas qu'il suffit de commenter les méthodes inutiles.

Concernant le problème de ne pas pouvoir exécuter l'assistant @Html, je propose ici une autre solution, mais cela peut modifier son code source. Les amis qui veulent jouer avec peuvent l'essayer. En fait, vous pouvez également utiliser de nombreuses méthodes personnalisées pour ce faire, ce qui est plus flexible et plus pratique. Après avoir téléchargé le code source de RazorJS, vous pouvez le modifier directement et recompiler une DLL. Une autre méthode consiste à traiter son code source comme un autre projet et à l'ajouter directement à votre propre projet.

Dans son code source, ouvrez le fichier HtmlTemplateBase.cs, vous pouvez ajouter vos propres méthodes ici, et les méthodes ajoutées ici peuvent être appelées directement dans JS. Par exemple, dans le code source, vous pouvez trouver une méthode Href encapsulée qui convertit l'URL en une URL disponible sur le client demandeur. Selon cette méthode d'écriture, nous pouvons ajouter nos propres méthodes. Par exemple, voici comment j'encapsule une méthode d'obtention dynamique de fichiers de ressources internationalisés, afin que les fichiers de ressources .NET puissent être utilisés directement dans JS pour l'internationalisation :

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

Ensuite, appelez-le directement en JS :

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

Après l'exécution, vous pouvez saisir directement le contenu de la clé CoderBlog dans JS