Asp.net MVC3 企業網站系統高仿博客園 首頁左側列表頁面 實現效果


在前一篇文章Asp.net MVC 3 開發企業網站系統仿照博客園部分功能--總體設計中介紹了數據庫的總體設計,現在呢我們就來實現博客園的左側網站分類效果實現。當然因為我的前端功底實在不敢恭維,所以我采用博客園的CSS和JS腳本,這樣我們可以提高網站的實現速度,而不用為了前端的顯示界面調整浪費時間(注:前端很重要)。下面我就來說明我的這個分類的實現方式,如果您有更好的建議,歡迎您提出來!

在具體說明實現之前,我要說明一下這個網站系統我采用的架構或者說目錄實現方式(通過QQ截圖顯示):

image

現在我來說一下我這么設計結構的原因:

1.IDBServices:這個是訪問數據庫以及對數據庫進行操作的接口。

2.ImpAccessServices:這個類庫是通過繼承IDBServices實現對Access數據庫的訪問、操作

3.ImpSqlServices:這個類庫實現自IDBServices接口,是對SqlServer數據庫的訪問。

4.ImpServices:繼承自IServices接口,實現對sqlserver或者Access等其他數據庫的訪問

5.IServices:服務層接口,這里定義了多有對於數據庫可能進行的操作以及應該返回的數據類型,以及查詢接口

6.Models:獨立出來的MVC的Models層,這個類庫單獨獨立出來應該是所有項目都會采用的,這樣可以避免因為Models層的過大而影響MVC目錄結構,還有就是獨立出來可以由其他人員進行開發,方便整合。

7.MVCCompany:這個是MVC應用程序,是和用戶直接打交道的地方。

還有一點,我覺得有必要說一下,就是我單獨把數據訪問層接口放到獨立的類庫中,而把實現類放到其他不同的類庫中,這樣我個人認為有兩個好處:1.就是方便管理,可以單獨開發,不會相互影響,2.就是可以更加有效的進行IOC,依賴注入,更加方便的增加可維護性,我認為這是更加重要的方面。

為了增加這個小型網站的可維護性以及可擴展性或者可更改性,我采用的是將不同的部分單獨分開(比如首頁網站分類、顯示列表我都單獨分在不同的頁面中),在需要的地方進行組裝顯示。我想這也是現在軟件開發通用的方式。(其中UserControl就是一個例子)

好了,該介紹的我想都介紹完了,下面來演示過程:

強調一下,在MVC中可以進行組裝的方法有很多種,我采用的是Html.RenderAction()方法的一個重載,當然可以采用其他的諸如Html.Action().Html.Partial(),Html.RenderPartial(),采用母板頁方式(其實我個人特別反感在需要組裝的時候就使用母板頁,當然這是一個不錯的方式,但是有時候母板頁會帶來其他問題,不如采用MVC中的htmlHelper方法來的好。當然這只是個人意見)等不同的方法。在這里我想說一下,Html.RenderAction方法的執行效率會比Html.Action()效率高,至於為什么?當然這也是有條件的,各位可以查資料

開發過程:

1.創建所有的對數據庫的操作的實現類,這是必須的

在這里我創建的就是CategoryServices,是繼承自IServices接口的一個實現類。其中定義了各種網站分類應該具有的方法,在這里使用的就是返回所有的分類列表

public List<CategoryInfo> GetAll()方法,返回多有的網站分類的數據列表

2.創建好了網站分類的服務類以后,剩下的工作就輕松很多了。創建CategoryController,在該Controller的Action方法Index中定義需要的數據

1 public ActionResult Index()
2       {
3           CategoryServices cateServices = new CategoryServices();
4           List<CategoryInfo> cateList = cateServices.GetAll();
5           ViewBag.Cate = cateList;
6           return View(cateList);
7       }

 

該方法通過服務層類返回數據網站分類必須的數據,並且通過ViewBag傳遞到View層

3.在View層中顯示Controller傳遞的數據

@{
    Layout = null;//表示母板頁為空
}
<!DOCTYPE html>
<html>
<head>
    <title>Category</title>
</head>
<body>
    <div id="cate_title_block">
        <div id="cate_title_title">
            <div class="cate_title">
                網站分類</div>
        </div>
        <ul id="cate_item">
            @{
                List<Models.CategoryInfo> cateList = ViewBag.Cate as List<Models.CategoryInfo>;
                foreach (Models.CategoryInfo item in cateList)
                {
                    if (string.IsNullOrEmpty(item.ParentID))//首先顯示所有的父級列表,因為父級列表的ParentID為空,所以可以找到所有的父級列表顯示出來。
                    {
                <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>
    <div id="cate_sub_block">
        @{//顯示完了所有的父級列表以后,就需要顯示所有的子級列表,並且要設置其為Hidden。
            var top = 30;
            foreach (Models.CategoryInfo item in cateList)
            {
                if (string.IsNullOrEmpty(item.ParentID))
                {

                    top = top + 20;//這個表示每個子級列表顯示的位置。距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>
</body>
</html>

  

4.創建好了可以顯示的列表以后,我們就要讓他在首頁組裝了。通過Html.RenderAction()來在首頁渲染

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <link rel="Stylesheet" type="text/css" href="http://common.cnblogs.com/css/reset.css" />
    <link rel="Stylesheet" type="text/css" href="http://common.cnblogs.com/blog/css/aggsite.css?id=2012120102" />
    <link id="RSSLink" title="RSS" type="application/rss+xml" rel="alternate" href="http://feed.cnblogs.com/blog/sitehome/rss" />
    <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
    <script src="http://common.cnblogs.com/script/json2.js" type="text/javascript"></script>
    <script src="http://common.cnblogs.com/blog/script/site.src.js?id=2012120102" type="text/javascript"></script>
</head>
<body>
    <div id="side_nav">
        @{Html.RenderAction("index", "category");}
    </div>
</body>
</html>

  

可能有些園友很疑惑,為什么我這里的ID或者class都和博客園的定義一樣,在這里我想說一下就是,我前端真的很不在行,只能通過這種方式來提高進度。畢竟都是工作的人,時間很緊張。你懂得

5.下面來看一下我在本地調試顯示的效果。

image

可以說結果還是符合了我的預期。實現了對於博客園首頁的網站分類列表的功能實現。下一個功能就是博客園首頁中的列表顯示。

這個很簡單,我把我在開發中遇到的一些問題和大家說一下,希望可以得到幫助。

我在設計這個網站系統的架構結構的時候,糾結了很久,總是想不到合適的能完全滿足我要求的架構,是我對於架構的經驗不足造成的,還是什么原因呢?請各位解答,謝謝~有時候寫博真的能發現自己的很多問題,大家積極寫博,共同進步

第一篇:Asp.net MVC 3 開發一個簡單的企業網站系統

第二篇:Asp.net MVC 3 開發簡單的企業系統開篇--數據庫

第三篇:Asp.net MVC 3 開發企業網站系統仿照博客園部分功能--總體設計

還有一點我忘記說了,就是對於這種靜態的內容,不需要每次都從服務器讀取數據再次進行顯示,這會非常的影響性能。我們可以采用Memcached對這些靜態的不經常變動的數據進行緩存,當然這個也以后進行。現在是先實現基本功能,至於其他性能問題,以后逐漸加上

有園友提出代碼下載的地方找不到,我現在把tfs地址發出來,大家共享

大家可以到codeplex上搜索bokeyuan,是博客園的拼音就可以搜到這個項目,可以加入這個項目,讓我們一起來努力,加油 園友們

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM