Advertisement
Guest User

Untitled

a guest
Jun 24th, 2019
84
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.40 KB | None | 0 0
  1. [HtmlTargetElement("modal", TagStructure = TagStructure.NormalOrSelfClosing)]
  2. public class ModalTagHelper : TagHelper
  3. {
  4. private const string ButtonTextAttributeName = "button-text";
  5. private const string ModalIdAttributeName = "modal-id";
  6. private const string ModalTitleAttributeName = "modal-title";
  7. private const string AcceptButtonTextAttributeName = "accept-button-text";
  8. private const string DeclineButtonTextAttributeName = "decline-button-text";
  9. private const string PageAttributeName = "page";
  10. private const string HandlerAttributeName = "handler";
  11. private const string RouteValuesDictionaryName = "all-route-data";
  12. private const string RouteValuesPrefix = "route-";
  13.  
  14. private readonly IHtmlHelper _htmlHelper;
  15. private readonly ITagHelperComponentManager _tagHelperComponentManager;
  16. private IDictionary<string, string> _routeValues;
  17.  
  18. public ModalTagHelper(IHtmlHelper htmlHelper, ITagHelperComponentManager tagHelperComponentManager)
  19. {
  20. this._htmlHelper = htmlHelper;
  21. this._tagHelperComponentManager = tagHelperComponentManager;
  22. }
  23.  
  24. [HtmlAttributeNotBound]
  25. [ViewContext]
  26. public ViewContext ViewContext { get; set; }
  27.  
  28. [HtmlAttributeName(ButtonTextAttributeName)]
  29. public string ButtonText { get; set; }
  30.  
  31. [HtmlAttributeName(ModalIdAttributeName)]
  32. public string ModalId { get; set; }
  33.  
  34. [HtmlAttributeName(ModalTitleAttributeName)]
  35. public string ModalTitle { get; set; }
  36.  
  37. [HtmlAttributeName(AcceptButtonTextAttributeName)]
  38. public string AcceptButtonText { get; set; }
  39.  
  40. [HtmlAttributeName(DeclineButtonTextAttributeName)]
  41. public string DeclineButtonText { get; set; }
  42.  
  43. [HtmlAttributeName(PageAttributeName)]
  44. public string Page { get; set; }
  45.  
  46. [HtmlAttributeName(HandlerAttributeName)]
  47. public string Handler { get; set; }
  48.  
  49. [HtmlAttributeName(RouteValuesDictionaryName, DictionaryAttributePrefix = RouteValuesPrefix)]
  50. public IDictionary<string, string> RouteValues
  51. {
  52. get
  53. {
  54. if (this._routeValues == null)
  55. {
  56. _routeValues = new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase);
  57. }
  58. return this._routeValues;
  59. }
  60. set => this._routeValues = value;
  61. }
  62.  
  63. public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
  64. {
  65. var model = await this._createModalModel(output);
  66.  
  67.  
  68. this._tagHelperComponentManager.Components.Add(new ModalTagHelperComponent(this._htmlHelper, model));
  69.  
  70. var content = await this._getContent(model);
  71.  
  72. output.TagName = "";
  73. output.Content.SetHtmlContent(content);
  74. }
  75.  
  76. private async Task<ModalModel> _createModalModel(TagHelperOutput output)
  77. {
  78. var jsBaseName = this._cleanTextForJavaScript(this.ButtonText);
  79.  
  80. return new ModalModel
  81. {
  82. ButtonText = this.ButtonText,
  83. ModalId = string.IsNullOrWhiteSpace(this.ModalId) ? $"{jsBaseName}Id" : this.ModalId,
  84. ModalTitle = string.IsNullOrWhiteSpace(this.ModalTitle) ? this.ButtonText : this.ModalTitle,
  85. ModalBody = await output.GetChildContentAsync(),
  86. AcceptButtonText = string.IsNullOrWhiteSpace(this.AcceptButtonText)
  87. ? "Accept"
  88. : this.AcceptButtonText,
  89. DeclineButtonText = string.IsNullOrWhiteSpace(this.DeclineButtonText)
  90. ? "Decline"
  91. : this.DeclineButtonText,
  92. Page = string.IsNullOrWhiteSpace(this.Page)
  93. ? "/Index"
  94. : this.Page,
  95. Handler = string.IsNullOrWhiteSpace(this.Handler)
  96. ? ""
  97. : this.Handler,
  98. AcceptFuntionName = $"accept{jsBaseName}()",
  99. OpenModalFunctionName = $"open{jsBaseName}()",
  100. DeclineFunctionName = $"close{jsBaseName}()",
  101. RouteValues = this._getRouteValues()
  102. };
  103. }
  104.  
  105. private RouteValueDictionary _getRouteValues()
  106. {
  107. RouteValueDictionary routeValues = null;
  108. if (this._routeValues != null && this._routeValues.Count > 0)
  109. {
  110. routeValues = new RouteValueDictionary(this._routeValues);
  111. }
  112. return routeValues;
  113. }
  114.  
  115. private string _cleanTextForJavaScript(string input)
  116. {
  117. var output = input.ToLower();
  118. var regex = new Regex("[^a-z]");
  119. return regex.Replace(output, "");
  120. }
  121.  
  122. private async Task<IHtmlContent> _getContent(ModalModel model)
  123. {
  124. (this._htmlHelper as IViewContextAware).Contextualize(this.ViewContext);
  125. return await this._htmlHelper.PartialAsync("~/Areas/ModalTagHelper/Pages/Shared/_ModalPartial.cshtml", model);
  126. }
  127. }
  128.  
  129. public class ModalModel
  130. {
  131. public string ButtonText { get; set; }
  132. public string ModalId { get; set; }
  133. public string ModalTitle { get; set; }
  134. public TagHelperContent ModalBody { get; set; }
  135. public string AcceptButtonText { get; set; }
  136. public string DeclineButtonText { get; set; }
  137. public string Page { get; set; }
  138. public string Handler { get; set; }
  139. public string OpenModalFunctionName { get; set; }
  140. public string AcceptFuntionName { get; set; }
  141. public string DeclineFunctionName { get; set; }
  142. public RouteValueDictionary RouteValues { get; set; }
  143. }
  144.  
  145. public class ModalTagHelperComponent : TagHelperComponent
  146. {
  147. private readonly IHtmlHelper _htmlHelper;
  148. private readonly ModalModel _model;
  149.  
  150. [ViewContext]
  151. public ViewContext ViewContext { get; set; }
  152.  
  153. public ModalTagHelperComponent(IHtmlHelper htmlHelper, ModalModel model)
  154. {
  155. this._htmlHelper = htmlHelper;
  156. this._model = model;
  157. }
  158.  
  159. public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
  160. {
  161. if (string.Equals(context.TagName, "body", StringComparison.OrdinalIgnoreCase))
  162. {
  163. var script = await this._getContent(this._model);
  164. output.PostContent.AppendHtml(script);
  165. }
  166. }
  167.  
  168. private async Task<IHtmlContent> _getContent(ModalModel model)
  169. {
  170. (this._htmlHelper as IViewContextAware).Contextualize(this.ViewContext);
  171. return await this._htmlHelper.PartialAsync("~/Areas/ModalTagHelper/Pages/Shared/_ModalPartialScript.cshtml", model);
  172. }
  173. }
  174.  
  175. @model AspNetCore.Razor.Areas.ModalTagHelper.TagHelpers.ModalModel
  176.  
  177. <a href="#" class="btn btn-primary" onclick="@Model.OpenModalFunctionName">@Model.ButtonText</a>
  178. <div id="@Model.ModalId" class="modal fade">
  179. <div class="modal-dialog modal-lg">
  180. <div class="modal-content">
  181. <div class="modal-header">
  182. <h4 class="modal-title">@Model.ModalTitle</h4>
  183. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  184. <span aria-hidden="true">&times;</span>
  185. </button>
  186. </div>
  187. <div class="modal-body">
  188. @Model.ModalBody
  189. </div>
  190. <div class="modal-footer">
  191. <a href="#" onclick="@Model.AcceptFuntionName" class="btn btn-danger">
  192. @Model.AcceptButtonText
  193. </a>
  194. <button type="button" class="btn btn-primary" data-dismiss="modal">
  195. @Model.DeclineButtonText
  196. </button>
  197. </div>
  198. </div>
  199. </div>
  200. </div>
  201.  
  202. @model AspNetCore.Razor.Areas.ModalTagHelper.TagHelpers.ModalModel
  203.  
  204. @{
  205. var url = @Model.Page;
  206.  
  207. if (@Model.RouteValues != null)
  208. {
  209. foreach (var routeValue in @Model.RouteValues)
  210. {
  211. url += $"/{routeValue.Value}";
  212. }
  213. }
  214.  
  215. if (!string.IsNullOrWhiteSpace(Model.Handler))
  216. {
  217. url += $"?handler={Model.Handler}";
  218. }
  219. }
  220.  
  221. <script>
  222. function @Model.OpenModalFunctionName {
  223. $("#@Model.ModalId").modal('show');
  224. };
  225.  
  226. function @Model.AcceptFuntionName {
  227. var requestVerificationToken =
  228. document.getElementsByName("__RequestVerificationToken")[0].value;
  229.  
  230. fetch("@url", {
  231. headers: {
  232. "Content-Type": "application/json",
  233. "RequestVerificationToken": requestVerificationToken
  234. },
  235. method: 'POST'
  236. });
  237.  
  238. $("#@Model.ModalId").modal('hide');
  239. };
  240. </script>
  241.  
  242. public class IndexModel : PageModel
  243. {
  244. public string Name { get; set; }
  245. public int Id { get; set; }
  246.  
  247. public void OnGet()
  248. {
  249. this.Name = "Johan";
  250. this.Id = 124;
  251. }
  252.  
  253. public void OnPost()
  254. {
  255. Console.WriteLine("Index POST method called");
  256. }
  257.  
  258. public void OnPostHello()
  259. {
  260. Console.WriteLine($"Hello POST method called. Id = {this.Id}, Name = {this.Name}");
  261. }
  262. }
  263.  
  264. @Html.AntiForgeryToken()
  265. <div class="container">
  266. <div class="row">
  267. <modal button-text="Delete" handler="hello">
  268. <h1>Hello, @Model.Name</h1>
  269. <p>@Model.Name has id @Model.Id</p>
  270. </modal>
  271. </div>
  272. </div>
  273.  
  274. public class IndexModel : PageModel
  275. {
  276. // Omitted for brevity
  277.  
  278. public void OnPostHello(int id)
  279. {
  280. Console.WriteLine($"Hello POST method called. Id = {id}");
  281. }
  282. }
  283.  
  284. @Html.AntiForgeryToken()
  285. <div class="container">
  286. <div class="row">
  287. <modal button-text="Delete" handler="hello" route-id="@Model.Id">
  288. <h1>Hello, @Model.Name</h1>
  289. <p>@Model.Name has id @Model.Id</p>
  290. </modal>
  291. </div>
  292. </div>
  293.  
  294. <script>
  295. function opendelete() {
  296. $("#deleteId").modal('show');
  297. };
  298.  
  299. function acceptdelete() {
  300. var requestVerificationToken =
  301. document.getElementsByName("__RequestVerificationToken")[0].value;
  302.  
  303. fetch("/Index/124?handler=hello", {
  304. headers: {
  305. "Content-Type": "application/json",
  306. "RequestVerificationToken": requestVerificationToken
  307. },
  308. method: 'POST'
  309. });
  310.  
  311. $("#deleteId").modal('hide');
  312. };
  313. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement