MVC4商城項目三：分部視圖在導航條上的應用

寫了幾天發覺大部分時間用在JS上了，本來想寫個musicstore，卻加了框架，然后又想用后台，然后又想用上bootstrapt，然后又想弄權限設計，然后又想…………

看來是想多了~

好吧，最近把后台搭起來了，用了metronic.bootstrap, 真心很強大。功能很多，為了節約時間成本就在它上面改吧。先上圖看看

 

框架演示地址：http://dreamsky.github.io/main/blog/metronic-bootstrap/index.html

下載地址：http://dreamsky.github.io/main/blog/metronic-bootstrap/metronic.bootstrap.rar

來自分享：夢想天空

 

要實現導航條和菜單欄的功能，我用到了分部視圖，就當是WEBFORM的用戶控件來理解吧。

 先看一下實體模型：

 public class UrlConfigDto
    {
        public int Id { get; set; }

        public string UrlName { get; set; }

        public string Url { get; set; }

        public int PageLev { get; set; }

        public int LevOrder { get; set; }

        public int UrlRole { get; set; }

        public string Icon { get; set; }

        public int POrder { get; set; } 
    }

　　

我想把<URL,UNAME>綁定在視圖上，所以我的Service層返回的是List<string>

 public List<string> GetMeunTool(int orderId)
        {
            List<string> dic = new List<string>();

          UrlConfig urlConfig=  _urlConfigRepository.GetFiltered(a => a.LevOrder == orderId).FirstOrDefault();
            if (urlConfig==null)
            {
                return null;
            }
            dic.Add(urlConfig.UrlName+"^"+urlConfig.Url+"/"+urlConfig.LevOrder);
            for (int i = 0; i < urlConfig.PageLev-1; i++)
            {
                UrlConfig tem = _urlConfigRepository.GetFiltered(a => a.LevOrder == urlConfig.POrder).FirstOrDefault();
                dic.Add(tem.UrlName + "^" + tem.Url+ "/" + tem.LevOrder );
                urlConfig.POrder = tem.LevOrder;
            }
            return dic;
        }

創建分部視圖，傳遞數據模型：

  public PartialViewResult MeunTool(int id)
        {
            return PartialView(_urlService.GetMeunTool(id));
        }

來看看視圖頁面

@model List<string>

@if (Model == null)
{
    <h3 class="page-title">主頁</h3>
    <ul class="breadcrumb">
        <li>
            <i class="icon-home"></i>
            <a href="/Admin/Admin">主頁</a>
        </li>
    </ul>
}else if (Model.Count == 1)
{
    <h3 class="page-title">@Model[0].Split('^')[0] </h3>
    <ul class="breadcrumb">
        <li>
            <i class="icon-home"></i>
            <a href="/Admin/Admin">主頁</a>
            <i class="icon-angle-right"></i>
        </li>
        <li><a href="@Model[0].Split('^')[1]">@Model[0].Split('^')[0]</a></li>

    </ul>
}

其實我這里想用Dictionary<string,string> 的，不過PartialView（）里不允許。

在模板頁面我們就可以這樣調用分部視圖了：

  @{
         int id = Convert.ToInt32(Html.ViewContext.RouteData.Values["id"]);
         Html.RenderAction("MeunTool", "Admin", new { id = id });
   }

 

說明一下這里的id的設計作用 ，這個ID是urlconfig表的惟一鍵，我用它來識別當前頁的位置，如URL：http://localhost:11903/Admin/Admin/UserInfo/301　　

 @Html.ViewContext.RouteData.Values["id"]  在視圖頁面可以直接接受到id傳參

 

PS：想要當做項目做而不一個DEMO，在用戶體驗得下大功夫，JS是最耗時間的，有點拖垮人的節奏……

具體代碼的實現，請參見 https://code.csdn.net/denghao156/ktnmb_mvc4