Region and separation, JS compression, CSS, jquery extensions

Background management area and separation, JS compression, CSS, jquery extension

Catalog: ASP. NET MVC4 get started to Master Series catalog summary

Have a period of time not updated blog, recently busy two things: 1, reading, learning ... 2, for the company's annual program to prepare for a long time did not practice double-cut sticks, inevitably unfamiliar, so now cramming. The recent weather in Shenzhen is abnormal, many people have a cold, I also become one of them, everyone pay attention to the body ...

In this article, let me briefly describe some of the assorted techniques that will be used in the next project.

Area and Separation

In 15, the introduction of ASP. NET MVC to proficient--mvc-routing, I have briefly explained the separation of areas.

1, right-click the Web project, "Add"--"zone", the region name, we named admin here, after the creation of the Web project, there will be more than one areas folder, areas folder below will have a we just created the Admin folder, In the Admin folder there is a complete list of MVC projects, here, we do not want to put the controller in the Web project, so delete the controllers and Models folder.

2. New Class Library Project Web.Logic.Admin, this class library project we come as a background system of the area, the Admin folder AdminAreaRegistration.cs copy out, and then put this file against Web.Logic.Admin project, modify the file namespace.

3. Add the following references to the Web.Logic.Admin project

4. Web project Add reference to Web.Logic.Admin project

5. New Membercontroller class in Web.Logic.Admin project

    public class Membercontroller:controller    {        [httpget] public        actionresult Index ()        {            return View ( );        }    }

6. In the Web project, under the Areas/admin/views/member directory, add the view index.cshtml

@{    viewbag.title = "Index";} 
7, in the browser input address http://localhost:10757/Admin/Member/, the operation results are as follows:
JS Compression and merging
In the Web project, in the BundleConfig.cs file Registerbundles method, add the following code:
            
"~/scripts/jquery.validate.min.js", "~/scripts/jquery.validate.unobtrusive.min.js", "~/Scripts/ Jquery.msgProcess.js "));            Bundletable.enableoptimizations = true;
The jquery.msgProcess.js in this is my custom.
View Call Code:
    @Scripts. Render ("~/mvcajax")
About compression and consolidation I have a more detailed description in 21, the introduction of ASP. NET MVC to proficient--asp.net MVC4 optimization, here is just a brief mention, no longer repeat it.
Css
I find many. NET Web developers front-end this piece is very weak, although many companies have specialized front-end engineers and artists, but the necessary knowledge of the front-end is helpful.
Learning CSS, I recommend an ebook, "CSS Zen garden", we do not require a deep understanding of CSS, to understand most of the CSS code, copy some of the existing CSS style, you will modify its style.
Here, let me briefly describe the CSS styles that we have used very frequently in our development.
We often encounter such requirements, depending on the conditions, dynamically control the interface of an element of the hidden and display, we usually consider the following two ways to achieve:
Set element Hide

 
 

  
  
 
   
Display:none;
 
   
Visibility:hidden;
 
  
 
 
Display: does not affect the CSS layout, display is actually a floating feature of the set element.
Visibility: Affects the CSS layout, which can have a certain effect on performance, because it causes the HTML interface to reflow. When set to hidden, the element is hidden, but it still occupies its original position, and the visibility property is the hidden element but keeps the element floating.
Jquery
jquery, also commonly used in our web project development, recommends an ebook, "Sharp jquery."
To unify the AJAX data approach, I first add a unified Ajax format class to the model project Ajaxmsgmodel
    <summary>////    Unified Ajax Format Class///    </summary> public    class Ajaxmsgmodel    {        public String MSG {get; set;}        <summary>//Ok,error//        </summary> public        string Statu {get; set;}        public string Backurl {get; set;}        <summary>///data Object///</summary> public object        data {get; set;}    }
Then in the Web project scripts directory to create a new JS file Jquery.msgProcess.js, and then add a jquery extension method, as for the use of jquery extension method, if not clear, please check the information directly. I always like to pay attention to, copy over, and then figure out, and finally revise their own, the typical lazy practice.
(function ($) {    $.extend ($, {        procajaxdata:function (data,funcsuc,funcerr) {            if (!data. Statu) {                return;            }            Switch (data. Statu)            {case                "OK":                    alert ("OK:" + data.) MSG);                    if (FUNCSUC) funcsuc (data);                    break;                Case "Error":                    alert ("Error:" + data.) MSG);                    if (funcerr) funcerr (data);                    Break;}}    );} (JQuery));
Called In view
    <script type= "Text/javascript" >        function Success (jsondata) {            $.procajaxdata (jsondata, function () { window.location = Jsondata.backurl; });        }    </script>
Jquery Easyui
About Easyui, we stand on a user's point of view, is really more its name as easy. About its use can go to http://www.jeasyui.net/study.
Select a version, the source code and documents to download, the latest version, the document is generally in English. After downloading, there is a lot of HTML demo. There are ready to directly copy over, online about Easyui sample code countless, or that sentence, copy over, see understand, will be modified, OK, not recommended in not learning a new framework, the framework of the document from the beginning to the end, the real work, there are very few companies will have so much free time to us, So we are generally used first, there is need, and then in-depth.
Region and separation, JS compression, CSS, jquery extensions