ASP。NET MVC警告横幅使用Bootstrap和AngularUI Bootstrap

Watch this script in action - demo	下载Source Code from GitHub	下载Source Code from CodeProject (1.1 MB)

表的内容

介绍视图视图操作web api ok按钮单击ok按钮动作方法requireacceptpolicy——自定义授权过滤器属性过滤器配置ajax验证种防伪标记视图使用AngularJS可重用的模式使用jQuery和引导可重用的模式使用AngularJS和AngularUI引导未来行动计划结论历史看这个脚本下载资源

介绍

在本文中，作者将分享如何使用ASP实现警告标志和可重用模式。NET MVC, jQuery, Web API, Bootstrap, AngularJS和AngularUI Bootstrap。有些人将警告横幅称为免责横幅、同意画面、启动画面、系统可接受使用策略、登录警告横幅、登录策略、登录横幅、登录通知等。基本上，这是用户第一次访问或登录到应用程序时显示的页面/通知。以下是读者可以从本文中摘录的内容的摘要。

如何创建警告标语使用jQuery +引导如何创建警告标语使用AngularJS + AngularUI引导如何创建一个简单的Web API如何从MVC控制器调用Web API包括种防伪标记到AJAX POST请求如何使用MVC局部视图创建可重用的模态和jQuery +引导如何创建可重用的模式使用AngularJS模板+ AngularUI引导如何创建一个授权过滤器吗

图1显示了该解决方案包含两个项目，分别是CommonApp和WarningBanner。CommonApp是一个简单的WebAPI项目，负责返回警告横幅内容。

图1

警告标语视图

清单1显示了WarningPage视图中的引导模态标记。在这个例子中，modal-body的内容将从ViewBag中读取。您可以将其更改为从模型绑定，或者根据您的需求将横幅内容硬编码到页面上。数据键盘设置为“false”，以防止用户按键盘上的ESC键关闭警告横幅。

清单1

隐藏,复制Code@{ Html.RenderPartial("~/Views/Shared/_AntiforgeryToken.cshtml"); }

×

@if (ViewBag.SystemWarningMessage != null) {

@Html.Raw(ViewBag.SystemWarningMessage)

}

OK

警告横幅视图行动

在页面加载时，WarningPage操作方法将检查用户是否单击了警告横幅页面上的OK按钮。如果是，则将请求重定向到主页，否则将获得警告横幅消息并显示在页面上。

清单2

隐藏,复制Codepublic ActionResult WarningPage()
{
if (Session[“SessionOKClick”] != null)
{
return RedirectToAction(“Index”);
}
SetWarningBanner();
return View();
}

清单3显示了设置警告横幅内容的代码。在本例中，该方法通过HttpClient类从Web API获取内容。代码非常简单，但是，我们可以在这里做一些改进。可以修改代码，从配置文件中读取Web API URI，并在将JSON结果返回给客户端之前对其进行消毒。如果Web API不是首选，那么我们可以修改代码来读取数据库/实体、配置文件甚至是硬编码的内容。此方法中cache-control标头的目的是防止浏览器后退按钮从缓存中提供内容。例如，如果用户在接受策略后单击浏览器的back按钮，警告横幅模式将重新出现，并提示用户再次接受策略。

清单3

隐藏,复制Codeinternal void SetWarningBanner()
{
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetExpires(DateTime.UtcNow.AddHours(-1));
Response.Cache.SetNoStore();
//Content can be from the database/Entity, Web Services, hardcode here
using (var client = new HttpClient())
{
client.BaseAddress = new Uri(“http://localhost:47503”);
client.DefaultRequestHeaders.Accept.Clear();
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue(“application/json”));
var response = client.GetAsync(“api/warningbanner/1”).Result;
if (response.IsSuccessStatusCode)
{
string responseString = response.Content.ReadAsStringAsync().Result;
JObject json = JObject.Parse(responseString);
//you can update the code to sanitize the json output here
ViewBag.SystemWarningMessage = json[“Content”].ToString();
}
}
}

警告标语Web API

清单4显示了警告横幅web API控制器的内容。这个类包含一个WarningBanner对象，其中包含一些示例数据，以及一个Get方法来通过id检索WarningBanner。同样，可以随意修改这个代码来从数据库/实体、配置文件等中读取数据。

清单4

隐藏,复制Codepublic class WarningBannerController : ApiController
{
//sample data
IList warningBanners = new List
{
new WarningBanner { Id = 1, Content = " *** Warning Banner Content 1 ****",
LastUpdatedDate = DateTime.Now},
new WarningBanner { Id = 2, Content = " *** Warning Banner Content 2 ****",
LastUpdatedDate= DateTime.Now.AddDays(-30)}
};
public IHttpActionResult Get(int id)
{
var banner = warningBanners.FirstOrDefault(§ => p.Id == id);
if (banner == null)
{
return NotFound();
}
return Ok(banner);
}
}

警告横幅视图OK按钮单击

清单5显示了在单击Ok按钮时将触发Ajax调用以post到Home/AcceptPolicy方法。在本例中，post将包括一个防伪造标记和一个键值对数据。如果请求成功，请求将被重定向到最初请求的页面。

清单5

隐藏,复制Code

警告横幅OK按钮操作方法

AcceptPolicy动作方法正在用HttpPost和AjaxValidateAntiForgeryToken属性进行修饰。此方法的主要目的是在用户单击Ok按钮之后，告诉客户端将请求重定向到哪个URL。请参见清单6。您还可以创造性地添加额外的逻辑，将用户响应记录到数据库中。该方法接受一个参数rURL，该变量没有被代码使用。目的是演示AJAX post可以向动作方法传递参数。SessionOKClick会话变量的目的是跟踪用户是否单击了Ok按钮。另一方面，SessionReturnUrl会话变量包含初始页面请求的URL。URL在AuthorizeAttribute处设置。的授权方法，将在下一节中讨论。

清单6

隐藏,复制Code[HttpPost]
[AjaxValidateAntiForgeryToken]
public ActionResult AcceptPolicy(string rURL)
{
Session[“SessionOKClick”] = “1”;
string decodedUrl = string.Empty;
//return url to redirect after user accepted the policy
if (Session[“SessionReturnUrl”] != null)
{
decodedUrl = Server.UrlDecode(Session[“SessionReturnUrl”].ToString());
}
if (Url.IsLocalUrl(decodedUrl))
{
return Json(decodedUrl);
}
else
{
return Json(Url.Action(“Index”, “Home”));
}
}

自定义授权过滤器attribute

清单7显示了自定义授权筛选器，用于检查在授权用户调用操作方法之前是否需要将请求重定向到警告横幅页面。在本例中，OnAuthorization方法只包含处理警告横幅策略的逻辑。实际上，您的应用程序可能有其他逻辑来验证已授权用户。我们可以将清单7中的代码追加/合并到应用程序授权过滤器类中。PageToSkipPolicyNotification和PageToShowPolicyNotification方法分别允许指定某些页以跳过或显示警告横幅页。如果出现以下情况，OnAuthorization方法将请求重定向到警告页面

操作不是从Ok按钮点击(AcceptPolicy)和用户必须接受策略之前，查看请求页面和用户没有点击Ok按钮(AcceptPolicy)之前

回想一下，SessionOKClick会话变量是在WarningPage AcceptPolicy操作方法中设置的。SessionReturnUrl会话变量的目的是保存请求的URL。我们不能期望所有用户都通过/主页进入web应用程序，有些用户可能会从/home/联系页面、/home/about页面等等进入。Let表示用户最初从/home/contact页面输入web应用程序。用户单击警告页面上的Ok按钮(AcceptPolicy)后，请求将被重定向到/home/contact页面。如果你想看到带有AngularJS的警告横幅，在web的appSettings元素中。配置时，将WaningBannerAngular的值设置为1。

清单7

隐藏,收缩,复制Codepublic class RequireAcceptPolicy : AuthorizeAttribute, IAuthorizationFilter
{
internal static bool PageToSkipPolicyNotification(HttpContext ctx)
{
string[] pagesToExclude = { “/home/testwarningpage”, “/home/warningpage”};
string pageToCheck = ctx.Request.Path.ToString().ToLower().TrimEnd(’/’);
return pagesToExclude.Contains(pageToCheck) ? true : false;
}
internal static bool PageToShowPolicyNotification(HttpContext ctx){ ….}
public override void OnAuthorization(AuthorizationContext filterContext)
{
//Other Authorization logic ….
….
//don’t prompt if the action is from acceptpolicy, and pages to exclude and SessionOKClick != null (user already accepted policy)
if (!filterContext.ActionDescriptor.ActionName.ToLower().Contains(“acceptpolicy”) && !PageToSkipPolicyNotification(HttpContext.Current) &&
HttpContext.Current.Session[“SessionOKClick”] == null)
{
//track the request url, include the query string
HttpContext.Current.Session[“SessionReturnUrl”] = filterContext.HttpContext.Request.Url.PathAndQuery;
//redirect to policy page
if (System.Configuration.ConfigurationManager.AppSettings[“WaningBannerAngular”] == “1”)
{
filterContext.Result = new RedirectResult("~/home/WarningPageNg");
}
else
{
filterContext.Result = new RedirectResult("~/home/WarningPage");
}
}
}
}

过滤器配置

清单8展示了如何将自定义授权筛选器属性RequireAcceptPolicy添加到全局筛选器集合中。

清单8

隐藏,复制Codepublic class FilterConfig
{
public static void RegisterGlobalFilters(GlobalFilterCollection filters)
{
filters.Add(new RequireAcceptPolicy());
}
}

Ajax验证防伪令牌

防伪造令牌代码是使用Ajax Post将防伪造令牌传递给MVC动作。不是将与客户机相关的代码放在每个页面上，而是将代码放在部分视图_AntiforgeryToken.cshtml中。您可以将需要防伪造标记的部分视图放置到单个页面或布局页面中。清单9显示了_AntiforgeryToken.cshtml的内容。部分视图由两个隐藏字段组成，分别为ID antiForgeryToken和antiForgeryTokenNg。隐藏字段保存由GetAntiForgeryToken方法生成的防伪标记。角锥器利用了抗伪造记号的隐域。

清单9

隐藏,复制Code@functions{
public string GetAntiForgeryToken()
{
string cookieToken, formToken;
AntiForgery.GetTokens(null, out cookieToken, out formToken);
return cookieToken + “,” + formToken;
}
}

<input id=“antiForgeryTokenNg” data-ng-model=“antiForgeryToken” type=“hidden”

data-ng-init="antiForgeryToken='@GetAntiForgeryToken()'" />

清单10展示了jQuery AJAX post如何将防伪造令牌传递给控制器动作方法。您可以从清单5中看到完整的JavaScript。

清单10

隐藏,复制CodebeforeSend: function (xhr) { xhr.setRequestHeader(‘RequestVerificationToken’, $("#antiForgeryToken").val()); }

清单11简要展示了AngularJS如何将防伪造令牌传递给控制器动作方法。请下载源代码，因为我可能会跳过这一节中的一些内容。在页面加载时，控制器将从隐藏字段读取令牌，然后将其存储到数组变量即items中。当用户点击Accept策略/OK按钮时，AngularJS $http服务将包括报头属性发送到服务器。在本例中，头属性包含RequestVerificationToken参数和来自$scope.items[0]的值。这个例子中的数组碰巧只有一项，这就是为什么它的位置是0。

清单11

隐藏,复制Code// modal controller
$scope.items=[$scope.antiForgeryToken];
// OK click
$http({
method: ‘POST’,
url: ‘/home/AcceptPolicy’,
params: Indata,
headers: {
‘RequestVerificationToken’: $scope.items[0]
}
…

警告横幅视图使用AngularJS

清单12显示了WarningPageNg视图中的AngulatJS和AngularUI Bootstrap模态标记。与警告页面视图一样，模式体的内容来自ViewBag。您可以将其更改为从模型绑定，或者根据您的需求将横幅内容硬编码到页面上。模态的内容被封装在脚本指令下的模板中。单击OK按钮将被路由到OK()函数，而openModal()函数将在页面加载时被调用。

清单12

隐藏,复制Code

@{ Html.RenderPartial("~/Views/Shared/_AntiforgeryToken.cshtml"); }

@section scripts{ }

清单13显示了ModalController.js文件的内容。最初，代码将创建一个新模块TestAngularApp，并声明对ui的依赖。引导模块。然后代码将利用Config函数将$httpProvider provider注入到应用程序的模块配置块中。提供程序将允许模块向执行的调用添加“X-Requested-With”类型的头。这个头对于和AjaxValidateAntiForgeryToken属性一起工作和解决错误“required antiforgery cookie \”剩余的requestverificationtoken \“不存在”是必要的。你可以在这里看到一个AngularUI模态打开的属性和定义列表。OK按钮的单击逻辑非常类似于清单5。点击按钮，页面将发布到home/AcceptPolicy方法，带有防伪造标记。

清单13

隐藏,收缩,复制Code var app = angular.module(‘TestAngularApp’, [‘ui.bootstrap’]);
app.config(['$httpProvide{r}^{\prime },function($httpProvider) {
KaTeX parse error: Expected 'EOF', got '}' at position 78: …LHttpRequest'; }̲]); app.control…scope, $uibModal) {
$scope.animationsEnabled = true;
$scope.openModal = function (size) {
$scope.items=[$scope.antiForgeryToken];
var ModalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: ‘myModal.html’,
controller: ‘InstanceController’,
backdrop: false,
resolve: {
items: function () { return KaTeX parse error: Expected 'EOF', got '}' at position 14: scope.items; }̲ } …scope, $uibModalInstance, $http, $window, items) {
$scope.items = items;
$scope.ok = function () {
var Indata = { rURL: ‘dummyTestParam’ };
$http({
method: ‘POST’,
url: ‘/home/AcceptPolicy’,
params: Indata,
headers: {‘RequestVerificationToken’: $scope.items[0] }
}).then(function successCallback(response) {
$scope.status = response.status;
$scope.data = response.data;
$window.location.href = response.data;
}, function errorCallback(response) {
});
$uibModalInstance.close();
};
$scope.cancel = function () {
//it dismiss the modal
$uibModalInstance.dismiss(‘cancel’);
};
});

使用jQuery和引导程序的可重用模式

清单14显示了t的HTML标记他_ModalDialog部分视图。在这个视图中，有用于模态对话框标题和主体的占位符和几个按钮。

清单14

隐藏,复制Code

×

[Title]

[Body]

<button type=“button” class=“btn btn-default”

                    id="SharedModalDialogBtnOk" data-dismiss="modal">OK</button>
            <button type="button" class="btn btn-default" 

                    id="SharedModalDialogBtnCancel" data-dismiss="modal">Cancel</button>
        <div>
    </div>
</div>

清单15显示了在_ModalDialog部分视图中显示对话框的jQuery插件ModalDialog。这个插件接受5个参数，你可以定制它来满足你的需求。与对话框标题和正文内容对应的标题和正文参数。OkButtonText和CancelButtonText参数将分别决定标签和OK和Cancel按钮的可见性。如果指定了OkClickRedirect值，在单击OK按钮时，请求将被重定向到指定的URL。

清单15

隐藏,收缩,复制CodeKaTeX parse error: Expected '}', got 'EOF' at end of input: … (function () {
// jQuery plugin definition
$.fn.ModalDialog = function (params) {
// merge default and user parameters
params = $.extend({ title: ‘’, body: ‘’, OkButtonText: ‘’, OkClickRedirect: ‘’, CancelButtonText: ‘’ }, params);
if (params.title != ‘’) {
$(".modal-title").text(params.title);
}
if (params.title != ‘’) {
$(".modal-body").html(params.body);
}
if (params.OkButtonText != ‘’) {
$("#SharedModalDialogBtnOk").text(params.OkButtonText);
$("#SharedModalDialogBtnOk").show();
}
else {
$("#SharedModalDialogBtnOk").hide();
}
if (params.CancelButtonText != ‘’) {
$("#SharedModalDialogBtnCancel").text(params.CancelButtonText);
$("#SharedModalDialogBtnCancel").show();
}
else {
$("#SharedModalDialogBtnCancel").hide();
}
if (params.OkClickRedirect != ‘’) {
$("#SharedModalDialogBtnOk").click(function () {
window.location.replace(params.OkClickRedirect);
});
}
$(’#SharedModalDialog’).modal(‘show’);
// allow jQuery chaining
return false;
};
})(jQuery);
});

清单16显示了如何利用新创建的部分视图和jQuery插件来显示模态对话框。RenderPartial方法可以放在布局页面中。如果应用程序需要在整个应用程序中向客户端显示一个简单的警报消息/通知，这将非常有用。清单16中有三个按钮和关于如何使用插件的示例。

清单16

隐藏,收缩,复制Code


@section scripts {
@{
Html.RenderPartial("~/Views/Shared/_ModalDialog.cshtml");
}

}

清单17显示了如何在页面加载或没有按钮单击事件时显示对话框。

清单17

隐藏,复制Code$(document).ready(function () {
$(’#SharedModalDialog’).ModalDialog({
title: ‘Test - Page Load’,
body: ‘Display on page load !!!’
});
});

使用AngularJS和AngularUI Bootstrap的可重用模态

清单18显示了_ModalDialogNg.html文件中的模态对话框模板。按钮的可见性基于ngShow属性中的表达式，即showX、showOK和showCancel。可以通过scope类中的属性访问标题和按钮标签。AngularJS ng-bind-html指令被用来在div元素中安全地显示HTML内容。但是，仍然要确保在显示用户输入之前对其进行消毒。

清单18

隐藏,复制Code

×

{{title}}

{{btnOkText}} {{btnCancelText}}

清单19显示了ModalPartialController.js文件的内容。控制器中使用了AngularJS $sce(严格上下文转义)服务来构建HTML值的可信版本。$uibModal是一个创建模态窗口的服务。$window服务的目的是在单击OK按钮时将请求重定向到特定的URL。隐藏或显示按钮以及设置元素标签和值的逻辑嵌入在清单19中。

清单19

隐藏,收缩,复制Code var app = angular.module(‘TestAngularApp’, [‘ui.bootstrap’]);
app.controller(‘modalcontroller’, function ($scope, $uibModal, $window) {
$scope.openModal = function (title, body, okBtnText, okClickRedirect, cancelBtnText) {
$scope.items = [title, body, okBtnText, okClickRedirect, cancelBtnText];
var ModalInstance = $uibModal.open({
animation: true,
templateUrl: ‘/TemplatesNg/_ModalDialogNg.html’,
controller: ‘InstanceController’,
backdrop: false, //disables modal closing by click on the background
keyboard: true, //disables modal closing by click on the ESC key
resolve: {
items: function () {
return $scope.items;
}
}
});
ModalInstance.result.then(function (btn) {
if (btn == “OK”) {
KaTeX parse error: Expected 'EOF', got '}' at position 53: …t; }̲ }, fun…scope, $uibModalInstance, $sce, items) {
$scope.items = items;
$scope.title = $scope.items[0];
$scope.body = $scope.items[1];
$scope.btnOkText = $scope.items[2];
$scope.btnCancelText = $scope.items[4];
var returnUrl = $scope.items[3];
//allow html
$scope.htmlBind = $sce.trustAsHtml($scope.items[1]);
//hide or close the X close button on the top, you can write extra logic here to hide or show it
$scope.showX = false;
$scope.showOK=true;if($scope.btnOkText == ‘’) {
//hide OK button
$scope.showOK = false;
}
//cancel button
$scope.showCancel=true;if($scope.btnCancelText == ‘’) {
$scope.showCancel = false;
}
//OK clicked
$scope.ok = function () {
if (returnUrl == ‘’) {
$uibModalInstance.close(’’);
} else {
$uibModalInstance.close(‘OK’);
}
};
$scope.cancel = function () {
//it dismiss the modal
$uibModalInstance.dismiss();
};
});

清单20显示了应用程序/视图如何通过传入不同的参数来调用AngularUI Bootstrap模式。首先,包括ModalPartialController。从清单19到页面的AngularJS控制器。然后创建一个div元素，并包含ng-controller指令和控制器类modalcontroller作为它的值。在div元素中添加一个按钮，在ng-click事件中，指定控制器中定义的openModal method (ModalPartialController.js)。

清单20

隐藏,复制Code

<button class=“btn btn-default” type=“button”

        ng-click="openModal('AngularUI Model','Click on <b>Ok</b> to Redirect to Contact page.', 'OK', '/home/Contact', 'Close')">
            Modal with redirect</button>

@section scripts{ }

清单21显示了如何在页面加载或没有按钮单击事件时显示对话框。

清单21

隐藏,复制Code<div ng-controller=“modalcontroller”

     ng-init="openModal('AngularUI Model Onload','Display on page load!', '','', 'Ok')">

未来计划

将代码升级到用户Angular 2及以上版本和MVC 6核心。

结论

我希望有人会发现这些信息有用，并使您的编程工作更容易。如果你发现任何错误或不同意内容或想帮助改进这篇文章，请给我写信，我将与你一起纠正它。我建议下载演示程序并对其进行研究，以便掌握完整的概念，因为我可能会错过本文中的一些重要信息。如果你想帮助改进这篇文章，请给我发邮件。请使用以下链接报告任何问题https://github.com/bryiantan/WarningBanner/issues。

测试版本:ie 11,10,9.0, Microsoft Edge 38, Firefox 52，谷歌Chrome 56.0

历史

4/5/2017 -初始版本

2017年4月25日—更新的源代码包含了通过AJAX POST和GET方法显示模态内容的额外示例。示例在TestModalDialog页面中。

4/27/2017 -更新。net标签到ASP。添加了对参考资料部分的引用。请注意，下面的部分不在本文中，请下载源代码并探索它。有问题尽管问。

在全局中启用跨源请求。为多个url启用跨源请求(CORS)的asax文件在Web API调用期间在Ajax POST方法中包含防伪造令牌

观察这个脚本的实际操作

http://mvc.ysatech.com/

下载

下载源代码(https://github.com/bryiantan/WarningBanner)

资源

初学者教程，了解ASP中的过滤器和属性。使用MVC, Web API和angularjs调用来自MVC 5控制器的Webapi 2服务。NET MVC ng-bind-html通过防伪造令牌MVC动作使用Ajax post为什么ASP。净MVC的请求。IsAjaxRequest卫理公会教徒对于angular的$http调用，d返回false

本文转载于：http://www.diyabc.com/frontweb/news19184.html