下载shanuMVCUserRolesV1.0.zip - 2.4 MB
介绍
在开始这篇文章之前，请浏览我的前一篇文章。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.
隐藏,收缩,复制CodeUSE 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 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。
隐藏,复制Codeusing 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，如下所示，
隐藏,复制Codeusing 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页面。
- 变量声明
首先，我们声明了所有需要使用的局部变量。
隐藏,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 = " ";,
- 方法
选择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>,
,: ,
,& lt; br /比;,
,& lt; / td>,
,
,& lt; td>,
,& lt; b>,菜单名称& lt; / b>,
,& lt; / td>,
,
,& lt; td>,
,&,:,
,,
,
,& 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,
option value="" selected>- Select -,
option ng-repeat=“option in userRoleData” value="{{option.Name}}">{{option.Name}}},
& lt; / select>,
父菜单ID绑定到组合框
创建子菜单管理可以选择父菜单从组合框。每次当管理员创建一个菜单，主菜单ID将被添加到这个组合框创建子菜单。
AngularJS控制中心部分:
使用我们的WEbAPI，我们获得所有的用户角色并将结果存储在$scope.userRoleData中
Html部分绑定组合框与父菜单ID
隐藏,Copy Code,
& lt;选项值= " * " selected> * & lt; / option>,
,,
& 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: KaTeX parse error: Expected 'EOF', got '}' at position 174: …YN:美元范围。UseYNsN}̲})。成功(function … scope.menuInserted);,
,
,
,cleardetails ();,
,selectMenuDetails (”, “);,
,selectMenubyUserRoleDetails ($ scope.userRoleName);,
,}),
,。error(function () {
,美元的范围。“加载文章时发生错误!”;,
,});,
,},
,
,
,else{//更新到菜单细节
,美元http。获取(’/api/MenuAPI/updateMenu/’， {params: {MenuIdentity: KaTeX parse error: Expected 'EOF', got '}' at position 200: …YN:美元范围。UseYNsN}̲})。成功(function … 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(new UserStore(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
179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
