How to use Jquery_jquery in MVC application

Preface: In the blink of an eye, it is already mid-November, and starting from today, I will continue to study the detailed usage of ASP.NET MVC, so I will write these reading notes and personal experiences into a blog so that everyone can learn something. , the book I read is: ASP.NET MVC Advanced Programming, below I will talk about how to use JavaScript and Jquery in MVC. There is also Ajax, which we often use now.

1. Preliminary introduction to Ajax

　(1) Almost all the web applications we create now use Ajax technology. Technically speaking, Ajax stands for Asynchronous JavaScript and XML (Ajax). In practical terms, it represents all the techniques used in building responsive web applications with a good user experience.

　(2) ASP.NET MVC4 is a modern Web framework, and like other modern Web frameworks, it supports Ajax technology from the beginning. The core of Ajax support comes from the open source JavaScript library Jquery.

　(3) If we want to use Ajax in MVC, we have to learn Jquery. Jquery is not the main focus of this blog, so if you haven’t learned it before, I suggest you start with the same initial study. My Jquery learning comes from " Sharp Jquery".

2. How to use Jquery in MVC application

　(1) When using the Visual Studio project template to create a new ASP.NET MVC project, it will generate all the content needed to use Jquery by default. Each new project will contain a Scripts folder with many .js file, you can create a new mvc project to take a look, as shown in the picture:

　

　(2) The JQuery core library is a file named Jquery-.js. Because I am using VS 2012, the Jquery version is 1.7.1. This file contains the JQuery source code. Annotated version. There is also a Jquery-.min.js file. Condensed JavaScript files contain ".min" in their names. As the name suggests, they take up less space than corresponding non-condensed files (usually smaller half). They contain no unnecessary whitespace characters, no comments, and all local variable names are one character long. If you open a minified file, you will see a bunch of unreadable JavaScript code. As shown in the picture:

　　

　(2) The behavior and functions of a condensed JavaScript script file on the client are the same as those of a non-condensed file. However, since the condensed file is smaller, it is usually possible to send the condensed file to the client as much as possible (because it It can reduce the number of data bytes downloaded, thereby speeding up loading and running).

(3) The default layout view (_Layout.cshtml) in ASP.NET MVC applications usually uses the following script tag to reference the simplified version of Jquery:

　

Note: If you want to use Jquery in MVC, you need to place the above script tag in the HTML tag through the layout view.

3. Place the script in the node

　(1) Another way to inject scripts into the output is to define a Razor section to prevent scripts. For example: in the layout view (_Layout.cshtml), you can render a node named Scripts and add it Set as optional. The code is as follows:

　

　

　

　

@RenderSection("scripts", required: false);

　

(2) Now we can add a script in any view that references the layout to inject a specific script into the head of the view: Index.cshtml

　@{

　　ViewBag.Title = "Homepage";

　}

　@section scripts{

　

　}

　(3) At this time, we press F5 to run the website and open the website homepage: http://localhost:34147/home/index. We can see that the jquery.validate.js file we added is displayed. It's at the bottom of the JS quote. As shown in the picture:

　

　(4) The method introduced above can set the exact position of the script tag to ensure that the required scripts appear in the appropriate order.

4. Other files in the Scripts directory

　(1) Let’s discuss that when we create an MVC application, the system has added a folder Scripts for us by default, which contains many JavaScript files. So what are these files used for? Let’s talk about it separately

　(2) In addition to the Jquery core library, the Scripts directory also contains two Jquery plug-ins: Jquery UI and Jquery validation. These extensions increase the capabilities of the Jquery core library.

(3) Some people may have also discovered that there are files containing "vsdoc" in their names in Scripts. These files are specifically designed to assist Visual Studio in providing better intelligent sensing function services. There is no need to directly reference these files in the program. files, there is no need to send them to the client, Visual Studio will automatically discover these files when using custom script files that are referenced in the script.

(4) The files in the directory containing the word "unobtrusive" in their names are written by Microsoft. These non-intrusive scripts integrate the Jquery and ASP.NET MVC frameworks, thus providing the non-intrusive JavaScript features mentioned above. , if you want to implement the Ajax features of the ASP.NET MVC framework, you need to use these files.

　(5) The directory also contains some files whose names start with the word Microsoft (like MicrosoftAjax.js), which either contain the Microsoft Ajax library or are built on top of the Microsoft Ajax library, as ASP.NET MVC3 applications The default dependency is on Jquery, so programs created under the ASP.NET MVC3 framework do not need these files, so they can be safely removed from the application. The reason why these files are included here is mainly for backward compatibility.

Okay, let’s stop here today. You already know how to use jQuery in MVC. Let’s discuss it in depth later