Merge pull request #8781 from acjh/patch-5

Support option child element for abp-select tag

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelper.cs

@@ -5,6 +5,7 @@ using Microsoft.AspNetCore.Razor.TagHelpers;
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
 {
+    [OutputElementHint("select")]
     public class AbpSelectTagHelper : AbpTagHelper<AbpSelectTagHelper, AbpSelectTagHelperService>
     {
         public ModelExpression AspFor { get; set; }

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelperService.cs

@@ -38,7 +38,9 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
 
         public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
         {
-            var innerHtml = await GetFormInputGroupAsHtmlAsync(context, output);
+            var childContent = await output.GetChildContentAsync();
+
+            var innerHtml = await GetFormInputGroupAsHtmlAsync(context, output, childContent);
 
             var order = TagHelper.AspFor.ModelExplorer.GetDisplayOrder();
 
@@ -58,9 +60,9 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
             }
         }
 
-        protected virtual async Task<string> GetFormInputGroupAsHtmlAsync(TagHelperContext context, TagHelperOutput output)
+        protected virtual async Task<string> GetFormInputGroupAsHtmlAsync(TagHelperContext context, TagHelperOutput output, TagHelperContent childContent)
         {
-            var selectTag = await GetSelectTagAsync(context, output);
+            var selectTag = await GetSelectTagAsync(context, output, childContent);
             var selectAsHtml = selectTag.Render(_encoder);
             var label = await GetLabelAsHtmlAsync(context, output, selectTag);
             var validation = await GetValidationAsHtmlAsync(context, output, selectTag);
@@ -74,7 +76,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
             return "<div class=\"form-group\">" + Environment.NewLine + innerHtml + Environment.NewLine + "</div>";
         }
 
-        protected virtual async Task<TagHelperOutput> GetSelectTagAsync(TagHelperContext context, TagHelperOutput output)
+        protected virtual async Task<TagHelperOutput> GetSelectTagAsync(TagHelperContext context, TagHelperOutput output, TagHelperContent childContent)
         {
             var selectTagHelper = new SelectTagHelper(_generator)
             {
@@ -97,6 +99,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
 
             var selectTagHelperOutput = await selectTagHelper.ProcessAndGetOutputAsync(GetInputAttributes(context, output), context, "select", TagMode.StartTagAndEndTag);
 
+            selectTagHelperOutput.Content.SetHtmlContent(childContent);
             selectTagHelperOutput.Attributes.AddClass("form-control");
             selectTagHelperOutput.Attributes.AddClass(GetSize(context, output));
             AddDisabledAttribute(selectTagHelperOutput);

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

@@ -97,7 +97,9 @@
 <div class="demo-with-code">
     <div class="demo-area">
         <abp-input asp-for="@Model.MyModel.EmailAddress" label="Email Address" placeholder="name@example.com" />
-        <abp-select asp-for="@Model.MyModel.City" asp-items="@Model.CityList" label="City" />
+        <abp-select asp-for="@Model.MyModel.City" asp-items="@Model.CityList" label="City">
+            <option value="">Choose a city</option>
+        </abp-select>
         <abp-select asp-for="@Model.MyModel.Cities" asp-items="@Model.CityList" label="Cities" />
         <abp-input asp-for="@Model.MyModel.Description" label="Description" />
     </div>
@@ -140,7 +142,9 @@
             <abp-tab title="Tag Helper" active="true">
                 <pre><code>
 &lt;abp-input asp-for=&quot;@@Model.MyModel.EmailAddress&quot; label=&quot;Email Address&quot; placeholder=&quot;name@example.com&quot; /&gt;
-&lt;abp-select asp-for=&quot;@@Model.MyModel.City&quot; asp-items=&quot;@@Model.CityList&quot; label=&quot;City&quot; /&gt;
+&lt;abp-select asp-for=&quot;@@Model.MyModel.City&quot; asp-items=&quot;@@Model.CityList&quot; label=&quot;City&quot;&gt;
+    &lt;option value=&quot;&quot;&gt;Choose a city&lt;/option&gt;
+&lt;/abp-select&gt;
 &lt;abp-select asp-for=&quot;@@Model.MyModel.Cities&quot; asp-items=&quot;@@Model.CityList&quot; label=&quot;Cities&quot; /&gt;
 &lt;abp-input asp-for=&quot;@@Model.MyModel.Description&quot; label=&quot;Description&quot; /&gt;
 </code></pre>
@@ -155,6 +159,7 @@
     &lt;div class=&quot;form-group&quot;&gt;
         &lt;label for=&quot;MyModel_City&quot;&gt;City&lt;/label&gt;
         &lt;select id=&quot;MyModel_City&quot; name=&quot;MyModel.City&quot; class=&quot;form-control&quot;&gt;
+            &lt;option value=&quot;&quot;&gt;Choose a city&lt;/option&gt;
             &lt;option value=&quot;NY&quot;&gt;New York&lt;/option&gt;
             &lt;option value=&quot;LDN&quot;&gt;London&lt;/option&gt;
             &lt;option value=&quot;IST&quot;&gt;Istanbul&lt;/option&gt;