Efficient management of ASP. NET JavaScript Libraries

Introduction
For ASP. NET developers, the JavaScript in the management project is very casual:

I think this is probably because there is no way on the Internet to properly handle the reliable JavaScript Information in ASP. NET. This article aims to provide an optimal solution for managing JavaScript in ASP. NET. This solution can solve the following problems:

Inline JS: directly placing JS on the page will cause the page to become bloated.
JS publishing: JS files are often forgotten.
Error reference: JS references in other Web programs often fail.
Dependency: You need to remember the complex dependencies in the JS file.
Invalid reference: JS referenced on the page has never been used.
HTTP/HTTPS: Reference http js across HTTPS pages.
Refactoring: refactoring a new version takes a lot of time.
Redundancy: multiple references to a uniform JS file.
Prerequisites
Make sure that Visual Studio 2010 is installed. Express may not support some concepts involved in this article.

Overview
Most of the above problems are caused by direct reference of JS or JS files to the ASPX page. The solution to almost all of the above problems is to use the built-in functions of ASP. NET to embed JS files into a DLL and then dynamically reference these files. This article will demonstrate these features and some tips to make full use of them. Next, we will gradually introduce how to implement it.

Start
Step 1: Start Visual Studio 2010 and create an empty Web program named ParchmentPurveyor.

Next, add a form: Default. aspx and some simple HTML code. It is roughly as follows:

<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "Default. aspx. cs" Inherits = "ParchmentPurveyor. Default" %>

Add JS
Unlike adding JS files to a site, we create a new project to include all of our JS files. Add a new class library project JavaScriptLibrary to the solution:

After adding a project, delete the Class1.cs file, right-click the project, select Add folder, name it JavaScript, and add two JS files in the folder, ShowMessage. js and GreetUser. js. Next, add a class JavaScriptHelper to the project (do not place it in the JavaScript directory). The solution directory structure is as follows:

Next, compile JS and add the following code in ShowMessage. js:

Function ShowMessage (msg) {alert ("Message From Website:" + msg );}
Add the following code to the GreetUser. js file:

Function GreetUser () {ShowMessage ("Greetings and Salutations! ");}
Note that GreetUser () depends on ShowMessage ().

Embed JS files
We are more willing to embed JS files into the DLL than to publish them to the site. In this way, if the DLL is released to the site, all JS files will be automatically released. To do this, right-click the JS file, open the property page, and select "embedded resource" for "generate operation", as shown below:

After determining that JS files are embedded in DLL, You need to enable them to be accessed by Web users. Therefore, you need to add a reference to System. Web for the project JavaScriptLibrary:

Edit JavaScriptHelper. cs and add the following code:

Using System. web. UI; [assembly: WebResource ("JavaScriptLibrary. javaScript. showMessage. js "," application/x-javascript ")] [assembly: WebResource (" JavaScriptLibrary. javaScript. greetUser. js "," application/x-javascript ")]
In this way, Web users can access embedded JS files through the client.

Reference embedded JS files
Now you have embedded JS files and can access them through the client computer. When using them, you must reference them on the page. Therefore, you need to modify the JavaScriptHelper class as follows:

Using System; using System. web. UI; [assembly: WebResource ("JavaScriptLibrary. javaScript. showMessage. js "," application/x-javascript ")] [assembly: WebResource (" JavaScriptLibrary. javaScript. greetUser. js "," application/x-javascript ")] namespace JavaScriptLibrary {// <summary> // The Help page references the embedded JS file /// </summary> public class JavaScriptHelper {# region static field private const string NAME_SHOW_MESSAGE = "JavaScriptLibrary. javaScript. showMessage. js "; private const string NAME_GREET_USER =" JavaScriptLibrary. javaScript. greetUser. js "; # endregion # region Public method // <summary> // reference ShowMessage on the page. js file // </summary> /// <param name = "manager"> Use Page. clientScript access </param> public static void Include_ShowMessage (ClientScriptManager manager) {IncludeJavaScript (manager, NAME_SHOW_MESSAGE);} // <summary> // reference GreetUser on the page. js file (including all dependent files) /// </summary> /// <param name = "manager"> by Page. clientScript access </param> public static void Include_GreetUser (ClientScriptManager manager) {// dependency (ShowMessage. js ). include_ShowMessage (manager); // reference GreetUser. js. includeJavaScript (manager, NAME_GREET_USER );} # endregion # region private method // <summary> // reference the specified embedded js file on the page /// </summary> // <param name = "manager "> by Page. clientScript access </param> /// <param name = "resourceName"> indicates the name of an embedded JS file </param> private static void IncludeJavaScript (ClientScriptManager manager, string resourceName) {var type = typeof (JavaScriptLibrary. javaScriptHelper); manager. registerClientScriptResource (type, resourceName) ;}# endregion }}
IncludeJavaScript () is the key. It calls RegisterClientScriptResource () to ensure that a script tag is obtained for the embedded JS file. Include_GreetUser () calls IncludeJavaScript () and Include_ShowMessage () (used to process dependencies ). Therefore, ShowMessage () is also referenced on any page when GreetUser () is referenced ().

Now we have available classes. Next, let's try it on the Default. aspx page. First, add a reference to JavaScriptLibrary in the site ParchmentPurveyor:

Next, we need to modify the background code that references the JS page.

Using System; using System. Web. UI; namespace ParchmentPurveyor {& n