使用MVC和WCF REST+Angular实现动态菜单
http://www.codeproject.com/Articles/996614/Angular-JS-Dynamic-Menu-Creation-using-MVC-and-WCF
新手翻译,看到一些好文,将其转过来,希望能对大家起到一点点的帮助.
1,为什么我们需要动态创建菜单:
如果我们只是需要创建一个只有几个页面的网站,那么用静态菜单就可以。
但是如果要开发一个大型Web应用的话,例如ERPWeb应用.
在这种情况下,会有2个以上的开发者一起工作,而且页面可能会超过50-100个,这种情况下,用静态菜单将会是一个很大的挑战.
而且在开发中或之后,我们的客户可能会要求我们增加5个新的菜单,或移除掉一个菜单元素.
在使用静态菜单的情形下,这将会是一个很耗时的操作.
而且在开发大型Web项目时,比如ERP,我们需要基于用于角色来显示菜单,如果我们使用静态菜单的话,这将会一
件很难成.
为了解决这些情况,我们应该基于用于角色配置来创建菜单
谁应该管理这些菜单?
这是非常重要的部分,例如管理或超级用户可以添加/编辑/删除这些菜单或用户.
当管理员登录后,他能添加新菜单,编辑现有菜单和删除菜单元素。
这篇文章的关注点并不在于菜单管理而在于如何创建一个主菜单和菜单详情表,Insert一些示例菜单进我们的数据表,然后在我们的MVCWeb页上使用AngularJS和WCFRest服务来动态的显示它.
这篇文章将会说明:
1,如何创建一个WCFRest服务和从数据库中查询数据
2,如何安装AngularJSPackage进MVC应用.
3,如何使用AngularJS建立一个动态菜单应用.
4,如何在AngularJS里使用WCS服务显示动态菜单
注意:你首先必须安装VisualStudio2013
面向服务的应用:使用这个协议,我们能在网络上分享我们的服务
举个例子,让我们设想一个场景,我们正在完成一个项目,需要创建一些公用数据库方法,并且需要被另外多个在不同地点的项目通过Internet连结调用.
在这种情况下,我们可以创建一个WCF服务并且将我们的公用数据库方法放到这个WCF服务类中,然后将这个WCF服务布署在IIS上,通过URL将其开放出去.
在这段代码中,让我们看看如何创建一个WCFRest服务,并且将它用在我们的AngularJS应用中.
如果你想了解更多的关于WCF的资料,请点击这里link.
AngularJS
我们可能会对Model,View和ViewModel(MVVM)或Model,View和Controller(MVC)比较熟悉.AngularJS也是一个纯粹的用于Html,CSS和JS的类似框架
与MVC和MVVM模式相似,AngularJS使用Model,View和Whatever(MVW)模式
在例子中,我使用了Model,View和服务,在下面这段代码中,让我们看看如何将AngularJS引和我们的MVC应用中.
我们将基于MenuDB数据库,创建一个主菜单和详情菜单表
注意:主菜单和菜单详情表用于动态加载我们的菜单,我们需要知道如何插入详情菜单到表中,以用于显示正常显示菜单.
在这篇文章中,我们将示例三级水平分级菜单,如图:
第一级->Inventory;
第二级->inventoryDetails
第三级>FinishedGoodsReceiptandFinishedGoodsIssue.
现在让我们看看如何创建表用于关联主菜单和详情菜单
主菜单表
1级菜单Insert
InsertintoMenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate)values('Root','Inventory','Shanu',getdate()-23)
2级菜单Insert
InsertintoMenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate)values('Inventory','INV001','Shanu',getdate()-23)
3级菜单Insert
InsertintoMenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate)values('INV001','FG001','Shanu',getdate()-23)InsertintoMenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate)values('INV001','FG002','Shanu',getdate()-23)
详情菜单表
1级菜单Insert
InsertintoMenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate)values('Inventory','Inventory','Inventory','Index','Inventory','Shanu',getdate()-23)
2级菜单Insert
InsertintoMenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate)values('INV001','Inventory','InventoryDetails','Index','Inventory','Shanu',getdate()-23)
3LevelhierarchiesInsert
InsertintoMenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate)values('FG001','FGIN','FGReceipt','FGIN','Inventory','Shanu',getdate()-43)InsertintoMenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate)values('FG002','FGOUT','FGIssue','FGOUT','Inventory','Shanu',getdate()-13)
字段与详情菜单的关系
我们已使用的字段与主菜单的关系
下面的脚本用于创建数据库,表和示例中用到的Insert和Query.
在你的SQL中运行这个脚本,我使用的是SQL2012
-- ============================================= -- Author : Shanu -- Create date : 2015-03-20 -- Description : To Create Database,Table and Sample Insert Query -- Latest -- Modifier : Shanu -- Modify date : 2015-03-20 -- ============================================= --Script to create DB,Table and sample Insert data USE MASTER GO -- 1) Check for the Database Exists .If the database is exist then drop and create new DB IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'MenuDB' ) DROP DATABASE MenuDB GO CREATE DATABASE MenuDB GO USE MenuDB GO -- 1) //////////// ToysDetails table -- Create Table ToysDetails ,This table will be used to store the details like Toys Information IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'MenuMaster' ) DROP TABLE MenuMaster GO CREATE TABLE MenuMaster ( Menu_ID int identity(1,1), Menu_RootID VARCHAR(30) NOT NULL, Menu_ChildID VARCHAR(30) NOT NULL, UserID varchar(50), CreatedDate datetime CONSTRAINT [PK_MenuMaster] PRIMARY KEY CLUSTERED ( [Menu_ID] ASC , [Menu_RootID] ASC, [Menu_ChildID] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] GO --delete from MenuMaster -- Insert the sample records to the ToysDetails Table Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('Root','Home','Shanu',getdate()-23) --Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('Home','Home','Shanu',getdate()-23) Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('Home','About','Shanu',getdate()-23) Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('Home','Contact','Shanu',getdate()-23) Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('Root','Masters','Shanu',getdate()-23) Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('Masters','ITM001','Shanu',getdate()-23) --Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('ITM001','ITM001','Shanu',getdate()-23) Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('ITM001','ITM002','Shanu',getdate()-23) Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('ITM001','ITM003','Shanu',getdate()-23) Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('Masters','CAT001','Shanu',getdate()-23) Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('CAT001','CAT001','Shanu',getdate()-23) Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('CAT001','CAT002','Shanu',getdate()-23) Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('CAT001','CAT003','Shanu',getdate()-23) Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('Root','Inventory','Shanu',getdate()-23) Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('Inventory','INV001','Shanu',getdate()-23) Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('INV001','FG001','Shanu',getdate()-23) Insert into MenuMaster(Menu_RootID,Menu_ChildID,UserID,CreatedDate) values('INV001','FG002','Shanu',getdate()-23) select * from MenuMaster -- 1) END // -- 2) Cart Details Table IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'MenuDetails' ) DROP TABLE MenuDetails GO CREATE TABLE MenuDetails ( MDetail_ID int identity(1,1), Menu_ChildID VARCHAR(20) NOT NULL, MenuName VARCHAR(100) NOT NULL, MenuDisplayTxt VARCHAR(200) NOT NULL, MenuFileName VARCHAR(100) NOT NULL, MenuURL VARCHAR(500) NOT NULL, USE_YN Char(1) DEFAULT 'Y', UserID varchar(50), CreatedDate datetime CONSTRAINT [PK_MenuDetails] PRIMARY KEY CLUSTERED ( [MDetail_ID] ASC, [Menu_ChildID] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] GO ----delete from MenuDetails Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate) values('Root','Home','Shanu Home','Index','Home','Shanu',getdate()-23) Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate) values('Home','Home','Shanu Home','Index','Home','Shanu',getdate()-23) Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate) values('About','About','About Shanu','About','Home','Shanu',getdate()-43) Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate) values('Contact','Contact','Contact Shanu','Contact','Home','Shanu',getdate()-13) Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate) values('Masters','Masters','Masters','ItemDetails','Masters','Shanu',getdate()-13) Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate) values('ITM001','ItemMaster','Item Master','ItemDetails','Masters','Shanu',getdate()-13) Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate) values('ITM002','ItemDetail','Item Details','ItemDetails','Masters','Shanu',getdate()-13) Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate) values('ITM003','ItemManage','Item Manage','ItemManage','Masters','Shanu',getdate()-13) Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate) values('CAT001','CatMaster','Category Masters','CATDetails','Masters','Shanu',getdate()-13) Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate) values('CAT002','CATDetail','Category Details','CATDetails','Masters','Shanu',getdate()-13) Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate) values('CAT003','CATManage','Category Manage','CATManage','Masters','Shanu',getdate()-13) Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate) values('Inventory','Inventory','Inventory','Index','Inventory','Shanu',getdate()-23) Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate) values('INV001','Inventory','Inventory Details','Index','Inventory','Shanu',getdate()-23) Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate) values('FG001','FGIN','FG Receipt','FGIN','Inventory','Shanu',getdate()-43) Insert into MenuDetails(Menu_ChildID,MenuName,MenuDisplayTxt,MenuFileName,MenuURL,UserID,CreatedDate) values('FG002','FGOUT','FG Issue','FGOUT','Inventory','Shanu',getdate()-13) select * from MenuMaster select * from MenuDetails select A.Menu_RootID, B.MDetail_ID, B.Menu_ChildID, B.MenuName, B.MenuDisplayTxt, B.MenuFileName, B.MenuURL , B.UserID FROM MenuMaster A INNER JOIN MenuDetails B ON A.Menu_ChildID=B.Menu_ChildID
2)创建WCFRest服务:
打开VisualStudio2013然后选择文件--新建--项目,然后选择WCF服务,设定好你的应用名和存储路径后单击OK.
创建好后,我们可以看到IService.cs和Service1.svc在解决方案浏览器中.
public interface IService1 { [OperationContract] string GetData(int value); [OperationContract] CompositeType GetDataUsingDataContract(CompositeType composite); // TODO: Add your service operations here } // Use a data contract as illustrated in the sample below to add composite types to service operations. [DataContract] public class CompositeType { bool boolValue = true; string stringValue = "Hello "; [DataMember] public bool BoolValue { get { return boolValue; } set { boolValue = value; } } [DataMember] public string StringValue { get { return stringValue; } set { stringValue = value; } } }
DataContract
在我们的例子中,我们需要从数据库中获取全部详情菜单,所以我创建了一个DataContracts,“MenuDataContract”,可以看到,我已经创建了一些成员变量,名字同于表的列名.
public class MenuDataContract { [DataContract] public class MenuMasterDataContract { [DataMember] public string Menu_ID { get; set; } [DataMember] public string Menu_RootID { get; set; } [DataMember] public string Menu_ChildID { get; set; } [DataMember] public string UserID { get; set; } } [DataContract] public class MenuDetailDataContract { [DataMember] public string MDetail_ID { get; set; } [DataMember] public string Menu_RootID { get; set; } [DataMember] public string Menu_ChildID { get; set; } [DataMember] public string MenuName { get; set; } [DataMember] public string MenuDisplayTxt { get; set; } [DataMember] public string MenuFileName { get; set; } [DataMember] public string MenuURL { get; set; } [DataMember] public string UserID { get; set; } } }
ServiceContract
在OperationContrac中我们可以看到“WebInvoke”和“WebGet”使用WCFRest服务从数据库中查询数据
RequestFormat=WebMessageFormat.Json,
ResponseFormat=WebMessageFormat.Json,
我们可以看到request和response格式,这里我们使用Json格式.
我们声明了三个方法“GetMenuDetails”.The“GetMenuDetails”用于获取主菜单和详情菜单,AngularJS可以调用其过滤显示指定的菜单项.
[ServiceContract]publicinterfaceIService1{[OperationContract][WebInvoke(Method="GET",RequestFormat=WebMessageFormat.Json,ResponseFormat=WebMessageFormat.Json,UriTemplate="/GetMenuDetails/")]List<MenuDataContract.MenuDetailDataContract>GetMenuDetails();}
Iservice.Cs->全部源码
using System; using System.Collections.Generic; using System.Linq; using System.Runtime.Serialization; using System.ServiceModel; using System.ServiceModel.Web; using System.Text; namespace ShanuMenuCreation_WCF { // NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IService1" in both code and config file together. [ServiceContract] public interface IService1 { [OperationContract] [WebInvoke(Method = "GET", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "/GetMenuDetails/")] List<MenuDataContract.MenuDetailDataContract> GetMenuDetails(); // TODO: Add your service operations here } // Use a data contract as illustrated in the sample below to add composite types to service operations. public class MenuDataContract { [DataContract] public class MenuMasterDataContract { [DataMember] public string Menu_ID { get; set; } [DataMember] public string Menu_RootID { get; set; } [DataMember] public string Menu_ChildID { get; set; } [DataMember] public string UserID { get; set; } } [DataContract] public class MenuDetailDataContract { [DataMember] public string MDetail_ID { get; set; } [DataMember] public string Menu_RootID { get; set; } [DataMember] public string Menu_ChildID { get; set; } [DataMember] public string MenuName { get; set; } [DataMember] public string MenuDisplayTxt { get; set; } [DataMember] public string MenuFileName { get; set; } [DataMember] public string MenuURL { get; set; } [DataMember] public string UserID { get; set; } } } }
使用ADO.NetEntity添加数据库
右键单击你的WCF项目然后选择新建ADO.NETEntityDataModel.
选择EFDesignerFromDataBase然后单击下一步
单击新建连接
选择数据库服务器名然后输入你的数据库UserID和密码.我们已经建立了一个MenuDB,所以我们选择这个数据库并单击OK.
单击下一步然后选择我们需要使用的数据表,单击完成.
我们已经创建了ShanuMenuModel
Service1.SVC
“Service.SVC.CS”继承了IService接口并且重写了默认的OperationContract方法.
示例:可以看到我已经实现了IService1在Service1类中,创建一个EntityModel的对象,并且使用GetMenuDetails方法和LinqJoinQuery我们可以获取到主菜单和详情菜单数据.
public class Service1 : IService1 { ShanuMenuCreation_WCF.MenuDBEntities OME; public Service1() { OME = new ShanuMenuCreation_WCF.MenuDBEntities(); } public List<MenuDataContract.MenuDetailDataContract> GetMenuDetails() { ////var query = (from a in OME.MenuDetails //// select a).Distinct(); var query = (from A in OME.MenuMaster join B in OME.MenuDetails on A.Menu_ChildID equals B.Menu_ChildID select new { A.Menu_RootID, B.MDetail_ID, B.Menu_ChildID, B.MenuName, B.MenuDisplayTxt, B.MenuFileName, B.MenuURL , B.UserID }).ToList().OrderBy(q => q.MDetail_ID); List<MenuDataContract.MenuDetailDataContract> MenuList = new List<MenuDataContract.MenuDetailDataContract>(); query.ToList().ForEach(rec => { MenuList.Add(new MenuDataContract.MenuDetailDataContract { MDetail_ID = Convert.ToString(rec.MDetail_ID), Menu_RootID = rec.Menu_RootID, Menu_ChildID = rec.Menu_ChildID, MenuName = rec.MenuName, MenuDisplayTxt = rec.MenuDisplayTxt, MenuFileName = rec.MenuFileName, MenuURL = rec.MenuURL, UserID = rec.UserID, }); }); return MenuList; } }
Web.Config:
对WCF项目的web.config进行下列修改
1)修改<addbinding="basicHttpsBinding"scheme="https"/>为<addbinding="webHttpBinding"scheme="http"/>
2)替换</behaviors>为
<endpointBehaviors><behavior> <webHttp helpEnabled="True"/></behavior> </endpointBehaviors>
运行WCF服务:->现在我们已经创建了WCFRest服务,让我们运行测试一下,使用我们的服务URL,我们可以看到返回的Json结果.
创建MVCWeb应用
现在我们已经完成了WCF,是时候开始创建MVCAngularJS应用了.
我们可以按下列操作添加一个MVCWeb应用项目进去.
右键单击解决方案中的项目,然后选择添加一个新的项目,输入项目名后确定.
选择MVC单击OK
好的,我们已经建好了MVC应用,该添加WCF服务和安装AngularJS包进我们的解决方案了.
添加WCF服务:右键单击MVC解决方案然后选择添加服务引用
输入我们的WCFURL地址
http://localhost:3514/Service1.svc/
输入名称然后单击OK
现在我们已建成功引用了刚写好的WCF进我们的MVC应用.
下一步开始安装AngularJS
右键单击你的MVC项目标然后选择管理NuGetPackages
在线搜索AngularJS.然后单击安装.将AngularJS引入我们的MVC项目中。
按步骤创建AngularJS脚本文件:
右键单击脚本文件夹,然后创建我们的AngularJSModel/Controller和ServicesJs脚本.创建三个JS文件Module.js,Controller.js和Services.js如下图
Modules.js:这里我们可以引用Angular.js脚本,并给模块命名为“RESTClientModule”.
///<referencepath="../angular.js"/>///<referencepath="../angular.min.js"/>varapp;(function(){app=angular.module("RESTClientModule",[]);})();
Services.js:这里我们创建一个shanucontroller.js.用于AngularService"AngularJs_WCFService",你可以用你自定义的名称,但注意须同时修改Controllers.js中的该名称,Angularjs可以接收Json格式数据,这里已完成了调用WCF完成从数据库中数据的获取.
/// <reference path="../angular.js" /> /// <reference path="../angular.min.js" /> /// <reference path="Modules.js" /> app.service("AngularJs_WCFService", function ($http) { //Get Order Master Records this.geMenuDetails = function () { return $http.get("http://localhost:3514/Service1.svc/GetMenuDetails"); }; });
AngularJsController:
这里我们可以添加Module.js和Service.js的引用,和Services类似,我给新建的Controller命名为"AngularJsShanu_WCFController".这个Controller完成了业务逻辑并且从WCF获取返回的Json数据,以给予我们的HtmlPage.
1)变量声明
首先我们声明$scope.date用于存储当前日期.
注意:$scope.subChildIDS="ITM001";这个变量已用于过滤二级菜单.
2)方法
getAllMenuDetails():这个方法用于获取所有的详情菜单Json数据并与MainPage绑定.
$scope.showsubMenu=function(showMenus,ids){}这个方法用于鼠标移入时显示二级详情菜单和添加菜单元素进菜单列表.
shanuController.js全部源码
/// <reference path="../angular.js" /> /// <reference path="../angular.min.js" /> /// <reference path="Modules.js" /> /// <reference path="Services.js" /> app.controller("AngularJsShanu_WCFController", function ($scope, $window, AngularJs_WCFService) { $scope.date = new Date(); $scope.showDetails = false; $scope.showSubDetails = false; $scope.subChildIDS = "ITM001"; $scope.Imagename = "R1.png"; getAllMenuDetails(); //To Get All Records function getAllMenuDetails() { var promiseGet = AngularJs_WCFService.geMenuDetails(); promiseGet.then(function (pl) { $scope.MenuDetailsDisp = pl.data }, function (errorPl) { }); } $scope.showMenu = function (showMenus) { if (showMenus == 1) { $scope.Imagename = "R2.png" $scope.showDetails = true; } else { $scope.Imagename = "R1.png" $scope.showDetails = false; } } $scope.showsubMenu = function (showMenus,ids) { if (showMenus == 1) { $scope.subChildIDS = ids; $scope.showSubDetails = true; } else if(showMenus == 0) { $scope.showSubDetails = false; } else { $scope.showSubDetails = true; } } });
现在我们已经创建了AngularJSModule/Controller/Service,然后下一步要做什么呢?S
创建MVC控制器和视图用于显示我们的结果.
添加控制器
右键菜单Controllers,然后选择创建一个新的MVC5空控制器.
public class MastersController : Controller { // GET: Masters public ActionResult Index() { return View(); } public ActionResult ItemDetails() { return View(); } public ActionResult ItemManage() { return View(); } public ActionResult CATDetails() { return View(); } public ActionResult CATManage() { return View(); } } public class InventoryController : Controller { // GET: Inventory public ActionResult Index() { return View(); } public ActionResult FGIN() { return View(); } public ActionResult FGOUT() { return View(); } }
1)Index视图
在这个视图中设计你的页面并引入Angular.js,Modules.js,Services.js和Controllers.js
在AngularJS中我们使用{{}}绑定或显示数据
首先我创建一个表并加入一些东西
<li data-ng-repeat="menus in MenuDetailsDisp | filter:{Menu_RootID:'Root'}"> @{ var url = Url.Action("{{menus.MenuFileName}}", "{{menus.MenuURL}}", new { id = "{{id=menus.MenuURL}}" }); url = HttpUtility.UrlDecode(url); } <a data-ng-href="@url">{{menus.MenuDisplayTxt}}</a> <ul class="sub-menu"> <li data-ng-repeat="submenus in MenuDetailsDisp | filter:{Menu_RootID:menus.Menu_ChildID}" ng-mouseover="showsubMenu(1,submenus.Menu_ChildID);" ng-mouseout="showsubMenu(0,submenus.Menu_ChildID);"> @{ var url1 = Url.Action("{{submenus.MenuFileName}}", "{{submenus.MenuURL}}", new { id = "{{id=submenus.MenuURL}}" }); url1 = HttpUtility.UrlDecode(url1); } <a data-ng-href="@url1">{{submenus.MenuDisplayTxt}}</a> Here we can see for the 2nd level hierarchy I have filtered by data-ng-repeat="submenus in MenuDetailsDisp | filter :{Menu_RootID:menus.Menu_ChildID}" where menus.Menu_ChildID is the top level menu id. Same like this for 3rd level Hierarchy I will give the 2nd level hierarchy root id as below. Hide Shrink Copy Code <div style="overflow:visible;height:100px;"> <ul class="menu"> <li data-ng-repeat="menus in MenuDetailsDisp | filter:{Menu_RootID:'Root'}"> @{ var url = Url.Action("{{menus.MenuFileName}}", "{{menus.MenuURL}}", new { id = "{{id=menus.MenuURL}}" }); url = HttpUtility.UrlDecode(url); } <a data-ng-href="@url">{{menus.MenuDisplayTxt}}</a> <ul class="sub-menu"> <li data-ng-repeat="submenus in MenuDetailsDisp | filter:{Menu_RootID:menus.Menu_ChildID}" ng-mouseover="showsubMenu(1,submenus.Menu_ChildID);" ng-mouseout="showsubMenu(0,submenus.Menu_ChildID);"> @{ var url1 = Url.Action("{{submenus.MenuFileName}}", "{{submenus.MenuURL}}", new { id = "{{id=submenus.MenuURL}}" }); url1 = HttpUtility.UrlDecode(url1); } <a data-ng-href="@url1">{{submenus.MenuDisplayTxt}}</a> <ul ng-show="showSubDetails" class="sub-menu2"> <li data-ng-repeat="sub1menus in MenuDetailsDisp | filter:{Menu_RootID:subChildIDS}" ng-mouseover="showsubMenu(3,9);"> @{ var url2 = Url.Action("{{sub1menus.MenuFileName}}", "{{sub1menus.MenuURL}}", new { id = "{{id=sub1menus.MenuURL}}" }); url2 = HttpUtility.UrlDecode(url2); } <a data-ng-href="@url2">{{sub1menus.MenuDisplayTxt}}</a> </li> </ul> </li> </ul> </li> </ul> </div>
我们可以看到2级菜单已经过滤,被data-ng-repeat="submenusinMenuDetailsDisp|filter:{Menu_RootID:menus.Menu_ChildID}"wheremenus.Menu_ChildID是顶级菜单ID。
同三级分级一样,我将给二级菜单rootid如下.
好的,运行程序吧
<li data-ng-repeat="menus in MenuDetailsDisp | filter:{Menu_RootID:'Root'}"> @{ var url = Url.Action("{{menus.MenuFileName}}", "{{menus.MenuURL}}", new { id = "{{id=menus.MenuURL}}" }); url = HttpUtility.UrlDecode(url); } <a data-ng-href="@url">{{menus.MenuDisplayTxt}}</a> <ul class="sub-menu"> <li data-ng-repeat="submenus in MenuDetailsDisp | filter:{Menu_RootID:menus.Menu_ChildID}" ng-mouseover="showsubMenu(1,submenus.Menu_ChildID);" ng-mouseout="showsubMenu(0,submenus.Menu_ChildID);"> @{ var url1 = Url.Action("{{submenus.MenuFileName}}", "{{submenus.MenuURL}}", new { id = "{{id=submenus.MenuURL}}" }); url1 = HttpUtility.UrlDecode(url1); } <a data-ng-href="@url1">{{submenus.MenuDisplayTxt}}</a> Here we can see for the 2nd level hierarchy I have filtered by data-ng-repeat="submenus in MenuDetailsDisp | filter :{Menu_RootID:menus.Menu_ChildID}" where menus.Menu_ChildID is the top level menu id. Same like this for 3rd level Hierarchy I will give the 2nd level hierarchy root id as below. Hide Shrink Copy Code <div style="overflow:visible;height:100px;"> <ul class="menu"> <li data-ng-repeat="menus in MenuDetailsDisp | filter:{Menu_RootID:'Root'}"> @{ var url = Url.Action("{{menus.MenuFileName}}", "{{menus.MenuURL}}", new { id = "{{id=menus.MenuURL}}" }); url = HttpUtility.UrlDecode(url); } <a data-ng-href="@url">{{menus.MenuDisplayTxt}}</a> <ul class="sub-menu"> <li data-ng-repeat="submenus in MenuDetailsDisp | filter:{Menu_RootID:menus.Menu_ChildID}" ng-mouseover="showsubMenu(1,submenus.Menu_ChildID);" ng-mouseout="showsubMenu(0,submenus.Menu_ChildID);"> @{ var url1 = Url.Action("{{submenus.MenuFileName}}", "{{submenus.MenuURL}}", new { id = "{{id=submenus.MenuURL}}" }); url1 = HttpUtility.UrlDecode(url1); } <a data-ng-href="@url1">{{submenus.MenuDisplayTxt}}</a> <ul ng-show="showSubDetails" class="sub-menu2"> <li data-ng-repeat="sub1menus in MenuDetailsDisp | filter:{Menu_RootID:subChildIDS}" ng-mouseover="showsubMenu(3,9);"> @{ var url2 = Url.Action("{{sub1menus.MenuFileName}}", "{{sub1menus.MenuURL}}", new { id = "{{id=sub1menus.MenuURL}}" }); url2 = HttpUtility.UrlDecode(url2); } <a data-ng-href="@url2">{{sub1menus.MenuDisplayTxt}}</a> </li> </ul> </li> </ul> </li> </ul> </div>
初次翻译,如有错误请见谅.
优质内容筛选与推荐>>