ASP。NET MVC用户角色基础菜单管理使用WEB API和AngularJS
介绍 在开始这篇文章之前，请浏览我的前一篇文章。NET MVC 5的安全性和用户角色的创建。详细说明了asp.net MVC 5的安全性和用户角色的创建。NET标识和创建用户角色 在本文中，我们将看到如何使用ASP创建和管理基于用户角色的菜单。NET MVC, WEB API和AngularJS。 在这里我们将看到如何， 通过管理员管理菜单(只有管理员用户可以查看所有/创建/删除和编辑菜单)。创建菜单,用户角色(管理员可以创建菜单,选择用户角色)显示和隐藏动态菜单和子菜单通过用户角色动态显示菜单用户角色(这里我们有提到动态菜单在每一页或主页,我们将从数据库加载菜单和显示菜单向每个用户的角色)。 为什么我们需要创建一个动态菜单 如果我们工作在一个简单的网站创建只有很少的页面，只有一个程序员的工作是创建一个网站，那么在这种情况下，我们可以创建一个静态菜单，并在我们的网站使用它。 现在让我们考虑我们需要为一个大型web应用程序项目工作。让我们考虑一下ERP Web应用程序的开发。 但是，如果有两个以上的开发人员在工作，并且页面的数量可能超过50到100个，那么就很难维护一个静态菜单。 此外，在web项目中删除和添加一个新菜单项的可能性更大，例如，我们的客户端可以要求添加5个新菜单或删除1个菜单项。 在这种情况下，移除当前活动的菜单项将是一项非常困难的任务。 对于像ERP这样的大型web项目，我们需要根据用户角色显示菜单。如果我们使用静态菜单，那么将很难管理菜单的用户。 为了避免这一切，我们创建了一个带有用户角色设置的菜单管理。 谁能管理菜单 这是一个非常重要的部分，因为管理员或超级用户可以添加/编辑/删除菜单。 当管理员登录时，他可以添加一个新的菜单，编辑一个现有的菜单和删除一个菜单项显示。 在本文中，我们将详细介绍如何由管理员用户创建CRUD(插入/更新/选择和编辑)菜单，并使用ASP按用户角色向登录用户显示管理员创建的菜单。NET MVC, WEB API和AngularJS。 你也可以查看我们之前的文章，它解释了如何使用MVC, AngularJS和WCF REST Service 链接来动态显示菜单 先决条件 Visual Studio 2015:你可以从这里下载。 使用的代码 创建数据库和表 这是我们上一篇文章的延续，正如我们所说的，我们将为两个ASP使用一个公共数据库。NET标识表和我们自己的新表 在上一篇文章中，我们解释了如何创建用户角色，在用户注册期间，用户可以选择自己的角色。 在这里，对于角色基础菜单管理，我们需要在ASP之间建立一个关系表。NET Roles表和我们的菜单表。 让我们详细看看如何创建与ASP有关系的新菜单表。NET身份AspNetRoles表。 这里我们可以看到用于MenuMaster的字段。 在这里，我们可以看到Admin角色用户登录和Admin菜单显示。 在这里，我们可以看到Manager角色用户登录和显示了Manager的菜单。 在这里，我们可以看到Employee角色用户登录和为Employee显示的菜单。 菜单主表和存储过程用于菜单CRUD操作 我们将使用我们在上一篇文章中使用的现有数据库。NET MVC 5的安全性和创建用户角色(链接上面)。 下面是创建表的脚本，在SQL服务器中运行该脚本。我用过SQL Server 2014. 隐藏,收缩,复制Code
USE AttendanceDB GO IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'MenuMaster' ) DROP TABLE MenuMaster GO CREATE TABLE MenuMaster ( MenuIdentity int identity(1,1), MenuID VARCHAR(30) NOT NULL, MenuName VARCHAR(30) NOT NULL, Parent_MenuID VARCHAR(30) NOT NULL, User_Roll [varchar](256) NOT NULL, MenuFileName VARCHAR(100) NOT NULL, MenuURL VARCHAR(500) NOT NULL, USE_YN Char(1) DEFAULT 'Y', CreatedDate datetime CONSTRAINT [PK_MenuMaster] PRIMARY KEY CLUSTERED ( [MenuIdentity] ASC , [MenuID] ASC, [MenuName] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] select * from MenuMaster
在创建表之后，我们将为CRUD操作创建一个存储过程。首先，运行以下脚本创建存储过程。每个程序都有其用途的说明。 隐藏,收缩,复制Code
-- 1) Stored procedure To Select all user roles -- Author : Shanu -- Create date : 2016-01-30 -- Description :select all AspNetRoles all roll name to display in Combobox for menu creation. -- Tables used : AspNetRoles -- Modifier : Shanu -- Modify date : 2016-01-30 -- ============================================= -- To Select all user roles -- EXEC USP_UserRoles_Select '' -- ============================================= CREATE PROCEDURE [dbo].[USP_UserRoles_Select] ( @Rolename VARCHAR(30) = '' ) AS BEGIN Select ID,Name FROM AspNetRoles WHERE Name like @Rolename +'%' END -- 2) Stored procedure To Select all Menu -- Author : Shanu -- Create date : 2016-01-30 -- Description :select all MenuMaster detail -- Tables used : MenuMaster -- Modifier : Shanu -- Modify date : 2016-01-30 -- ============================================= -- To Select all menu master for Admin user. -- EXEC USP_Menu_Select '','' -- ============================================= CREATE PROCEDURE [dbo].[USP_Menu_Select] ( @MenuID VARCHAR(30) = '', @MenuName VARCHAR(30) = '' ) AS BEGIN Select MenuIdentity , MenuID , MenuName , Parent_MenuID , User_Roll, MenuFileName , MenuURL , USE_YN , CreatedDate FROM MenuMaster WHERE MenuID like @MenuID +'%' AND MenuName like @MenuName +'%' -- AND USE_YN ='Y' ORDER BY MenuName,MenuID END -- 3) Stored procedure To Select Menu by Logged in User Roll -- Author : Shanu -- Create date : 2016-01-30 -- Description :select all AspNetRoles all roll name -- Tables used : AspNetRoles -- Modifier : Shanu -- Modify date : 2016-01-30 -- ============================================= -- To Select all user roles -- EXEC USP_MenubyUserRole_Select 'Admin' -- ============================================= CREATE PROCEDURE [dbo].[USP_MenubyUserRole_Select] ( @Rolename VARCHAR(30) = '' ) AS BEGIN Select MenuIdentity , MenuID , MenuName , Parent_MenuID , User_Roll, MenuFileName , MenuURL , USE_YN , CreatedDate FROM MenuMaster WHERE User_Roll = @Rolename AND USE_YN ='Y' ORDER BY MenuName,MenuID END -- 4) Stored procedure To Insert Menu -- Author : Shanu -- Create date : 2016-01-30 -- Description :To Insert MenuMaster detail -- Tables used : MenuMaster -- Modifier : Shanu -- Modify date : 2016-01-30 -- ============================================= -- To Select all user roles -- ============================================= CREATE PROCEDURE [dbo].[USP_Menu_Insert] ( @MenuID VARCHAR(30) = '', @MenuName VARCHAR(30) = '', @Parent_MenuID VARCHAR(30) = '', @User_Roll VARCHAR(200) = '', @MenuFileName VARCHAR(100) = '', @MenuURL VARCHAR(500) = '', @USE_YN VARCHAR(1) = '' ) AS BEGIN IF NOT EXISTS (SELECT * FROM MenuMaster WHERE MenuID=@MenuID and MenuName=@MenuName) BEGIN INSERT INTO MenuMaster ( MenuID , MenuName , Parent_MenuID , User_Roll, MenuFileName , MenuURL , USE_YN , CreatedDate ) VALUES ( @MenuID , @MenuName , @Parent_MenuID , @User_Roll, @MenuFileName , @MenuURL , @USE_YN , GETDATE()) Select 'Inserted' as results END ELSE BEGIN Select 'Exists' as results END END -- 5) Stored procedure To Update Menu -- Author : Shanu -- Create date : 2016-01-30 -- Description :To Update MenuMaster detail -- Tables used : MenuMaster -- Modifier : Shanu -- Modify date : 2016-01-30 -- ============================================= -- To Select all user roles -- ============================================= CREATE PROCEDURE [dbo].[USP_Menu_Update] ( @MenuIdentity Int=0, @MenuID VARCHAR(30) = '', @MenuName VARCHAR(30) = '', @Parent_MenuID VARCHAR(30) = '', @User_Roll VARCHAR(200) = '', @MenuFileName VARCHAR(100) = '', @MenuURL VARCHAR(500) = '', @USE_YN VARCHAR(1) = '' ) AS BEGIN IF EXISTS (SELECT * FROM MenuMaster WHERE MenuIdentity=@MenuIdentity ) BEGIN UPDATE MenuMaster SET MenuID=@MenuID, MenuName=MenuName, Parent_MenuID=@Parent_MenuID, User_Roll=@User_Roll, MenuFileName=@MenuFileName, MenuURL=@MenuURL, USE_YN=@USE_YN WHERE MenuIdentity=@MenuIdentity Select 'updated' as results END ELSE BEGIN Select 'Not Exists' as results END END -- 6) Stored procedure To Delete Menu -- Author : Shanu -- Create date : 2016-01-30 -- Description :To Delete MenuMaster detail -- Tables used : MenuMaster -- Modifier : Shanu -- Modify date : 2016-01-30 -- ============================================= -- To Select all user roles -- ============================================= Create PROCEDURE [dbo].[USP_Menu_Delete] ( @MenuIdentity Int=0 ) AS BEGIN DELETE FROM MenuMaster WHERE MenuIdentity=@MenuIdentity END
在Visual Studio 2015中创建你的MVC Web应用程序 正如我们在上一篇文章中提到的，我们将使用我们在上一篇文章中使用的现有项目，您可以下载源代码。 单击“开始”，然后单击“程序”并选择Visual Studio 2015——单击Visual Studio 2015。 单击“打开项目”，转到下载的项目文件夹并打开解决方案文件。 使用ADO添加数据库。NET实体数据模型 右键单击我们的项目，然后单击Add，然后单击New Item。Select 数据,then , ADO。NET实体数据模型，并给我们的EF命名并点击。 选择“EF Designer from database”，然后单击下一步。 这里我们不需要创建一个新的连接，因为我们可以使用我们用于ASP的现有连接。NET身份用户注册和登录。单击Next选择用于菜单管理的表和存储过程。 在这里，我们可以看到新创建的MenuMaster表与现有的ASP。净一致格已经选择ty表和所有新创建的存储过程来执行菜单CRUD操作。 现在我们可以看到我们已经创建了UsermenuModel 实体创建之后，下一步是向控制器添加Web API，并编写用于选择/插入/更新和删除的函数。 添加Web API控制器的过程 右键单击“控制器”文件夹，单击“添加”，然后单击“控制器”。 选择Web API 2控制器-空，单击添加并为我们的Web API控制器指定名称。 注意:在这里，我们使用的是我们现有的MVC项目，我们没有创建带有选项selected作为WEB API的MVC项目。因此，当我们添加一个WEB API控制器时，我们可以看到下面的readme文本 为了在非WEB API MVC项目中使用WEB API，我们需要像下面这样在全局中添加上面提到的引用和配置。asax文件。 当我们向全球开放。asax文件，我们可以看到System.Web。Http引用丢失，而且Application_Start中没有添加全局配置。 这里我们添加参考和全局配置像下面使用WEB API。 隐藏,复制Code
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Optimization; using System.Web.Routing; using System.Web.Http; namespace shanuMVCUserRoles { public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { AreaRegistration.RegisterAllAreas(); GlobalConfiguration.Configure(WebApiConfig.Register); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles); } } }
在App_Star中，WebApiConfig.cs更改routeTemplate，如下所示， 隐藏,复制Code
using System; using System.Collections.Generic; using System.Linq; using System.Web.Http; namespace shanuMVCUserRoles { public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web API configuration and services // Web API routes config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", // routeTemplate: "api/{controller}/{id}", routeTemplate: "api/{controller}/{action}/{id}", defaults: new { id = RouteParameter.Optional } ); } } }
为CRUD使用WEBAPI控制器 选择Controller并添加一个空的Web API 2控制器。向Web API控制器提供您的名称并单击OK。这里我给Web API控制器命名为MenuAPIController。 当我们创建了Web API控制器时，我们可以看到我们的控制器被ApiController继承了。 我们都知道，Web API是为浏览器和移动设备构建HTTP服务的一种简单而容易的方法。 Web API有以下四种方法:Get/Post/Put和delete&put: 是请求数据。(选择)post 是创建一个数据。(插入)put 是更新数据。删除就是删除数据。 Get方法 在我们的示例中，我只使用了Get方法，因为我只使用了一个存储过程。我们需要为实体创建一个对象，并编写Get方法来执行选择/插入/更新和删除操作。 选择操作 我们使用一个get方法来使用一个实体对象来获得MenuMasters 表的所有细节，并且我们返回结果为IEnumerable。我们在AngularJS中使用这个方法，并将结果显示在来自AngularJS控制器的MVC页面中。使用Ng-Repeat，我们可以绑定细节。 这里我们可以看到，在getmenucrudselectmethod中，我已经将搜索参数传递给了theusp_menu_selectprocedure。在存储过程中，如果搜索参数为空，我使用“%”来返回所有记录。 隐藏,复制Code
// to Search Menu Details and display the result [HttpGet] public IEnumerable<USP_Menu_Select_Result> getMenuCRUDSelect(string menuID, string menuName) { if (menuID == null) menuID = ""; if (menuName == null) menuName = ""; return objapi.USP_Menu_Select(menuID, menuName).AsEnumerable(); }
我们又创建了一个选择方法，使用AngularJS. 使所有用户角色绑定到MVC视图的ComboBox中。 隐藏,复制Code
// To get all user role from ASPNETRoels Table [HttpGet] public IEnumerable<USP_UserRoles_Select_Result> getUserRoleDetails(string UserRole) { if (UserRole == null) UserRole = ""; return objapi.USP_UserRoles_Select(UserRole).AsEnumerable(); }
接下来，我们还有一个选择方法。这个方法将用于根据每个用户的登录角色显示菜单。 隐藏,复制代码//以用户角色获取所有菜单，在用户页面中动态绑定菜单 ,,,,(HttpGet), ,,,,公共IEnumerable< USP_MenubyUserRole_Select_Result>getMenubyUserRole(字符串UserRole), ,,,,{, ,,,,,,如果(UserRole == null) ,,,,,,,,UserRole = " ";, ,,,,,,返回objapi.USP_MenubyUserRole_Select (UserRole) .AsEnumerable ();, ,,,,}, 在这里的示例中，我们为选择/插入/更新和删除操作使用了get方法，因为在插入/更新和删除之后的存储过程中，我已经从数据库返回了消息。 插入操作 与select一样，我们将所有参数传递给insert过程。插入方法将在插入或未插入记录时从数据库返回结果。我们将从AngularJS控制器中获取结果并显示到MVC应用程序中。 隐藏,复制代码//插入新的菜单细节 ,,,,(HttpGet), ,,,,公共IEnumerable< string>插入菜单(字符串menuID，字符串menuName，字符串parentMenuID，字符串UserRole，字符串menuFileName，字符串MenuURL，字符串UseYN) ,,,,{, ,,,,,,objapi返回。USP_Menu_Insert(menuID, menuName, parentMenuID, UserRole, menuFileName, MenuURL, UseYN).AsEnumerable();, ,,,,}, 更新操作 与Insert一样，我们也将所有参数传递给了更新过程。这个更新方法将从数据库返回一个记录是否被更新的结果。 隐藏,复制代码//更新菜单细节 ,,,,(HttpGet), ,,,,public IEnumerable< string>updateMenu(int MenuIdentity, string menuID, string menuID, string parentMenuID, string UserRole, string menuFileName, string MenuURL, string UseYN) ,,,,{, ,,,,,,objapi返回。USP_Menu_Update(MenuIdentity, menuID, menuName, parentMenuID, UserRole, menuFileName, MenuURL, UseYN).AsEnumerable();, ,,,,}, 更新操作 与Insert一样，我们也将所有参数传递给了更新过程。这个更新方法将从数据库返回一个记录是否被更新的结果。 隐藏,复制代码//更新菜单细节 ,,,,(HttpGet), ,,,,公共IEnumerable< string>updateMenu(int MenuIdentity, string menuID, string menuID, string parentMenuID, string UserRole, string menuFileName, string MenuURL, string UseYN) ,,,,{, ,,,,,,objapi返回。USP_Menu_Update(MenuIdentity, menuID, menuName, parentMenuID, UserRole, menuFileName, MenuURL, UseYN).AsEnumerable();, ,,,,}, 删除操作 和Insert一样，我们将所有参数传递给Delete过程。这个Delete方法将从数据库中返回一个记录是否被删除。 隐藏,复制代码//删除菜单细节 ,,,,(HttpGet), ,,,,公共字符串deleteMenu(int MenuIdentity) ,,,,{, ,,,,,,objapi.USP_Menu_Delete (MenuIdentity);, ,,,,,,objapi.SaveChanges ();, ,,,,,,返回“删除”;, ,,,,}, 创建AngularJS控制器 首先，在Scripts 文件夹中创建一个文件夹，我们将该文件夹命名为“MyAngular”。 现在将你的Angular控制器添加到这个文件夹中。 右键单击MyAngular文件夹，然后单击添加和新建项目。然后选择web&angularjs控制器并为控制器提供一个名称。我把我的AngularJS控制器命名为“Controller.js”。 一旦创建了AngularJS控制器，我们可以看到默认情况下，控制器将拥有带有默认模块定义的代码和所有内容。 如果缺少AngularJS包，则将该包添加到您的项目中。 右键单击您的MVC项目并单击管理NuGet包。搜索AngularJS并点击安装。 为菜单菜单创建AngularJS脚本文件的过程 js:在这里，我们将添加对 隐藏,复制代码// <reference path="../angular。js " /比;,, / / / & lt; = " . . / angular.min参考路径。js " /比;,,, / / / & lt; = " . . / angular-animate参考路径。js " /比;,,, / / / & lt; = " . . / angular-animate.min参考路径。js " /比;,,, var的应用;, (function () { ,,应用=角。模块(“RESTClientModule”,[' ngAnimate ']);, }) ();, 控制器:在AngularJS控制器中，我已经完成了所有的业务逻辑并将数据从Web API返回到我们的MVC HTML页面。 1. 变量声明 首先，我们声明了所有需要使用的局部变量。 隐藏,Codeapp副本。函数($scope， $timeout， $rootScope， $window， $http) { ,,美元的范围。date = new date ();, ,,美元的范围。的名字= " shanu”;, ,,美元的范围。sMenuID = " ";, ,,美元的范围。sMenuName = " ";, ,, ,,美元的范围。showMenuAdd = true;, ,,美元的范围。addEditMenu = false;, ,,美元的范围。MenuList = true;, ,,美元的范围。showItem = true;, ,,美元的范围。userRoleName = $("#txtuserRoleName").val();//这是隐藏的文本框，它将存储我们登录的用户角色名。, ,,//此变量将用于插入/编辑/删除菜单细节。菜单id，菜单名，parentMenuID，用户角色，菜单文件名，菜单url, UseYN ,,美元的范围。MenuIdentitys = 0;, ,,美元的范围。menuIDs = " ";, ,,美元的范围。menuNames = " ";, ,,美元的范围。parentMenuIDs = " ";, ,,美元的范围。selectedUserRole = " ";, ,,美元的范围。menuFileNames = " ";, ,,美元的范围。MenuURLs = " ";, ,,美元的范围。UseYNs = true;, ,,美元的范围。searchRoleName = " ";, 2. 方法 选择Method 在select方法中，我使用了$http.get 来从Web API获取详细信息。在get方法中，我将提供API控制器名称和方法来获取细节。这里我们可以看到我已经传递了搜索参数OrderNO和TableID使用: 隐藏,复制代码{params: {menuID: menuID, menuName: menuName}, 最终结果将使用data-ng-repeat. 显示到MVC HTML页面。 隐藏,收缩,复制代码//此方法用于搜索和显示要显示、编辑和删除的菜单细节。 ,,选择MenuDetails(美元范围。sMenuID scope.sMenuName美元);, ,, ,,函数selectMenuDetails(menuID, menuName) { ,,,, ,,,,美元http。get('/api/MenuAPI/getMenuCRUDSelect/'， {params: {menuID: menuID, menuName: menuName}})。成功(function (data) { ,,,,,,美元的范围。MenuData =数据;, ,,,,,,美元的范围。showMenuAdd = true;, ,,,,,,美元的范围。addEditMenu = false;, ,,,,,,美元的范围。MenuList = true;, ,,,,,,美元的范围。showItem = true;, ,, ,,,,,,如果(scope.MenuData美元。长度比;0) {, ,,,,,,}, ,,,,}), ,,。error(function () { ,,,美元的范围。"加载文章时发生错误!";, ,,});, ,, ,,,,//这里我们调用所有创建的菜单细节来绑定到选择列表中，以便创建子菜单。 ,,,,美元http。获取('/api/MenuAPI/getMenuCRUDSelect/'， {params: {menuID: ""， menuName: ""}})。成功(function (data) { ,,,,,,美元的范围。MenuDataSelect =数据;,,,,, ,,,,,,, ,,,,}), ,.error(function ()} ,,,美元的范围。"加载文章时发生错误!";, ,});, ,,,,,,,,, ,,}, ,, ,,/ /搜索, ,,美元的范围。searchMenuDetails = function () { ,, ,,,,selectMenuDetails($范围。sMenuID scope.sMenuName美元);, ,,}, 搜索按钮Click 隐藏,收缩,复制代码<表格样式="color:#9F000F;font-size:large" cellpadding="4" cellspacing="6">, ,, ,,,,,,,,,,,,,,,,,,,,,,& lt; tr>, ,,,,,,,,,,,,,,,,,,,,,,,,& lt; td>, ,,,,,,,,,,,,,,,,,,,,,,,,,,& lt; b>菜单ID< / b>, ,,,,,,,,,,,,,,,,,,,,,,,,& lt; / td>, ,, ,,,,,,,,,,,,,,,,,,,,,,,,& lt; td>, ,,,,,,,,,,,,,,,,,,,,,,,,,,: <input type="text" name="txtMenuID" ng-model="sMenuID" value="" />, ,,,,,,,,,,,,,,,,,,,,,,,,,,& lt; br /比;, ,,,,,,,,,,,,,,,,,,,,,,,,& lt; / td>, ,, ,,,,,,,,,,,,,,,,,,,,,,,,& lt; td>, ,,,,,,,,,,,,,,,,,,,,,,,,,,& lt; b>,菜单名称& lt; / b>, ,,,,,,,,,,,,,,,,,,,,,,,,& lt; / td>, ,, ,,,,,,,,,,,,,,,,,,,,,,,,& lt; td>, ,,,,,,,,,,,,,,,,,,,,,,,,&,,:, ,,,,,,,,,,,,,,,,,,,,,,,,,,<input type="text" name="txtMenuName" ng-model="sMenuName" />, ,, ,,,,,,,,,,,,,,,,,,,,,,,,& lt; / td>, ,,,,,,,,,,,,,,,,,,,,,,,,& lt; td>, ,,,,,,,,,,,,,,,,,,,,,,,,,,input type="submit" value="Search" style="background-color:#336699;color:#FFFFFF" ng-click="searchMenuDetails()"/比;, ,, ,,,,,,,,,,,,,,,,,,,,,,,,& lt; / td>, ,,,,,,,,,,,,,,,,,,,,,,& lt; / tr>, ,, ,, ,,,,,,,,,,,,,,,,,,,,时间/ table> & lt; 插入新菜单母版 在添加/编辑菜单详细信息按钮，我们将使可见的MenuAdd表详细信息，管理用户可以输入新的菜单信息。对于一个新菜单，我们将把菜单ID设为0。在新的菜单中点击save按钮，我们将调用save方法。 隐藏,复制代码//新菜单添加详细信息 ,,美元的范围。showMenuAddDetails = function () { ,,,,cleardetails ();, ,,,,美元的范围。showMenuAdd = true;, ,,,,美元的范围。addEditMenu = true;, ,,,,美元的范围。MenuList = true;, ,,,,美元的范围。showItem = true;,, ,,}, 用户角色绑定到Combobox 为了创建新的菜单，管理员需要选择用户角色。为此，我们将绑定所有的ASP。NET Roles将所有角色详细信息表到组合框中。 AngularJS控制中心部分: 使用我们的WEbAPI，我们获得所有的用户角色并将结果存储在$scope.userRoleData中 隐藏,这个方法是将所有的UserRole和绑定到dropdownbox选择，以便根据用户角色创建菜单。,, 选择userRoleDetails ($ scope.searchRoleName);, //此方法是获取所有UserRole并绑定到dropdownbox选择，以便根据用户角色创建菜单。,, 函数selectuerRoleDetails(UserRole) {,,, ,,美元http。get('/api/MenuAPI/getUserRoleDetails/'， {params: {UserRole: UserRole}})。成功(function (data) { ,,,, ,,,,美元的范围。userRoleData =数据;, ,,}), rror(函数){ ,美元的范围。"加载文章时发生错误!";,, }, Html部分绑定Combobox与用户角色 隐藏,Copy Code<select name="opSelect" id="opSelect" ng-model="selectedUserRole">, option value="" selected>- Select -</option>, option ng-repeat="option in userRoleData" value="{{option.Name}}">{{option.Name}}}</option>, & lt; / select>, 父菜单ID绑定到组合框 创建子菜单管理可以选择父菜单从组合框。每次当管理员创建一个菜单，主菜单ID将被添加到这个组合框创建子菜单。 AngularJS控制中心部分: 使用我们的WEbAPI，我们获得所有的用户角色并将结果存储在$scope.userRoleData中 Html部分绑定组合框与父菜单ID 隐藏,Copy Code<select name="opSelect" id="opSelect" ng-model="parentMenuIDs">, & lt;选项值= " * " selected> * & lt; / option>, ,<option ng-repeat="option in MenuDataSelect" value="{{option. menuid}}">, & lt; / select>, 在保存方法中，我将检查MenuIdentity。如果菜单是“0”，那么它将插入新的菜单主菜单。在这里，我们将调用Insert Web API方法，如果菜单为0那么它意味着要更新菜单记录，然后我们将调用update Web API方法。 隐藏,收缩,复制代码//保存菜单 ,,美元的范围。saveDetails = function () { ,,,,如果美元范围。selectedUserRole == "") & ,,,,{, ,,,,,,警报(“选择用户角色”);, ,,,,,,返回;, ,,,,}, ,,,,, ,,,,如果美元范围。parentMenuIDs == "") { ,,,,,,alert("选择父ID”);, ,,,,,,返回;, ,,,,}, ,, ,,,,美元的范围。IsFormSubmitted = true;, ,,,,if ($scope.IsFormValid) { ,,,,,,, ,,,,,,如果美元范围。UseYNs == true ,,,,,,{, ,,,,,,,,美元的范围。UseYNsN = " Y ";, ,,,,,,}, ,,,,,,其他的, ,,,,,,{, ,,,,,,,,美元的范围。UseYNsN =“N”;, ,,,,,,}, ,,,,,,, ,, ,,,,,,//如果MenuIdentity ID=0表示它的新菜单插入在这里，我将调用Web api插入方法 ,,,,,,如果美元范围。MenuIdentitys == 0) { ,, ,,,,,,,,美元http。获取('/api/MenuAPI/insertMenu/'， {params: {menuID: $scope。menuIDs menuName:美元范围。menuNames parentMenuID:美元范围。parentMenuIDs UserRole:美元范围。selectedUserRole menuFileName:美元范围。menuFileNames MenuURL:美元范围。MenuURLs UseYN:美元范围。UseYNsN}})。成功(function (data) { ,, ,,,,,,,,,,美元的范围。menuInserted =数据;, ,,,,,,,,,,警报($ scope.menuInserted);, ,, ,, ,,,,,,,,,,cleardetails ();, ,,,,,,,,,,selectMenuDetails (", ");, ,,,,,,,,,,selectMenubyUserRoleDetails ($ scope.userRoleName);, ,,,,,,,,}), ,,,,,。error(function () { ,,,,,,美元的范围。"加载文章时发生错误!";, ,,,,,});, ,,,,,,}, ,,,,,,, ,, ,,,,,,else{//更新到菜单细节 ,,,,,,,,美元http。获取('/api/MenuAPI/updateMenu/'， {params: {MenuIdentity: $scope。MenuIdentitys menuID:美元范围。menuIDs menuName:美元范围。menuNames parentMenuID:美元范围。parentMenuIDs UserRole:美元范围。selectedUserRole menuFileName:美元范围。menuFileNames MenuURL:美元范围。MenuURLs UseYN:美元范围。UseYNsN}})。成功(function (data) { ,,,,,,,,,,美元的范围。menuUpdated =数据;, ,,,,,,,,,,警报($ scope.menuUpdated);, ,, ,,,,,,,,,,cleardetails ();, ,,,,,,,,,,selectMenuDetails (", ");, ,,,,,,,,,,selectMenubyUserRoleDetails ($ scope.userRoleName);, ,,,,,,,,}), ,,,,.error(function ()} ,,,,,,美元的范围。"加载文章时发生错误!";, ,,,,});, ,,,,,,}, ,, ,,,,}, ,,,,{,其他 ,,,,,,美元的范围。Message = "所有字段都是必需的";, ,,,,}, ,, ,,,,美元的范围。IsFormSubmitted = false;, ,,}, 首先，我们检查admin已经选择用户角色和ParentMenuID来创建新菜单。然后检查是否选中了对用户可见的菜单。如果它被检查，那么我们插入状态' Y ' else ' N '。为了显示菜单，我们选择菜单可见状态仅为' Y '。为了插入Web API方法，我们将传递所有的输入参数。在存储过程中，我们将检查菜单的菜单ID是否已经存在。如果菜单ID在数据库中不存在，那么我们将插入记录，并返回成功消息作为“插入”，如果菜单ID已经存在，那么我们将返回消息作为“存在”。 这里我们可以看到admin已经创建新菜单和选择的用户角色为员工，parentMenuID为“*”，这意味着这个新创建的将只对员工角色用户可见，甚至管理员和父菜单ID为“*”，这是显示菜单作为根菜单项。这里我们给控制器命名为“Message”。现在我们将创建一个新的控制器作为“message”，并为该控制器添加一个具有简单消息显示的默认索引视图。 让我们以员工用户的身份登录到MVC应用程序，看看新创建的菜单是如何显示的。 更新菜单主 在这里，我们再次作为Admin用户登录来编辑新创建的菜单。现在我们可以看到，我们可以点击编辑图标来编辑所选菜单的详细信息。现在我们将把父菜单id ' * '改为显示为员工仪表板的子菜单。 现在，我们再次以雇员用户的身份登录，并检查如何将菜单显示为子菜单。 更新菜单显示状态 现在让我们看看如何更新菜单，使其对用户不可见。我们登录作为管理用户和编辑菜单和取消菜单可见(是/否)复选框，并点击保存。 如果雇员用户登录到此菜单，可见设置为' N '菜单将不会显示给他。这里我们可以看到员工角色用户登录，他/她只能查看一个菜单，之前显示的“message”菜单现在没有显示。 删除订单主详细信息 在单击Delete按钮时，我们将向用户显示是否删除菜单的确认消息。如果用户单击OK按钮，我们将把menuID传递给Web API的delete方法，以从数据库中删除记录。 隐藏,复制代码//删除菜单细节 ,,美元的范围。= function MenuDelete(MenuIdentity, menuName) { ,,,,cleardetails ();, ,,,,美元的范围。MenuIdentitys = MenuIdentity;, ,,,,var delConfirm = confirm("确定要删除学生" + menuName + " ?");, ,,,,if (delConfirm == true) { ,, ,,,,,,美元http。获取('/api/MenuAPI/deleteMenu/'， {params: {MenuIdentity: $scope。MenuIdentitys}})。成功(function (data) { ,,,,,,,,警报(“菜单成功删除! !”);, ,,,,,,,,cleardetails ();, ,,,,,,,,selectMenuDetails (", ");, ,,,,,,}), ,,,.error(function ()} ,,,,,美元的范围。"加载文章时发生错误!";, ,,,});, ,, ,,,,}, ,,}, 按用户角色显示菜单 为了按用户角色显示菜单，我们将把登录的用户角色传递给webAPI方法，以获取登录的用户角色用户的所有菜单详细信息。在AngularJS控制器中，我们将从隐藏的字段中获得登录的用户角色，在我们的MVC页面中，我们将登录的用户角色绑定到隐藏的字段。 隐藏,复制代码<input type="hidden" id="txtuserRoleName" value="@ViewBag。UserRole”/比;, 我们在我们的AngularJS控制器中获得这个隐藏的字段值，并通过user角色来获得所有登录用户角色的菜单。 隐藏,收缩,复制代码美元范围。userRoleName = $ (" # txtuserRoleName”).val ();, ,, / / * * * * * * * * * *——Disoplay菜单的用户角色,* * * * * * * * * * * * * * *, ,//此方法将获取登录用户的所有菜单细节。绑定此结果以创建菜单。 ,,selectMenubyUserRoleDetails ($ scope.userRoleName);, ,//此方法将获取登录用户的所有菜单细节。绑定此结果以创建菜单。 ,,函数selectMenubyUserRoleDetails(UserRole) { ,,,, / /警报($ scope.userRoleName);, ,,,,美元http。获取('/api/MenuAPI/getMenubyUserRole/'， {params: {UserRole: $scope。userRoleName}})。成功(function (data) { ,,,,,,美元的范围。generateMenuData =数据;, ,,,,}), ,。error(function () { ,,美元的范围。"加载文章时发生错误!";, ,});,, ,,}, ,, ,,美元的范围。showDetails = false;, ,,美元的范围。showSubDetails = false;, ,,美元的范围。subChildIDS = " ";, ,,美元的范围。Imagename = " R1.png”;, ,,美元的范围。showsubMenu = function (showMenus, ids) { ,,,,if (showMenus == 1) { ,,,,,,美元的范围。subChildIDS = id;, ,, ,,,,,,scope.showSubDetails美元= true;, ,,,,}, ,,,,else if (showMenus == 0) { ,,,,,,美元的范围。showSubDetails = false;, ,,,,}, ,,,,{,其他 ,, ,,,,,,美元的范围。showSubDetails = true;, ,,,,}, ,,}, ,, ,,/ / * * * * * * * * * *——结束Disoplay菜单,* * * * * * * * * * * * * * *, 在视图页面中，我们将菜单结果绑定到表中，以显示所有菜单和子菜单，如下所示。 隐藏,收缩,复制Code< div风格= "溢出:可见,身高:100 px;“比;, ,,,,,,,,,,,,,,,,& lt; ul类=“菜单”比;, ,,,,,,,,,,,,,,,,,,li data-ng-repeat="menu in generateMenuData | filter:{Parent_MenuID:'*'}", ,,,,,,,,,,,,,,,,,,,,var url = url . action("{{菜单。MenuFileName}},{{菜单。"， new {id= "{{id=菜单。MenuURL}} "});, ,,,,,,,,,,,,,,,,,,,,,,url = HttpUtility.UrlDecode (url);, ,,,,,,,,,,,,,,,,,,,,}, ,,,,,,,,,,,,,,,,,,,,& lt; data-ng-href = " "在{{menus.MenuName}} & lt; / a>, ,, ,,,,,,,,,,,,,,,,,,,,& lt; ul类= "子菜单"比;, ,,,,,,,,,,,,,,,,,,,,,," generateMenuData |过滤器中的子菜单:{Parent_MenuID:menus。MenuID} " ng-mouseover = " showsubMenu (1, submenus.MenuID);“ng-mouseout = " showsubMenu (0, submenus.MenuID);“比;, ,,,,,,,,,,,,,,,,,,,,,,,,{var url1 = Url.Action("{{子菜单。MenuFileName}},{{子菜单。"， new {id= "{{id=子菜单。MenuURL}} "});, ,,,,,,,,,,,,,,,,,,,,,,,,,,url1 = HttpUtility.UrlDecode (url1);, ,,,,,,,,,,,,,,,,,,,,,,,,}, ,,,,,,,,,,,,,,,,,,,,,,,,& lt; data-ng-href = " 1 "在{{submenus.MenuName}} & lt; / a>, ,, ,,,,,,,,,,,,,,,,,,,,,,,,& lt; ul ng-show =“showSubDetails”class =“sub-menu2”比;, ,,,,,,,,,,,,,,,,,,,,,,,,,,"sub1menus in generateMenuData | filter:{Parent_MenuID:submenus. "MenuID} " ng-mouseover = " showsubMenu(9);“比;, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,@{var url2 = Url.Action("{{sub1menus. "){{sub1menus MenuFileName}}”。”"， new {id= "{{id=sub1menus. "MenuURL}} "});, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,url2 = HttpUtility.UrlDecode (url2);, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,}, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,& lt; data-ng-href = " 2 "在{{sub1menus.MenuName}} & lt; / a>, 所在sp;,,,,,,,,,,,,,,,,,,,,,,,,,& lt; / li>, ,,,,,,,,,,,,,,,,,,,,,,,,& lt; / ul>, ,,,,,,,,,,,,,,,,,,,,,,& lt; / li>, ,,,,,,,,,,,,,,,,,,,,& lt; / ul>, ,,,,,,,,,,,,,,,,,,& lt; / li>, ,,,,,,,,,,,,,,,,& lt; / ul>, ,,,,,,,,,,,,,,& lt; / div>, MVC控制器: 在MVC控制器中，我们检查身份验证和授权。只有登录用户才能查看此页面，在控制器中，我们检查每个用户角色，并将角色从控制器传递到视图，以按用户角色显示菜单。 隐藏,收缩,复制Codepublic字符串RoleName{获取;设置;}, ,,,,//获取:用户 ,,,,,, ,,,,公众行动结果指数() ,,,,{, ,,,,,,如果(User.Identity.IsAuthenticated), ,,,,,,{, ,,,,,,,,var user = user . identity;, ,,,,,,,,ViewBag。= user.Name名称;, ,,,,,,,,ApplicationDbContext context = new ApplicationDbContext();, ,,,,,,,,var UserManager = new UserManager<ApplicationUser>(new UserStore<ApplicationUser>(context));, ,,,,,,,,var s = UserManager.GetRoles(user.GetUserId());, ,,,,,,,,RoleName = s [0] .ToString ();, ,,,,,,,,ViewBag。displayMenu =“不”;, ,,,,,,,,ViewBag。UserRole = RoleName;, ,,,,,,,,if (RoleName == "Admin") ,,,,,,,,{,,,,,,,,, ,,,,,,,,,,ViewBag。displayMenu =“是”;, ,,,,,,,,}, ,,,,,,,,,, ,,,,,,,,返回视图();, ,,,,,,}, ,,,,,,其他的, ,,,,,,{, ,,,,,,返回,RedirectToAction(“指数”,“家”);, ,,,,,,}, ,, ,,,,}, 的兴趣点 首先，运行SQL服务器上的所有脚本，您还可以从附加的zip文件中找到SQL脚本文件。下载源代码后请修改网页。配置文件DefaultConnection与SQL服务器连接的连接字符串。在Startup.cs文件中，我们已经创建了默认的Admin用户名“shanu”和密码“A@Z200711”，这个用户名和密码将作为Admin用户登录。您可以随意更改此用户名和密码。出于安全考虑，在以管理员身份登录后，您可以随意更改管理员用户密码。 历史 shanuMVCUserRolesV1.0.zip - 2016-02-02 本文转载于：http://www.diyabc.com/frontweb/news17291.html
