Teach you how to use the. Net MVC Razor Syntax _javascript techniques in Javascript files

Source: Internet
Author: User

I'm sure you've all tried nesting JavaScript in a View, and you can use the Razor syntax directly to invoke some of the. NET methods. The following code is nested in a Razor View:

<script>
 var currdate = ' @DateTime. Now ';//Direct call. net method
 
 Console.log (currdate)
</script>

But the other thing is, if I want to use Razor in a standalone JS file, the above method will not work, because MVC does not directly explain JS file, only put in Razor view. But here I recommend a third party class library, can let you directly in the independent JS file to use Razor


This class library name is called Razorjs, this is an open source project, can download the source code to the following address:

Https://bitbucket.org/djsolid/razorjs

Alternatively, it can be installed directly through the NuGet:

Pm> Install-package Razorjs

OK, let's talk about what this class library can bring for us. After installation you can directly in the JS file using all the. NET support methods, such as the above code can be directly placed into a stand-alone JS file to use. In addition you can refer to the full name space in the JS file, such as to invoke the file object to read the text file content, you can directly reference the System.IO namespace:

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

After running, you can get all the contents of Web.config file directly in JS. Looks quite good, hehe. So how does this kind of library work? In fact, it is using a class library called Razorengine to achieve the above effect. Razorengine is a Razor interpretation engine that is very powerful and I have used it in a number of projects before. With this engine, you can even use Razor syntax directly in win form, uh, do you ever think of the benefits?

Well, yes, with this engine, you can completely separate the Web environment from the MVC Razor, which allows you to easily develop flexible templates, such as email templates, where you can use a variety of. NET methods and even custom objects directly in the template, and then dynamically generate what you want. OK, but this engine is not what I'm going to introduce this time, just by the way.

Next to say a Razorjs use method, if you are directly through Nuget installation, then will automatically help you configure a good web.config, this is the recommended installation method, otherwise you will have to add your own Web.config configuration, there are several places, here also unknown said, Everyone installed after the comparison can be known. To use Razorjs is also very simple, just use the following syntax to refer to the JS file you want to:

<p>
 @Html. Razorjsinline ("~/scripts/example.js")
</p>

However, note that in your web.config there will be a section of the configuration allows Razorjs to use the directory, that is, your JS file must be placed in this directory before you can use this method to refer to:

<razorjssettings handlerpath= "~/razorjs.axd" >
 <allowedPaths>
 <add path= "~/scripts"/>
 </allowedPaths>
 </razorJSSettings>

The last thing to say is its limitations. There are good places of course also have the bad side, because it is using razorengine, so you can not use MVC in the HTML Helper method, that is, all @Html the beginning of the method. Another problem is that it doesn't recognize the annotation code in JS, that is, if you use the. NET method in the annotation will also execute, if your method is correct, no problem, otherwise will interrupt the implementation of JS direct error, so don't think useless method comment off on the OH.

As for the problem of not being able to execute @Html Helper, I offer another solution, but this can modify the source code, want to toss friends can try. In fact, this can also use a lot of custom methods, more flexible and convenient oh. After downloading the RAZORJS source code, you can directly modify the above and then recompile a DLL out, another way is to use its source code as another project, directly add to your own project.

In its source code, open HtmlTemplateBase.cs file, you can add your own method here, and then add the method here can be directly in JS call. As in the source code you can find an Href method that has been encapsulated to convert the URL to a URL that is available at the requesting client. According to this method, we can add our own methods, such as the following is my packaging a dynamic access to international resource files, so you can directly in JS using the. NET resource files for internationalization:

public class Htmltemplatebase:templatebase
 {
 //manually invoke 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);
 }
 
 The public string Getlangtext (string langkey)
 {
  Returns resources according to the key return associated language
  . GetString (Langkey);
 }
 
 Public Urlhelper Url {get; set;}
 }

Then in JS direct call can be:

var s = ' @GetLangText ("Coderblog") ';
Console.log (s);

After running, you can directly in the JS input coderblog the content of this key

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.