tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Input tag re-designed & select tag label

pull/272/head
yekalkan 8 years ago
parent
8d2c68837e
commit
d1441e052a
5 changed files with 214 additions and 78 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpInputTagHelper.cs
  2. 83
      src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpInputTagHelperService.cs
  3. 2
      src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelper.cs
  4. 64
      src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelperService.cs
  5. 141
      test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Forms.cshtml

2
src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpInputTagHelper.cs
View File

@ -9,6 +9,8 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
{
public ModelExpression AspFor { get; set; }
public string Label { get; set; }
[HtmlAttributeNotBound]
[ViewContext]
public ViewContext ViewContext { get; set; }

83
src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpInputTagHelperService.cs
View File

@ -1,11 +1,14 @@
using System.Linq;
using System;
using System.Linq;
using System.Text;
using System.Text.Encodings.Web;
using System.Threading.Tasks;
using Localization.Resources.AbpUi;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.TagHelpers;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;
using Microsoft.Extensions.Localization;
using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers;
namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
@ -13,34 +16,44 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
public class AbpInputTagHelperService : AbpTagHelperService<AbpInputTagHelper>
{
private readonly IHtmlGenerator _generator;
private readonly HtmlEncoder _encoder;
private readonly IStringLocalizer<AbpUiResource> _localizer;
public AbpInputTagHelperService(IHtmlGenerator generator)
public AbpInputTagHelperService(IHtmlGenerator generator, HtmlEncoder encoder, IStringLocalizer<AbpUiResource> localizer)
{
_generator = generator;
_encoder = encoder;
_localizer = localizer;
}
public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.TagName = "input";
output.TagName = "div";
output.TagMode = TagMode.StartTagAndEndTag;
var inputTag = GetInputTag();
var inputHtml = RenderTagHelperOutput(inputTag, _encoder);
var isCheckbox = IsInputCheckbox(inputTag.Attributes);
ProcessAttributes(output);
}
var label = GetLabelAsHtml(inputTag, isCheckbox);
protected virtual void ProcessAttributes(TagHelperOutput output)
{
output.Attributes.RemoveAll("asp-for");
var content = isCheckbox ?
inputHtml + Environment.NewLine + label :
label + Environment.NewLine + inputHtml;
var inputTagHelperOutput = GetAttributes(output);
output.Content.SetHtmlContent(content);
foreach (var tagHelperAttribute in inputTagHelperOutput.Attributes)
{
output.Attributes.Add(tagHelperAttribute);
}
SetDivAttributes(output, isCheckbox);
}
protected virtual void SetDivAttributes(TagHelperOutput output, bool isCheckbox)
{
output.Attributes.RemoveAll("asp-for");
output.Attributes.Add("class", "form-control");
output.Attributes.Add("class", isCheckbox ? " form-check" : "form-group");
}
protected virtual TagHelperOutput GetAttributes(TagHelperOutput output)
protected virtual TagHelperOutput GetInputTag()
{
var inputTagHelper = new InputTagHelper(_generator)
{
@ -48,7 +61,45 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
ViewContext = TagHelper.ViewContext
};
return GetInnerTagHelper(new TagHelperAttributeList(), inputTagHelper);
var inputTagHelperOutput = GetInnerTagHelper(new TagHelperAttributeList(), inputTagHelper, "input"); ;
inputTagHelperOutput.Attributes.Add("class",
IsInputCheckbox(inputTagHelperOutput.Attributes) ? "form-check-input" : "form-control");
return inputTagHelperOutput;
}
protected virtual bool IsInputCheckbox(TagHelperAttributeList attributes)
{
return attributes.Any(a => a.Value != null && a.Name == "type" && a.Value.ToString() == "checkbox");
}
protected virtual string GetLabelAsHtml(TagHelperOutput inputTag, bool isCheckbox)
{
if (string.IsNullOrEmpty(TagHelper.Label) && string.IsNullOrEmpty(TagHelper.AspFor.Metadata.DisplayName))
{
return "";
}
var label = GetLabelText();
var idAttr = inputTag.Attributes.FirstOrDefault(a => a.Name == "id");
var idAttrAsString = "";
if (idAttr != null)
{
idAttrAsString = "for=\"" + idAttr.Value + "\"";
}
var checkboxClass = isCheckbox ? "class=\"form-check-label\" " : "";
return "<label " + checkboxClass + idAttrAsString + ">" + _localizer[label] + "</label>";
}
protected virtual string GetLabelText()
{
return string.IsNullOrEmpty(TagHelper.Label) ?
TagHelper.AspFor.Metadata.DisplayName :
TagHelper.Label;
}
}
}

2
src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelper.cs
View File

@ -10,6 +10,8 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
{
public ModelExpression AspFor { get; set; }
public string Label { get; set; }
public IEnumerable<SelectListItem> AspItems { get; set; }
[HtmlAttributeNotBound]

64
src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelperService.cs
View File

@ -1,10 +1,14 @@
using System.Text;
using System;
using System.Linq;
using System.Text;
using System.Text.Encodings.Web;
using System.Threading.Tasks;
using Localization.Resources.AbpUi;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.TagHelpers;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;
using Microsoft.Extensions.Localization;
using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers;
namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
@ -13,24 +17,38 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
{
private readonly IHtmlGenerator _generator;
private readonly HtmlEncoder _encoder;
private readonly IStringLocalizer<AbpUiResource> _localizer;
public AbpSelectTagHelperService(IHtmlGenerator generator, HtmlEncoder encoder)
public AbpSelectTagHelperService(IHtmlGenerator generator, HtmlEncoder encoder, IStringLocalizer<AbpUiResource> localizer)
{
_generator = generator;
_encoder = encoder;
_localizer = localizer;
}
public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.TagName = "div";
output.Attributes.Add("class", "form-control");
SetDivAttributes(output);
output.TagMode = TagMode.StartTagAndEndTag;
output.Content.SetHtmlContent(GetInnerHtml(output));
output.Attributes.Clear();
var selectTag = GetSelectTag();
var seelctAsHtml = RenderTagHelperOutput(selectTag, _encoder);
var labelAsHtml = GetLabelAsHtml(selectTag);
var content = labelAsHtml + Environment.NewLine + seelctAsHtml;
output.Content.SetHtmlContent(content);
}
protected virtual void SetDivAttributes(TagHelperOutput output)
{
output.Attributes.RemoveAll("asp-for");
output.Attributes.RemoveAll("asp-items");
output.Attributes.Add("class", "form-group");
}
protected virtual string GetInnerHtml(TagHelperOutput output)
protected virtual TagHelperOutput GetSelectTag()
{
var selectTagHelper = new SelectTagHelper(_generator)
{
@ -39,7 +57,39 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
ViewContext = TagHelper.ViewContext
};
return RenderTagHelper(output.Attributes, selectTagHelper, _encoder, "select", TagMode.StartTagAndEndTag);
var attributes = new TagHelperAttributeList { new TagHelperAttribute("class", "form-control") };
var inputTagHelperOutput = GetInnerTagHelper(attributes, selectTagHelper, "select", TagMode.StartTagAndEndTag); ;
inputTagHelperOutput.Attributes.Add("class", "form-control");
return inputTagHelperOutput;
}
protected virtual string GetLabelAsHtml(TagHelperOutput selectTag)
{
if (string.IsNullOrEmpty(TagHelper.Label) && string.IsNullOrEmpty(TagHelper.AspFor.Metadata.DisplayName))
{
return "";
}
var label = GetLabelText();
var idAttr = selectTag.Attributes.FirstOrDefault(a => a.Name == "id");
var idAttrAsString = "";
if (idAttr != null)
{
idAttrAsString = "for=\"" + idAttr.Value + "\"";
}
return "<label " + idAttrAsString + ">" + _localizer[label] + "</label>";
}
protected virtual string GetLabelText()
{
return string.IsNullOrEmpty(TagHelper.Label) ?
TagHelper.AspFor.Metadata.DisplayName :
TagHelper.Label;
}
}
}

141
test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Forms.cshtml
View File

@ -14,66 +14,97 @@
<div class="demo-with-code">
<div class="demo-area">
<form method="post" action="#">
<abp-form-group>
<abp-select asp-for="@Model.Country" asp-items="@Model.Countries"></abp-select>
</abp-form-group>
<abp-form-group>
<abp-select asp-for="@Model.City" asp-items="@Html.GetEnumSelectList(typeof(Cities))"></abp-select>
</abp-form-group>
<abp-form-group>
<abp-input asp-for="@Model.Name" />
</abp-form-group>
<abp-form-group>
<abp-input asp-for="@Model.Password" />
</abp-form-group>
<abp-form-group>
<abp-input asp-for="@Model.PhoneNumber" />
</abp-form-group>
<abp-form-group>
<abp-input asp-for="@Model.EmailAddress" />
</abp-form-group>
<abp-form-group>
<abp-input asp-for="@Model.Count" />
</abp-form-group>
<abp-form-group>
<abp-input asp-for="@Model.Day" />
</abp-form-group>
<abp-form-group>
<abp-input asp-for="@Model.IsActive" />
</abp-form-group>
<abp-input asp-for="@Model.Name"/>
<abp-input asp-for="@Model.Password" label="Password"/>
<abp-input asp-for="@Model.IsActive" />
<abp-input asp-for="@Model.PhoneNumber" />
<abp-input asp-for="@Model.EmailAddress" />
<abp-input asp-for="@Model.Count" />
<abp-input asp-for="@Model.Day" />
<abp-select asp-for="@Model.Country" asp-items="@Model.Countries" label="Country"></abp-select>
<abp-select asp-for="@Model.City" asp-items="@Html.GetEnumSelectList(typeof(Cities))"></abp-select>
</form>
</div>
<div class="code-area">
<pre>
&lt;form method=&quot;post&quot; action=&quot;#&quot;&gt;
&lt;abp-form-group&gt;
&lt;abp-select asp-for=&quot;@Model.Country&quot; asp-items=&quot;@Model.Countries&quot;&gt;&lt;/abp-select&gt;
&lt;/abp-form-group&gt;
&lt;abp-form-group&gt;
&lt;abp-select asp-for=&quot;@Model.City&quot; asp-items=&quot;@Html.GetEnumSelectList(typeof(Cities))&quot;&gt;&lt;/abp-select&gt;
&lt;/abp-form-group&gt;
&lt;abp-form-group&gt;
&lt;abp-input asp-for=&quot;@Model.Name&quot; /&gt;
&lt;/abp-form-group&gt;
&lt;abp-form-group&gt;
&lt;abp-input asp-for=&quot;@Model.Password&quot; /&gt;
&lt;/abp-form-group&gt;
&lt;abp-form-group&gt;
&lt;abp-input asp-for=&quot;@Model.PhoneNumber&quot; /&gt;
&lt;/abp-form-group&gt;
&lt;abp-form-group&gt;
&lt;abp-input asp-for=&quot;@Model.EmailAddress&quot; /&gt;
&lt;/abp-form-group&gt;
&lt;abp-form-group&gt;
&lt;abp-input asp-for=&quot;@Model.Count&quot; /&gt;
&lt;/abp-form-group&gt;
&lt;abp-form-group&gt;
&lt;abp-input asp-for=&quot;@Model.Day&quot; /&gt;
&lt;/abp-form-group&gt;
&lt;abp-form-group&gt;
&lt;abp-input asp-for=&quot;@Model.IsActive&quot; /&gt;
&lt;/abp-form-group&gt;
&lt;abp-input asp-for=&quot;Model.Name&quot;/&gt;
&lt;abp-input asp-for=&quot;Model.Password&quot; label=&quot;Password&quot;/&gt;
&lt;abp-input asp-for=&quot;Model.IsActive&quot; /&gt;
&lt;abp-input asp-for=&quot;Model.PhoneNumber&quot; /&gt;
&lt;abp-input asp-for=&quot;Model.EmailAddress&quot; /&gt;
&lt;abp-input asp-for=&quot;Model.Count&quot; /&gt;
&lt;abp-input asp-for=&quot;Model.Day&quot; /&gt;
&lt;abp-select asp-for=&quot;Model.Country&quot; asp-items=&quot;Model.Countries&quot; label=&quot;Country&quot;&gt;&lt;/abp-select&gt;
&lt;abp-select asp-for=&quot;Model.City&quot; asp-items=&quot;Html.GetEnumSelectList(typeof(Cities))&quot;&gt;&lt;/abp-select&gt;
&lt;/form&gt;
</pre>
</div>
</div>
</div>
@*<div class="demo-with-code">
<div class="demo-area">
<form method="post" action="#">
<abp-form-group>
<abp-select asp-for="@Model.Country" asp-items="@Model.Countries"></abp-select>
</abp-form-group>
<abp-form-group>
<abp-select asp-for="@Model.City" asp-items="@Html.GetEnumSelectList(typeof(Cities))"></abp-select>
</abp-form-group>
<abp-form-group>
<abp-input asp-for="@Model.Name" />
</abp-form-group>
<abp-form-group>
<abp-input asp-for="@Model.Password" />
</abp-form-group>
<abp-form-group>
<abp-input asp-for="@Model.PhoneNumber" />
</abp-form-group>
<abp-form-group>
<abp-input asp-for="@Model.EmailAddress" />
</abp-form-group>
<abp-form-group>
<abp-input asp-for="@Model.Count" />
</abp-form-group>
<abp-form-group>
<abp-input asp-for="@Model.Day" />
</abp-form-group>
<abp-form-group>
<abp-input asp-for="@Model.IsActive" />
</abp-form-group>
</form>
</div>
<div class="code-area">
<pre>
&lt;form method=&quot;post&quot; action=&quot;#&quot;&gt;
&lt;abp-form-group&gt;
&lt;abp-select asp-for=&quot;@Model.Country&quot; asp-items=&quot;@Model.Countries&quot;&gt;&lt;/abp-select&gt;
&lt;/abp-form-group&gt;
&lt;abp-form-group&gt;
&lt;abp-select asp-for=&quot;@Model.City&quot; asp-items=&quot;@Html.GetEnumSelectList(typeof(Cities))&quot;&gt;&lt;/abp-select&gt;
&lt;/abp-form-group&gt;
&lt;abp-form-group&gt;
&lt;abp-input asp-for=&quot;@Model.Name&quot; /&gt;
&lt;/abp-form-group&gt;
&lt;abp-form-group&gt;
&lt;abp-input asp-for=&quot;@Model.Password&quot; /&gt;
&lt;/abp-form-group&gt;
&lt;abp-form-group&gt;
&lt;abp-input asp-for=&quot;@Model.PhoneNumber&quot; /&gt;
&lt;/abp-form-group&gt;
&lt;abp-form-group&gt;
&lt;abp-input asp-for=&quot;@Model.EmailAddress&quot; /&gt;
&lt;/abp-form-group&gt;
&lt;abp-form-group&gt;
&lt;abp-input asp-for=&quot;@Model.Count&quot; /&gt;
&lt;/abp-form-group&gt;
&lt;abp-form-group&gt;
&lt;abp-input asp-for=&quot;@Model.Day&quot; /&gt;
&lt;/abp-form-group&gt;
&lt;abp-form-group&gt;
&lt;abp-input asp-for=&quot;@Model.IsActive&quot; /&gt;
&lt;/abp-form-group&gt;
&lt;/form&gt;
</pre>
</div>
</div>*@
Write Preview
Loading…
Cancel
Save