Introduced ITagHelperService.

src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardBodyTagHelper.cs

@@ -1,13 +1,11 @@
-using Microsoft.AspNetCore.Razor.TagHelpers;
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
-
-namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
 {
-    public class AbpCardBodyTagHelper : TagHelper
+    public class AbpCardBodyTagHelper : TagHelper<AbpCardBodyTagHelperService>
     {
-        public override void Process(TagHelperContext context, TagHelperOutput output)
+        public AbpCardBodyTagHelper(AbpCardBodyTagHelperService tagHelperService)
+            : base(tagHelperService)
         {
-            output.TagName = "div";
+
-            output.Attributes.AddClass("card-body");
         }
     }
 }

src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardBodyTagHelperService.cs

@@ -0,0 +1,13 @@
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
+{
+    public class AbpCardBodyTagHelperService : TagHelperService
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            output.TagName = "div";
+            output.Attributes.AddClass("card-body");
+        }
+    }
+}

src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardHeaderTagHelper.cs

@@ -1,13 +1,10 @@
-using Microsoft.AspNetCore.Razor.TagHelpers;
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
-
-namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
 {
-    public class AbpCardHeaderTagHelper : TagHelper
+    public class AbpCardHeaderTagHelper : TagHelper<AbpCardHeaderTagHelperService>
     {
-        public override void Process(TagHelperContext context, TagHelperOutput output)
+        public AbpCardHeaderTagHelper(AbpCardHeaderTagHelperService tagHelperService) 
+            : base(tagHelperService)
         {
-            output.TagName = "div";
-            output.Attributes.AddClass("card-header");
         }
     }
 }

src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardHeaderTagHelperService.cs

@@ -0,0 +1,13 @@
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
+{
+    public class AbpCardHeaderTagHelperService : TagHelperService
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            output.TagName = "div";
+            output.Attributes.AddClass("card-header");
+        }
+    }
+}

src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardTagHelper.cs

@@ -1,13 +1,10 @@
-using Microsoft.AspNetCore.Razor.TagHelpers;
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
-
-namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
 {
-    public class AbpCardTagHelper : TagHelper
+    public class AbpCardTagHelper : TagHelper<AbpCardTagHelperService>
     {
-        public override void Process(TagHelperContext context, TagHelperOutput output)
+        public AbpCardTagHelper(AbpCardTagHelperService tagHelperService) 
+            : base(tagHelperService)
         {
-            output.TagName = "div";
-            output.Attributes.AddClass("card");
         }
     }
 }

src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Card/AbpCardTagHelperService.cs

@@ -0,0 +1,13 @@
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Card
+{
+    public class AbpCardTagHelperService : TagHelperService
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            output.TagName = "div";
+            output.Attributes.AddClass("card");
+        }
+    }
+}

src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/ITagHelperService.cs

@@ -0,0 +1,15 @@
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using Volo.Abp.DependencyInjection;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers
+{
+    public interface ITagHelperService : ITransientDependency
+    {
+        int Order { get; }
+
+        void Init(TagHelperContext context);
+
+        Task ProcessAsync(TagHelperContext context, TagHelperOutput output);
+    }
+}

src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/TagHelper.cs

@@ -0,0 +1,21 @@
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers
+{
+    public abstract class TagHelper<TService> : TagHelper
+        where TService : ITagHelperService
+    {
+        private readonly TService _tagHelperService;
+
+        protected TagHelper(TService tagHelperService)
+        {
+            _tagHelperService = tagHelperService;
+        }
+
+        public override Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
+        {
+            return _tagHelperService.ProcessAsync(context, output);
+        }
+    }
+}

src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/TagHelperService.cs

@@ -0,0 +1,24 @@
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers
+{
+    public class TagHelperService : ITagHelperService
+    {
+        public virtual int Order { get; }
+
+        public virtual void Init(TagHelperContext context)
+        {
+        }
+
+        public virtual void Process(TagHelperContext context, TagHelperOutput output)
+        {
+        }
+
+        public virtual Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
+        {
+            Process(context, output);
+            return Task.CompletedTask;
+        }
+    }
+}

test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Cards.cshtml

@@ -6,12 +6,40 @@
 
 <h2>Cards</h2>
 
-<h4>Example - 1</h4>
+@*
+    <div class="demo-with-code">
+        <div class="demo-area">
+        </div>
+        <div class="code-area">
+    <pre></pre>
+        </div>
+    </div>
+*@
+
+<p>Based on <a href="http://getbootstrap.com/docs/4.1/components/card/" target="_blank"> Bootstrap card</a>.</p>
+
+<h4># Example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
-        <div class="card" style="width: 18rem;">
+        <abp-card>
+            <abp-card-header>Card header</abp-card-header>
+            <abp-card-body>Card body</abp-card-body>
+        </abp-card>
+    </div>
+    <div class="code-area">
+        <pre>&lt;abp-card&gt;
+    &lt;abp-card-header&gt;Card header&lt;/abp-card-header&gt;
+    &lt;abp-card-body&gt;Card body&lt;/abp-card-body&gt;
+&lt;/abp-card&gt;</pre>
+    </div>
+</div>
+
+<h4># Example</h4>
 
+<div class="demo-with-code">
+    <div class="demo-area">
+        <div class="card" style="width: 18rem;">
             <img class="card-img-top" src="~/imgs/demo/300x200.png" alt="Card image cap">
             <div class="card-body">
                 <h5 class="card-title">Card title</h5>

test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/css/demo.css

@@ -1,8 +1,10 @@
-.demo-with-code .demo-area {
+.demo-with-code {
-  margin-bottom: 2em; }
+  padding-bottom: 10px;
-
+  margin-bottom: 10px; }
-.demo-with-code .code-area {
+  .demo-with-code .demo-area {
-  border: 1px solid #ddd;
+    margin-bottom: 1em; }
-  padding: 10px;
+  .demo-with-code .code-area {
-  font-size: 0.9em; }
+    border: 1px solid #ddd;
+    padding: 10px;
+    font-size: 0.9em; }
 

test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/css/demo.min.css

@@ -1 +1 @@
-.demo-with-code .demo-area{margin-bottom:2em;}.demo-with-code .code-area{border:1px solid #ddd;padding:10px;font-size:.9em;}
+.demo-with-code{padding-bottom:10px;margin-bottom:10px;}.demo-with-code .demo-area{margin-bottom:1em;}.demo-with-code .code-area{border:1px solid #ddd;padding:10px;font-size:.9em;}

test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/css/demo.scss

@@ -1,6 +1,10 @@
 .demo-with-code {
+
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+
     .demo-area {
-        margin-bottom: 2em;
+        margin-bottom: 1em;
     }
 
     .code-area {