复杂的自定义标签助手

2024-03-14

基本上,我扩展了之前回答的问题(更新相关实体 https://stackoverflow.com/questions/53380176/updating-related-entities),因此它是一个自定义标签助手。

我想向自定义标签助手发送与用户相关的电话列表,并为每个电话生成一个文本框。

因此,假设我有以下语法:

<user-phones phones="@Model.UserPhones" />

这是我对自定义标签帮助程序的开始:

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”实体相关的文本框和隐藏输入?当父剃刀页面发布时,我需要它保持绑定。

我的想法是这样的方法会有所帮助。但是,我不知道如何通过ModelExpression来自for循环到该方法

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 core。


你快到了。

Design

这里的困难在于我们需要为未知属性构造一个表达式。比方说,当你想使用<user-phones asp-for=""/>在更高的层次上,考虑以下代码:

@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>。但是,不可能知道编译时会有多少层。

所以我们需要一个属性ExpressionFilter将默认表达式转换为目标表达式:

public class UserPhonesTagHelper : TagHelper
{

    [HtmlAttributeName("expression-filter")]
    public Func<string, string> ExpressionFilter { get; set; } = e => e;

    // ...
}

The ExpressionFilter这是一个转换表达式字符串的简单委托。

显示代码

我只是复制您的大部分代码并进行一些更改:

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);
        }
    }
}
  1. The ProcessAsync()上面仅显示了标签和输入UserPhoneId and PhoneNumber场地。如果您想自动显示所有属性,您只需将方法更改为:

    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);
            }
        }
    }
    
  2. 某些字段的默认表达式字符串是通过以下方式生成的:

    get_the_name_by('asp-for') +'[<index>]'+'<property-name>'  
    

    eg :AppUser.UserPhones[i].<property-name>

    当然这并不适用于所有情况,我们可以定制自己的expression-filter根据需要转换表达式:

    // 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:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

复杂的自定义标签助手 的相关文章

随机推荐