扩展AspNetCore InputTextArea组件以添加行

时间:2019-05-05 13:21:00

标签: asp.net-core razor-pages

我想扩展InputTextArea aspnet-core组件以添加对行的支持并在剃须刀页面中使用它。

我想做的方式是创建一个新类并从InputBase<string>继承并添加一个rows属性,但我不知道如何进一步实现它。

public class TextAreaWithRows : InputBase<string>
{

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.OpenElement(0, "textarea");
        builder.AddAttribute(1, "id", Id);
        builder.AddAttribute(2, "class", CssClass);
        builder.AddAttribute(3, "value", BindMethods.GetValue(CurrentValue));
        builder.AddAttribute(4, "onchange", BindMethods.SetValueHandler(__value => CurrentValue = __value, CurrentValue));
        builder.AddAttribute(5, "rows", );
        builder.CloseElement();
    }

    protected override bool TryParseValueFromString(string value, out string result, out string validationErrorMessage)
    {
        result = value;
        validationErrorMessage = null;
        return true;
    }
}

1 个答案:

答案 0 :(得分:0)

为类添加行的参数属性。

public class TextAreaWithRows : InputBase<string> {

    //For Attributes
    [Parameter] public int Rows { get; set; }

    //For Events 
    [Parameter] public Action OnInput { get; set; }

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.OpenElement(0, "textarea");
        builder.AddAttribute(1, "id", Id);
        builder.AddAttribute(2, "class", CssClass);
        builder.AddAttribute(3, "value", BindMethods.GetValue(CurrentValue));
        builder.AddAttribute(4, "onchange", BindMethods.SetValueHandler(__value => CurrentValue = __value, CurrentValue));
        builder.AddAttribute(5, "rows", Rows);
        builder.AddAttribute(6, "oninput", EventCallback.Factory.Create<UIEventArgs>(this, OnInput));
        builder.CloseElement();
    }

    protected override bool TryParseValueFromString(string value, out string result, out string validationErrorMessage)
    {
        result = value;
        validationErrorMessage = null;
        return true;
    }
}