Asp.net mvc3 enterprise website system high imitation blog Park homepage list page on the left to achieve results

In the previous articleArticleAsp.net MVC 3 Develop an enterprise website system following the functions of the blog garden-Overall DesignThis section introduces the overall design of the database. Now we will implement the classification of the left-side website of the blog Park. Of course, because my front-end skills are not flattering, I use the CSS and JS scripts of the blog garden, so that we can improve the website implementation speed, you don't have to waste time adjusting the front-end display interface (note: the front-end is very important ). The following describes how to implement this classification. If you have better suggestions, please submit them!

Before implementation, I want to describe the architecture or directory implementation method used by the website system (displayed via qq ):

Now I want to explain the reasons for designing the structure as follows:

1. idbservices: This is an interface for accessing and operating databases.

2. impaccessservices: This class library inherits idbservices to access and operate access databases.

3. impsqlservices: This class library implements the self-idbservices interface, which is used to access the sqlserver database.

4. impservices: inherits from the iservices interface to implement access to sqlserver or access and other databases.

5. iservices: service layer interface, which defines many operations that may be performed on the database, the data types that should be returned, and the query interface.

6. models: An Independent MVC models layer. This class library should be used by all projects independently. This prevents the MVC directory structure from being affected because the models layer is too large, in addition, other personnel can develop independently to facilitate integration.

7. mvccompany: This is an MVC application.ProgramIs a place to deal with users directly.

Another point is that I put the data access layer interface in an independent class library and the implementation class in other different class libraries, in this way, I personally think there are two advantages: 1. it is convenient to manage and can be developed independently without affecting each other. 2. that is, IOC and dependency injection can be performed more effectively to increase maintainability. I think this is a more important aspect.

To increase the maintainability and scalability of this small website, I separate different parts separately (for example, I separate the homepage website categories and display lists on different pages) and assemble and display them as needed. I think this is also a common method of software development. (Usercontrol is an example)

All right, I want to finish the introduction. The following shows the process:

There are many methods that can be assembled in MVC. I use HTML. an overload of the renderaction () method, such as HTML. action (). HTML. partial (), HTML. renderpartial (), using the mother board page (in fact, I personally dislike using the mother board page when it needs to be assembled. Of course this is a good method, but sometimes the mother board page will bring other problems, it is better to use the htmlhelper method in MVC. Of course, this is just my opinion) and other different methods. Here I want to explain that the execution efficiency of the HTML. renderaction method is higher than that of the HTML. Action () method. Why? Of course, this is also possible. You can check the information.

Development Process:

1. Create all implementation classes for database operations. This is required.

Here, I created categoryservices, which is an implementation class inherited from the iservices interface. It defines the methods that various website categories should have. Here, all categories are returned.

Public list <categoryinfo> getall () method, returns a list of multiple website categories

2. After the website category service class is created, the rest of the work will be much easier. Create a categorycontroller and define the required data in the Action Method index of the controller.

1 PublicActionresult index ()2 {3Categoryservices cateservices =NewCategoryservices ();4List <categoryinfo> catelist =Cateservices. getall ();5Viewbag. Cate =Catelist;6ReturnView (catelist );7}
 

 

This method returns the data required by the website category through the service layer class and passes the data to the view layer through the viewbag.

3. display the data transmitted by the Controller in the view layer

@ {Layout = NULL ;// Indicates that the motherboard page is empty. } <! Doctype HTML>  First, all parent lists are displayed. Because the parentid in the parent list is empty, all parent lists are displayed. {<Li id = "cate_item _ @ item. categoryid "class =" "onmouseout =" catehidden (@ item. categoryid) "onmouseover =" cateshow (@ item. categoryid) "> <a href =" "> @ item. categoryname </a> </Li >}}</ul> <Div class = "cate_bottom"> </div> <Div id = "cate_sub_block"> @{// After the parent list is displayed, all child lists need to be displayed and set as hidden. VaR Top = 30; foreach (models. categoryinfo item in catelist) {If (string. isnullorempty (item. parentid )){ Top = Top + 20; // This indicates the position displayed in each sublevel list. The height from top. VaR toppix = top. tostring () + "PX "; <Div id = "cate_content_block _ @ (item. categoryid)" class = "cate_content_block_wrapper" style = "Top: @ toppix; Display: None ; "Onmouseout =" catehidden (@ (item. categoryid) "onmouseover =" cateshow (@ (item. categoryid) "> <Div class =" cate_content_top "> </div> <Div class =" cate_content_block "> <ul >@{ foreach (models. categoryinfo subitem in catelist) {If (subitem. parentid = item. categoryid) {<li> @ HTML. actionlink (subitem. categoryname, "Cate", "category", new {id = subitem. categoryid}, null) </Li >}}</ul> </div> <Div class = "cate_content_bottom"> </div> </Div >}}</div> </div>/ body> 
 

 
4. After creating a list that can be displayed, We need to assemble it on the home page. Rendering on the home page through HTML. renderaction ()
 

@{ layout = NULL ;}
     index  
   
   
        
  
   

    
   @{ HTML. renderaction ("Index", "category") ;}
  
   
   
 

 
Some Garden friends may wonder why I have the same ID or class as the blog garden definition. Here I want to say that my front-end is really not good, you can only improve the progress in this way. After all, they are all working people and time is tight. You know
 

 
5. Let's take a look at the effect of local debugging.
 

 
 

 
It can be said that the results still meet my expectations. Implements the website category list function of the blog home page. The next function is to display the list on the blog homepage.
 

 
This is very simple. I 'd like to share some of the issues I encountered during development with you and hope you can get help.
 

 
I have been entangled for a long time when designing the architecture of this website system. I never thought of a suitable architecture that fully meets my requirements. It was caused by my lack of Architecture Experience, why? Thank you for your answers ~ Sometimes you can find many problems of yourself by writing blogs. Everyone is actively writing blogs and making progress together.
 

 
Article 1:Asp.net MVC 3 develop a simple enterprise website system
 

 
Article 2:Asp.net MVC 3 simple enterprise system development-Database
 

 
Article 3:Asp.net MVC 3 Develop an enterprise website system following the functions of the blog garden-Overall Design
 

Another point I forgot to mention is that for such static content, you do not need to read data from the server every time to display it again, which will greatly affect the performance. We can use memcached to cache the static data that does not change frequently. Of course, this will also happen later. Now we need to implement basic functions first. As for other performance problems, we will gradually add
 

 
Some Yuan You proposedCodeThe download location cannot be found. I am sending the TFS address to share it with you.
 

 
You can search for bokeyuan on codeplex. You can find this project in the pinyin field of the blog garden. You can join this project. Let's work together to cheer up friends.