复杂的自定义标签助手 [英] Complex custom tag helper
问题描述
基本上，我是在扩展先前回答的问题(更新相关实体)，以便它是自定义标记帮助器.
Basically, I'm extending on a previously answered question (Updating related entities) so that it is a Custom Tag Helper.
我想向自定义标签助手发送与用户相关的电话列表，并为每个电话生成一个文本框.
I want to send the custom tag helper a list of phones related to the user and generate a textbox for each.
因此，假设我具有以下语法:
So, lets assume I have the following syntax:
<user-phones phones="@Model.UserPhones" />
这是我开始使用自定义标签助手"的信息:
Here is the start I have for the Custom Tag Helper:
public class UserPhonesTagHelper : TagHelper
{
private readonly IHtmlGenerator _htmlGenerator;
private const string ForAttributeName = "asp-for";
public List<UserPhones> Phones { get; set; }
[ViewContext]
public ViewContext ViewContext { set; get; }
[HtmlAttributeName(ForAttributeName)]
public ModelExpression For { get; set; }
public UserPhonesTagHelper(IHtmlGenerator htmlGenerator)
{
_htmlGenerator = htmlGenerator;
}
public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
{
output.TagName = "div";
output.TagMode = TagMode.StartTagAndEndTag;
//output.Attributes.Add("class", "form-group");
StringBuilder sbRtn = new StringBuilder();
for (int i = 0; i < Phones.Count(); i++)
{
//NEED HELP HERE
}
output.Content.SetHtmlContent(sbRtn.ToString());
}
}
在for循环中，如何在迭代中生成文本框和与当前"UserPhone"实体相关的隐藏输入?在发布父剃刀页面时，我也需要保持绑定状态.
Within the for loop, how could I generate a textbox and hidden inputs related to the current `UserPhone' entity in the iteration? I would need this to remain bound when the parent razor page is posted as well.
我认为这样的方法会有所帮助.但是，我不知道如何将ModelExpression从for循环传递给方法
My thought is a method like so would help. BUT, I do not know how to pass the ModelExpression from the for loop to the method
private void WriteInput(TextWriter writer)
{
var tagBuilder = _htmlGenerator.GenerateTextBox(
ViewContext,
For.ModelExplorer,
For.Name,
value: null,
format: null,
htmlAttributes: new { @class = "form-control" });
tagBuilder.WriteTo(writer, htmlEncoder);
}
再次感谢您的帮助...仍在学习asp.net核心.
Thank you again for all your help... still learning asp.net core.
推荐答案
您快到了.
设计
这里的困难是我们需要为未知属性构造一个表达式.假设您想在更高层次上使用<user-phones asp-for=""/>时，请考虑以下代码:
The difficulty here is that we need to construct an expression for unknown properties. Let's say when you want to use the <user-phones asp-for=""/> in a much more higher level, considering the following code :
@model M0
@{
var M1 = GetM1ByMagic(M0);
}
<user-phones asp-for="@M1.M2....Mx.UserPhones">
</user-phones>
在标签帮助器内，我们可以假定每个属性的默认名称为UserPhones[<index>].<property-name>.但这并非总是这种情况，用户可能希望将其更改为M0.M2....Mx.UserPhones[<index>].<property-name>.但是，不可能知道在编译时将有多少个级别.
Inside the tag helper, we might assume the default name of each property to be UserPhones[<index>].<property-name>. But that's not always that case, users might want to change it to M0.M2....Mx.UserPhones[<index>].<property-name>. However, it's not possible to know how many levels there will be at compile-time.
所以我们需要一个属性ExpressionFilter将默认表达式转换为目标表达式:
So we need an attribute of ExpressionFilter to convert the default expression to target expression :
public class UserPhonesTagHelper : TagHelper
{
[HtmlAttributeName("expression-filter")]
public Func<string, string> ExpressionFilter { get; set; } = e => e;
// ...
}
这里的ExpressionFilter是转换表达式字符串的简单委托.
The ExpressionFilter here is a simple delegate to convert expression string.
向我显示代码
我只是复制您的大多数代码并进行一些更改:
I simply copy most of your code and make a little change :
public class UserPhonesTagHelper : TagHelper
{
private readonly IHtmlGenerator _htmlGenerator;
private const string ForAttributeName = "asp-for";
public IList<UserPhones> Phones { get; set; }
[ViewContext]
public ViewContext ViewContext { set; get; }
[HtmlAttributeName(ForAttributeName)]
public ModelExpression For { get; set; }
public UserPhonesTagHelper(IHtmlGenerator htmlGenerator)
{
_htmlGenerator = htmlGenerator;
}
[HtmlAttributeName("expression-filter")]
public Func<string, string> ExpressionFilter { get; set; } = e => e;
// a helper method that generate a label and input for some property
private TagBuilder GenerateSimpleInputForField( int index ,PropertyInfo pi)
{
var instance = Phones[index];// current instance of a single UserPhone
var name = pi.Name; // property name : e.g. "PhoneNumberId"
var v = pi.GetValue(instance);
var div = new TagBuilder("div");
div.AddCssClass("form-group");
var expression = this.ExpressionFilter(For.Name + $"[{index}].{name}");
var explorer = For.ModelExplorer.GetExplorerForExpression(typeof(IList<UserPhones>), o =>v);
var label = _htmlGenerator.GenerateLabel( ViewContext, explorer, expression, name, new { } );
div.InnerHtml.AppendHtml(label);
var input = _htmlGenerator.GenerateTextBox( ViewContext, explorer, expression, v, null, new { @class = "form-control" } );
div.InnerHtml.AppendHtml(input);
return div;
}
public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
{
output.TagName = "div";
output.TagMode = TagMode.StartTagAndEndTag;
var type = typeof(UserPhones);
PropertyInfo phoneId= type.GetProperty("UserPhoneId");
PropertyInfo phoneNumber= type.GetProperty("PhoneNumber");
for (int i = 0; i< Phones.Count();i++) {
var div1 = this.GenerateSimpleInputForField(i,phoneId);
var div2 = this.GenerateSimpleInputForField(i,phoneNumber);
output.Content.AppendHtml(div1);
output.Content.AppendHtml(div2);
}
}
}
-
上面的
ProcessAsync()仅显示UserPhoneId和PhoneNumber字段的标签和输入.如果要自动显示所有属性，只需将方法更改为:
The
ProcessAsync()above only shows a label and input forUserPhoneIdandPhoneNumberfield. If you would like to show all the properties automatically, you can simply change the method to be :
public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
{
output.TagName = "div";
output.TagMode = TagMode.StartTagAndEndTag;
for (int i = 0; i < Phones.Count(); i++)
{
var pis = typeof(UserPhones).GetProperties();
foreach (var pi in pis)
{
var div = this.GenerateSimpleInputForField(i, pi);
output.Content.AppendHtml(div);
}
}
}
某些字段的默认表达式字符串由以下生成:
the default expression string for some field is generated by:
get_the_name_by('asp-for') +'[<index>]'+'<property-name>'
例如:AppUser.UserPhones[i].<property-name>
当然，它不适用于所有情况，我们可以自定义expression-filter来根据需要转换表达式:
Surely it won't apply for all cases, we can custom our own expression-filter to convert the expression as we like :
// use <user-phones> in view file :
// custom our own expression filter :
@{
var regex= new System.Text.RegularExpressions.Regex(@"...");
Func<string, string> expressionFilter = e => {
var m = regex.Match(e);
// ...
return m.Groups["expression"].Value;
};
}
<user-phones phones="@Model.AppUser.UserPhones"
asp-for="@Model.AppUser.UserPhones"
expression-filter="expressionFilter">
</user-phones>
测试用例
<div class="row">
@await Html.PartialAsync("_NameAndID", Model.AppUser)
</div>
<form method="post">
<div class="row">
<user-phones phones="@Model.AppUser.UserPhones" asp-for="@Model.AppUser.UserPhones" expression-filter="e => e.Substring(8)"></user-phones>
</div>
<button type="submit">submit</button>
</form>
第一部分是通过局部视图生成的，第二部分是通过user-phones生成的:
The first part is generated by partial view and the second part is generated by user-phones:
这篇关于复杂的自定义标签助手的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
