15

我正在创建一个 blazor 服务器端应用程序,但在两个自定义组件之间绑定值时遇到问题。

我已经查看了 bind 或 @bind 应该如何工作的不同示例,但我无法弄清楚关于这个问题的最新信息是什么。

给定一个模型类用户:

public class User
    {
        [Mapping(ColumnName = "short_id")]
        public string ShortId { get; set; }

        public User()
        {

        }
    }

我想构建一个表单,显示该用户的所有属性并将它们放在输入中,以便可以对其进行编辑并最终保存到数据库中。

我的表单(父组件)如下所示:

<div class="edit-user-form">
    <AnimatedUserInput TbText="@User.ShortId" Placeholder="MHTEE Id"/>
    <button class="btn btn-secondary" @onclick="Hide" style="{display:inline-block;}">Back</button>
    <button class="btn btn-primary" @onclick="SaveUser" style="{display:inline-block;}">Save</button>
</div>
@code {
    [Parameter] public vUser User { get; set; }

    [Parameter] public Action Hide { get; set; }

    bool _error = false;

    void SaveUser()
    {
        ValidateUserData();
    }

    void ValidateUserData()
    {
        _error = string.IsNullOrWhiteSpace(User.ShortId);
    }
}

AnimatedUserInput如下所示的自定义组件在哪里:

<div class="edit-area @FocusClass @WiggleClass">
    <input type="text" @bind="@TbText" />
    <span data-placeholder="@Placeholder"></span>
</div>
@code {
    [Parameter]
    public string TbText { get; set; }

    [Parameter]
    public string Placeholder { get; set; }
}

现在在输入文本框中,我正确地看到了父组件ShortId中的User对象。

但是,如果我更改输入中的文本并单击Save触发该ValidateUserData方法并允许我查看当前User对象的按钮,我会发现实际属性中没有进行任何更改,User.ShortId而只是在输入中进行了更改。

有什么方法可以绑定它,以便输入中的更改将自动应用于绑定的属性?

我有几个需要在表单中显示的属性,这就是为什么我不想OnChanged为每个属性挂钩自定义事件。

4

4 回答 4

24

好吧,对于任何偶然发现这一点的人来说。我尝试了更多并找到了解决方案。因此,在我的自定义输入组件AnimatedUserInput中,我添加了一个 EventCallback,每次更新输入值时都会调用它:

@code {

    [Parameter]
    public string TbText
    {
        get => _tbText;
        set
        {
            if (_tbText == value) return;

            _tbText = value;
            TbTextChanged.InvokeAsync(value);
        }
    }

    [Parameter]
    public EventCallback<string> TbTextChanged { get; set; }

    [Parameter]
    public string Placeholder { get; set; }

    private string _tbText;
}

我的父组件上的绑定如下所示:

<div class="edit-user-form">
    <AnimatedUserInput @bind-TbText="@User.ShortId" Placeholder="MHTEE Id"/>
    <AnimatedUserInput @bind-TbText="@User.FirstName" Placeholder="First name" />
    <AnimatedUserInput @bind-TbText="@User.LastName" Placeholder="Last name" />
    <AnimatedUserInput @bind-TbText="@User.UserName" Placeholder="Username" />
    <AnimatedUserInput @bind-TbText="@User.StaffType" Placeholder="Staff type" />
    <AnimatedUserInput @bind-TbText="@User.Token" Placeholder="Token" />
    <button class="btn btn-secondary" @onclick="Hide" style="{display:inline-block;}">Back</button>
    <button class="btn btn-primary" @onclick="SaveUser" style="{display:inline-block;}">Save</button>
</div>

@code {
    [Parameter] public vUser User { get; set; }
}

这样,blazor 可以正确地将值绑定在一起,并按照我期望它们绑定的方式从两侧更新它们。

于 2019-10-07T07:32:49.900 回答
3

Blazor 的一些数据绑定资源没有提到,当您执行 @bind-Value 时,您实际上会自动映射到 3 个参数:

绑定调用

<CustomComponent TValue="DateTime?" @bind-Value="order.PurchaseDate"></CustomComponent>

自定义组件

@using System.Linq.Expressions;
@typeparam TValue
//...
@code {
[Parameter]
public virtual TValue Value { get; set; }
[Parameter]
public EventCallback<TValue> ValueChanged { get; set; }
[Parameter]
public Expression<Func<TValue>> ValueExpression { get; set; }
//...
}

了解您是否想要一个简化用户界面的组件很重要,因为您可能需要该值表达式来进行表单验证......

<ValidationMessage For="ValueExpression" ></ValidationMessage>

在类似的意义上,我使用这个 ValueExpression 访问器方法来运行我的标签,当然你可能想要一个模型数据注释,就像你可能想知道该字段是否有最大长度,或者是必需的......

@( DisplayName.For(ValueExpression) )

代码的显示名称:

public static class StringHelpers
{
    public static string CamelCaseToPhrase(this string self)
    {
        return Regex.Replace(self, "([A-Z])", " $1").Trim();
    }
}

public static class DisplayName
{
    public static string For(string input)
    {
        return input.CamelCaseToPhrase();
    }

    public static string For<T>(Expression<Func<T>> accessor)
    {
        var expression = (MemberExpression)accessor.Body;
        var value = expression.Member.GetCustomAttribute(typeof(DisplayAttribute)) as DisplayAttribute;
        return value?.Name ?? expression.Member.Name?.CamelCaseToPhrase() ?? "";
    }

}

我在这里分享这个,因为当我搜索这个时,谷歌将我带到了这里,而那里的大多数其他资源在提供这个完整的图片方面做得很糟糕,所以希望这对其他人也有帮助。特别是如果您想访问数据注释,该模式也包括在内。

于 2021-09-05T13:29:31.587 回答
2

感谢您在此处发布的示例。使用它们,我根据W3schools 的 How TO-Toggle Switch中的 Toggle Switch 示例做了一个自定义输入复选框双向绑定组件,如下所示:

在此处输入图像描述

它在更改其状态时触发事件。

组件

<div class="@Class">
    <label class="switch">
        <input id="@Id" type="checkbox" @bind="IsOn" />
        <span class="slider round"></span>
    </label>
</div>

@code {
    [Parameter] public EventCallback<bool> OnToggle { get; set; }
    [Parameter] public string Id { get; set; }
    [Parameter] public string Class { get; set; }
    [Parameter] public bool SetAsChecked { get; set; }

    private bool _isSettingUp = true;
    private bool _isOn;

    protected override Task OnInitializedAsync()
    {
        IsOn = SetAsChecked;
        return base.OnInitializedAsync();
    }

    private bool IsOn
    {
        get => _isOn;
        set
        {
            _isOn = value;
            if (!_isSettingUp)
            {
                OnToggle.InvokeAsync(value);
            }
            _isSettingUp = false;
        }
    }
}

_isSettingUp标志是我发现在最初设置检查时不会触发 EventCallback 的方式。也许有人找到了更好的方法来处理这个问题。

父母

(这里是您使用组件的地方)

<ToggleSwitch Id="mySwitch" OnToggle="((isChecked)=>DoSomething(isChecked))" SetAsChecked="isChecked" />

@code {
    private bool isChecked;

    protected override void OnInitialized()
    {
        isChecked = true;
    }

    protected void DoSomething(bool isChecked)
    {
        Console.WriteLine($">>>> {isChecked} <<<<");
    }
}

CSS

CSS 改编自此处的 W3Scholl 示例。如果您想利用Blazor CSS Isolation ,则应将其放在名为组件的 .razor.css 文件中(在同一文件夹中) 。然后你可以使用Class组件的参数来适应不同的需求。

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    margin-top: 7px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 2px;
    background-color: #737272;
    -webkit-transition: .7s;
    transition: .7s;
    width: 62px;
    height: 29px;
}

    .slider:before {
        position: absolute;
        content: "\2716";
        text-align: center;
        color: dimgrey;
        height: 25px;
        width: 25px;
        left: 2px;
        bottom: 2px;
        padding-top: 1px;
        background-color: white;
        -webkit-transition: .8s;
        transition: .8s;
    }

input:checked + .slider {
    background-color: limegreen;
}

    input:checked + .slider:before {
        -webkit-transform: translateX(33px);
        -ms-transform: translateX(33px);
        transform: translateX(33px);
        content: "\2714";
        text-align: center;
        color: dodgerblue;
    }

.slider.round {
    border-radius: 20px;
}

    .slider.round:before {
        border-radius: 50%;
    }

顺便说一句,您可以在开关中放置任何HTML 符号。我确实从这个很酷的页面中选择了这些,该页面有一个搜索和 CSS 代码,如果我们在 CSS 内容中添加符号,这是我们所需要的,就像这里一样。

希望这对某人有用。

于 2021-06-25T22:51:40.937 回答
1

这就是我实现双向绑定的方式

父组件

<LabelledField Class=""
   Label="Label value"
   DateValue="@Model.Value"
   OnDateChange="@((e) => Model.Value = e )"
   Type="InputType.date" />

子组件

<div class="@Class">
<div class="ft-07 mb-03 field-label @LabelClass">@Label</div>
@switch (Type)
{
    case InputType.constant:
        <div class="label-field-value @ValueClass">@Value</div>
        break;
    case InputType.text:
        <input class="form-control input @ValueClass"
               type="text"
               @bind="Value" />

        break;
    case InputType.date:
        <input class="form-control input @ValueClass"
               type="date"
               @bind="DateValue" />

        break;
    default:
        break;
}
@code{
private string _tbText;
private DateTime? _tbDate;

[Parameter]
public string Class { get; set; }

[Parameter]
public string Label { get; set; }

[Parameter]
public string LabelClass { get; set; }

[Parameter]
public string Value
{
    get => _tbText;
    set
    {
        if (_tbText == value) return;

        _tbText = value;
        OnTextChange.InvokeAsync(value);
    }
}

[Parameter]
public DateTime? DateValue
{
    get => _tbDate;
    set
    {
        if (_tbDate == value) return;

        _tbDate = value;
        OnDateChange.InvokeAsync(_tbDate);
    }
}

[Parameter]
public string ValueClass { get; set; }

[Parameter]
public InputType Type { get; set; } = InputType.constant;

[Parameter]
public EventCallback<string> OnTextChange { get; set; }

[Parameter]
public EventCallback<DateTime?> OnDateChange { get; set; }
}
于 2021-04-13T17:10:03.680 回答