ASP. net mvc and jquery Series 1: getting started

I am a beginner in ASP. net mvc. I have read several articles in ASP. NET MVC and jquery series.ArticleI feel good. I 'd like to share it with you. If you have any translation problems, please point it out. Thank you.

Connection: http://www.codeproject.com/Articles/74338/ASP-NET-MVC-and-jQuery-Part-1-Getting-Started.aspx

----------------------------------- Body split line ------------------------------------

This is the first article in the ASP. net mvc and jquery series in Visual Studio 2010.

If you have experience developing web in ASP. NET and JavaScript. You may have heard of them (ASP. net mvc and jquery), and you may be interested in combining these two technologies.

It will not be very difficult to get started. I will not describe difficult content in this article. First, let's figure out two things, and then let's get started.

What is the ASP. net mvc framework?

Model-View-controller (MVC for short) is a design pattern that helps us organizeCodeIn this way, we can clearly separate data, Behavior & business logic and interfaces. These components are called models, controllers, and views respectively.

The MVC Framework of ASP. net mvc provides Supported tools, constraints, and classes for us to use this design pattern, rather than the default page-controller of ASP. NET.

What is jquery?

We can use JavaScript to access every element of an HTML document. With JavaScript, you can manipulate Dom, write scripts to implement webpage animation, perform Ajax requests, and perform some verification.

The code you have written is generally saved (you do not need to write it later ). When you want a new feature, you may need to make a lot of modifications. It will also be accompanied by performance issues, browser compatibility issues, and even cross-platform issues.

Jquery is a javascript code base. It has helped you complete many things you want to do. For example, it is compatible with different browsers. It has many pre-built components, and each version of it has good performance.

You can think of jquery as an action to execute a group of objects, or even an object in this group of objects. You need to first find this set of objects and then execute some of their actions. This set of objects may be DOM elements, such as Div, images, form, forms, or document elements.

Basic Steps

1. Create an ASP. net mvc 2 Web Application

2. Add jquery reference to site. Master to make jquery available on all pages.

3. Use if (false) to make the smart prompt function available in the view area

4. reference scripts to make smart prompts available in the J independent avascript File

Meaty version

Start Visual Studio 2010 to create a new project. Navigate to Web Classification and select ASP. net mvc 2 web application. Modify the name of your project (changed to spike. jquerymvc) and click OK.

Visual Studio prompts you whether to create a test project. Now we choose no. This completes the wizard for creating the MVC project.

In Solution ExplorerViews-> sharedOpen the site. master file. Expand the scripts folder and you will see the scripts added by default by Visual Studio.

In the head mark of site. Master, drag the jquery 'Min' file. The following is the jquery 'vsdoc' file. Place your vsdoc file in the middle of the IF (false) statement. Vsdoc will never be loaded into the browser (because false is never true), but Visual Studio will load this file. This technique enables intelligent sensing.

We set this to use the great smart sensing functions of jquery and Visual Studio 2010.

Now, navigate to the index. ASPX page in views> Home to open it. Add the following code after the P end tag:

<Script language ="Javascript"Type ="Text/JavaScript"> $ (Function() {$ ("P"). Click (Function() {$ (This). Slideup () ;}) </SCRIPT>
 

You will find that when you are entering visual Studio, the text of the jquery function that you described will spring up.

Press F5 to run the applicationProgram. You will be prompted to modify the Web. config file and click OK.

The browser is opened and a slightly modified default MVC web page is opened. Click the "to learn more about ASP. net mvc" string and observe what jquery has executed.

FTW? How does this work?

The following are the basics:

1. The script mark is added to the file.

2. We use the jquery shortcut to run this function after the document is loaded.

3. After loading, find all P elements in the Dom and create a task for them to process user clicks. This is done by anonymous functions.

4. Inside the click event handler, we use jquery's $ (this) to select the P element clicked by the user and tell it that the animation effect is used.

The first shortcut is basically an event handler-in this case, when the file is loaded, an anonymous function is executed. You should use it on every page, because jquery cannot find elements that have not been added to the Dom.

 
$ (Function(){})
 

 

Run this function once after the Dom is loaded-we use a jquery selector to locate all P elements in the file and attach them with click events.

 
$ ("P"). Click (...);
 

Selector can select any element through ID and class. For the ID and class, use the CSS style syntax (# And. respectively). For the input whose ID is "first-name", use jquery to find its code below:

 
$ ("# First-name")
 

The rest is the anonymous function, which we use as an event handler.

 
Function () {$ (This). Slideup ();}
 

 

We call the slideup animation for the clicked element to let jquery do it.

Feedback

I started this series to help a friend who learned web development. I found these skills written, and I found myself better aware of these technologies. I hope it can serve as a good reference for others.