Use jquery together with ASP. NET MVC

Jquery is an easy-to-use JavaScript library that can be used by any web development platform. It is particularly eye-catching in combination with the ASP. net mvc framework. James Estes once published an article on infoq titled jquery, Which is winning the hearts of the people by version 1.2 and jquery UI. He talked about the latest release of jquery and introduced many outstanding features.

With the built-in scalability of ASP. net mvc, developers can use third-party libraries, such as jquery. When using ASP. NET webforms, it is difficult to use jquery instead of ASP. NET Ajax.

At the beginning of this article, ASP. net mvc version is preview 4, and some technologies used in preview 4 may not work properly in earlier versions. Preview 4 can be downloaded on codeplex.

　　Initial Configuration

I don't plan to write it into a complete jquery guide, just a few examples of using this JavaScript library with ASP. NET MVC. Chad Myers has a wonderful guide, including how to get started.

First, you must ensure that you have ASP. net mvc, So download and install it from codeplex (Note: You must run Visual Studio 2008 to use the ASP. net mvc Framework ).

After the ASP. net mvc framework is installed, a new ASP. net mvc web application project has been created.

Next, download jquery, download packed or minified, and put it in the content directory of the project above.

Add a reference to the jquery file in the content directory.

　　Simple Example

Ryan lanciaux wrote an excellent article titled jquery and ASP. net mvc frameworks, listing many key factors for using jquery in the ASP. net mvc framework. Ryan elaborated in the article:

First, create an ASP. net mvc (Preview 4) project, create a new view and a controller action under the Home controller, and then add the following lines to the view.

This is red text, this is blueand This is green

Right-click the controllers folder, select "Add new item", and select the MVC controller class. The task is completed. The next step is to create a controller action:

Next, we need to create a controller action, which can return the pigment value from the model. In addition, we do not want to overload pages, but we want to use Ajax. Fortunately, we can use the jsonresult type in the MVC Framework to accomplish this.

Public jsonresult rgbcolors ()
{

Colors. RGB color = new colors. RGB ();

Return JSON (color);} [SPAN]
 
Next, create a class to indicate the color in the model:

Namespace colors {

Public class RGB

{

Public String Red = "# ff0000 ″;

Public String Green = "#00ff00 ″;

Public String Blue = "# 0000ff ";

}}
 
The last step is to assemble everything together with some jquery code:

$ (Document). Ready (function ()
{

$. Getjson ("/home/rgbcolors ",

{},

Function (data ){

(().Red).css ("color", Data. Red );

(().Blue00000000.css ("color", Data. Blue );

(().Green).css ("color", Data. Green );

});});
 
Ryan pointed out an important point:

Note that the jquery code calls the JSON Method on our controller. If we reload the page, it will get the pigment value defined in the model. Completely painless. It is simple, but it can be used on the web.