Basic mvc knowledge (1): Basic mvc knowledge

Basic mvc knowledge (1): Basic mvc knowledge

Copy the dashboard. For infringement, please contact me to delete it.

 

1. js/css merge

In the previous crud example, we introduced js/css scripts in the same way as normal web development.

[Javascript]View plain copy

1. <Script src = "~ /Scripts/jquery-1.8.2.min.js "> </script>
2. <Script src = "~ /Scripts/jquery. validate. min. js "> </script>
3. <Script src = "~ /Scripts/jquery. validate. unobtrusive. min. js "> </script>

However, the mvc Framework provides a powerful JavaScript/css script merging function.

Find the BundleConfig. cs class in the App_Start folder.

Double-click to open

Although the Code cannot be understood, we can see a lot of paths for introducing js and css scripts.

Next we will imitate the format and try to add it ourselves

[Csharp]View plain copy

1. Bundles. Add (new ScriptBundle ("~ /Bundles/jqueryval "). Include (
2. "~ /Scripts/jquery. unobtrusive *",
3. "~ /Scripts/jquery. validate *"));
6. // Add your own ScriptBundle -- MyScript
7. Bundles. Add (new ScriptBundle ("~ /Bundles/MyScript ")
8. . Include ("~ /Scripts/jquery-1.8.2.min.js ",
9. "~ /Scripts/jquery. validate. min. js ",
10. "~ /Scripts/jquery. validate. unobtrusive. min. js "));

[Csharp]View plain copy

1. // Enable merge Compression
2. BundleTable. EnableOptimizations = true;

OK ~

This completes the combined reference of the j script.

The previous view page does not need the previous method.

Now we delete the original three js script references.

Change to new code

 

[Csharp]View plain copy

1. @ Scripts. Render ("~ /Bundles/MyScript ") // enter new ScriptBundle ("~ The path name in/bundles/MyScript "), which can be named at will. For example, you can change it like this: new ScriptBundle ("~ Myjs ")

 

Let's take a look at the two comparisons using the developer tools.

Before js merge is used

Sent three js requests to the server

After merging with js

The three requests are merged into one. When the program is large, many js/css references are referenced on the page. If you reference the script in the normal way, a large number of requests will be sent to the server.

The js Merge function helps us solve this problem, and it not only merges three js files together, but also compresses and optimizes the files. You can see it through the corresponding body of the server.

The same is true for css merge compression. You can add a StyleBundle in the format of BundleConfig. cs for reference ~

God skill, get it!

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2. HtmlHelper, UrlHelper

The mvc Framework provides some help classes for programmers to quickly View

The following example describes the HtmlHelper and UrlHelper classes.

(1) Url. Action and Url. RouteUrl

Recall the previous crud example

When we write a url address, it is directly written to death.

For example:

[Html]View plain copy

1. <Td>
2. <A href = "/Home/Create"> Add </a>
3. </Td>

It seems that there is no problem.

But in mvc, this is a huge hidden problem.

In mvc, you can modify the url request format by configuring the route!

[Csharp]View plain copy

1. Routes. MapRoute (
2. Name: "Default ",
3. // Previous route Configuration
4. // Url: "{controller}/{action}/{id }",
5. // Now change:
6. Url: "{action}/{controller}/{id }",
7. Defaults: new {controller = "Home", action = "Index", id = UrlParameter. Optional}
8. );

In this way, the new hyperlink request is the Home method under the Create controller.

However, the server only has the Create method under the Home controller! If you do not modify the url, the system will return an error where the method cannot be found.

So change it.

But think about it.

If the project size is very large, there are many URLs

Do you want to change them one by one ?!

Not to mention that it took a lot of effort to complete the change.

I was suddenly notified that the route configuration had to be changed.

Oh ~ Shit!

But don't panic ~

The omnipotent mvc Framework provides you with a solution ~

Change the previous url to the UrlHelper format.

Use the Url. Action Method

The first parameter specifies the action method name, and the second parameter specifies the Controller name.

Then generate and run to view the generated new hyperlink

Done ~ The hyperlinks generated using the UrlHelper class are generated based on the route configuration.

Programmers no longer have to worry about the front-end url format ~

(But here we can see that this url is a bit strange. Why is there only "Create" without "Home"? This is because the default controller in route configuration is "Home" and the default action is "Index, if the requested controller or action method is the default one, it will be omitted without writing ~)

The Url. Action method is generated based on the first route in the route table.

However, there may be more than one route in a route table.

In this case, what if we need to generate a url Based on the n route configuration?

Use the Url. RouteUrl Method

This method can generate a url Based on the specified route name.