[翻译]在ASP.NET MVC 4中使用EF代码优先和jQuery实现动态菜单

　　原文地址:http://www.dotnetcurry.com/ShowArticle.aspx?ID=811

　　免责申明:本文为翻译,仅用于学习交流,版权归原作者所有 (Sumit Maitra)

　　更多说明:本着自学加深记忆之目的翻译此文,不用于任何商业用途

 

　　在ASP.NET MVC 4中使用EF代码优先和jQuery实现动态菜单

　　Posted by: Sumit Maitra , on 5/24/2012, in Category ASP.NET MVC

　　摘要: ASP.NET MVC项目模板为每个控制器带有一个硬编码的默认菜单. 然而在真实场景却不然,我们的菜单应该是动态的,加载的,可灵活管理的.本文将教你在ASP.NET MVC 4中使用EF代码优先和jQuery创建一级动态菜单.

　　ASP.NET MVC默认静态的项目模板是不错的开始,然而即使中等复杂的项目也需要更多的灵活性.本文将创建一个简单的一级菜单系统,可以对菜单项分组以及在运行时灵活地设置名称,动作和控制器.

　　本文使用的代码来自www.devcurry.com上的Live Tile jQuery Plugin article.

 

　　后端

　　我们用SQL Server保存数据,EF来管理菜单定义.架构如下.菜单类作为容器或菜单项的逻辑分组.

　　menu-entity

　　菜单项封装细节:　

  • Id - 标识
  • Name – 菜单名称
  • ActionName – 被调用的动作名称
  • ControllerName – 动作所属的控制器名称
  • Url – 如果动作为空, 可指定一个菜单的URL链接.
  • ParentMenu – 到容器菜单的导航属性

　　menu-item-entity 

　　使用EF代码优先将他们保存于SQL Server.

 

　　为管理员绑定菜单的UI

　　从LiveTile project that was built from an empty MVC4 project开始.在Home下只有一个Index.cshtml.我们将添加Administration,在它的顶部显现菜单.

　　步骤一:复制_Layout.cshtml并重名称为_LayoutAdmin.cshtml.将header改成‘LifeTile.js Admin’

　　步骤二:用标准MVC架构创建一个控制器,通过在 ‘Controllers’文件夹上右击并选择‘Add Controller’来完成.

　　create-menu-controller 

　　-点击Advanced Options并选择_LayoutAdmin.cshtml作为母版页.这相当重要因为我们想让使用默认母版页的普通页里的菜单缓存起来.另一方面Admin页面不使用任何缓存以便修改菜单能立即呈现出来.

　　setup-new-masterpage 

　　点击‘Add’按钮完成创建控制器.所有的方法和视图都将捆绑菜单创建.现在重复相同步骤生成MenuItemController,它使用相同的Data Context和Admin母版页.

　　create-menu-item-controller 

　　步骤三:更新web.config中的连接字符串,修改Name为LiveTileDB,修改connectionString使之指向正确的数据库.

　　update-web-config

　　步骤四:修改DBContext使它使用正确的连接字符串.如下,将它传递给基类的构造器.

　　update-db-context 

　　重写OnModelCreating传递‘CreateDatabaseIfNotExists’初始器.这确保EF创建数据库如果它不存在的话.

　　步骤五:不存在菜单项的页面,它们只是菜单的一部分.因此删除MenuItem\Index.cshtml.

　　步骤六:菜单项将显示在菜单的详细页面.更新Menu\Details.cshtml如下:

　　menu-details-csthml 

　　在Menu\Details页添加菜单项的显示细节.并不仅是如此,遍历每个菜单顶,添加编辑和删除链接以便在详细页编辑和删除菜单项.在底部还添加了‘Create’创建菜单项的链接.

　　步骤七:更新菜单项的控制器.在上面的步骤,所有的动作连接都为HTTP GET操作传递了附加参数.这是为了让控制器知道菜单项关联了哪个菜单.如下更新MenuItemController.

　　menuitem-create-action

　　编辑动作

　　menu-item-edit-action 

　　删除动作

　　menu-item-delete-action 

　　像这样修改详细视图页和控制器后,我们准备创建菜单和菜单项.运行应用程序导航到/Menu:

　　menu-admin-first 

　　点击Create New添加一个名为"Main"的菜单.

　　点击Details进入详细页.

　　menu-details 

　　点击Add Menu添加一个菜单项(Name = Home, Action=Index, Controller=Home),添加另一个菜单项(Name = About, Action = About, Controller=Home).现在的详细页像下面这样

　　menu-details-with-menu-items 

　　现在我们的后端完成,它有一个菜单和几个菜单项.现在是时候做显示工作!

 

　　显示菜单

　　步骤一:在Views/Shared文件夹下添加名为_MenuLayout.cshtml的分部视图.设置为Menu的强类型.

　　add-partial-menu-layout 

　　步骤二:如下更新视图:

　　partial-view-markup 

　　Menu只是显示一个菜单项的列表.

　　步骤三:用如下动作方法更新HomeController.cs

　　home-controller 

　　它将被调用生成Menu的分部视图.这里我们‘hardcoded’硬编码了菜单名称(‘Main’).该方法使用给定的实体(menu)为_MenuLayout.cshtml文件返回HTML代码.

　　步骤四:更新_Layout.cs

　　Layout-header 

　　添加一个<nav>节,它含有一个id为navcontainer的空白div.我们将用分部视图来替换div的内容.

　　在_Layout.cs的下部添加下面的JavaScript

　　partial-view-javascript 

　　这段脚本仅仅是一个jQuery回发,它在文档被加载后触发.在成功返回里,它简单地将HTML响应结果填充到容器中.

　　步骤五:用相同方法更新_LayoutAdmin.cs,JavaScript中只有一处修改.我们为Admin页禁用缓存.

　　cache-disabled 

　　步骤六:通过更新CSS使用<li>元素变成标签布局来美化.

　　就这样,我们完成了.运行应用程序查看显示的菜单.

　　menu-Rendered 

　　从/Menu导航到Admin页,修改菜单项的名字来可以看到修改被立即体现出来.点击Home链接导航回Home页.点击About会抛出一个异常因为我们还没有About页面.

　　

　　总结

　　本文演示了ASP.NET MVC应用程序中如何创建一个简单菜单系统后端及相应的admin页面.演示了如何使用MVC分部视图,演示了传递父标识来处理父-子关系的用户交互,最后演示了jQuery在分部回发中能做什么.

　　本文源代码下载入口over here

　　参见See a Live Demo

 posted on 2012-07-05 13:33  Walking Dead  阅读(601)  评论(0)    收藏  举报