blazor-server-side - 自定义 Blazor 组件未正确反映绑定

Question

我有一个大的DxFormLayout，有很多DxFormLayoutGroups，每个DxFormLayoutGroup都有很多DxFormlauoutItems。我想知道是否可以通过组件化一些DxFormlauoutItems. 这是我的代码：

页：

<EditForm Model="@_model" Context="editFormContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />

    <DxFormLayout CssClass="dxFormLayoutHeaderStyle">       
        <DxFormLayoutGroup Caption="Options" ColSpanMd="12">
            <DxFormLayoutItem Caption="" ColSpanMd="12">
                @*The below is repeated multiple times*@
                <Template>
                    <DxStackLayout ItemSpacing="10px">
                        <Items>
                            <DxStackLayoutItem Length="95%">
                                <Template>
                                    <DxTextBox ReadOnly="true" @bind-Text="@_model.TooltipTextForNegotiationsDoneBySupplyManagement"
                                               title="@_model.TooltipTextForNegotiationsDoneBySupplyManagement" SizeMode="SizeMode.Medium"/>
                                </Template>
                            </DxStackLayoutItem>
                            <DxStackLayoutItem Length="5%">
                                <Template>
                                    <div class="stacklayout-item">
                                        <DxCheckBox CheckType="CheckType.Switch" style="width: 100%" @bind-Checked="@_model.IsNegotiationsDoneBySupplyManagement"
                                                    Alignment="CheckBoxContentAlignment.Center" title="@_model.TooltipTextForNegotiationsDoneBySupplyManagement"/>
                                    </div>
                                </Template>
                            </DxStackLayoutItem>
                        </Items>
                    </DxStackLayout>
                </Template >
                @*The above is repeated multiple times*@
            </DxFormLayoutItem >
        </DxFormLayoutGroup>            
    </DxFormLayout>
</EditForm>

@*The below become a component with parameters and bindings*@

<EditForm Model="@_model" Context="editFormContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />

    <DxFormLayout CssClass="dxFormLayoutHeaderStyle">       
        <DxFormLayoutItem Caption="" ColSpanMd="12">
            <Template>
                <BudgetReleaseRequestDecisionPoint DecisionText="@_model.TooltipTextForNegotiationsDoneBySupplyManagement"
                                                   DecisionResult="@_model.IsNegotiationsDoneBySupplyManagement" />
            </Template >
        </DxFormLayoutItem >            
    </DxFormLayout>
</EditForm>

零件：

<style>
    .stacklayout-item {
        text-align: center;
        height: 100%;
        padding-top: 6px;
    }
</style>

<DxStackLayout ItemSpacing="10px">
    <Items>
        <DxStackLayoutItem Length="95%">
            <Template>
                <DxTextBox ReadOnly="true" @bind-Text="@DecisionText" title="@DecisionText" SizeMode="SizeMode.Medium"/>
            </Template>
        </DxStackLayoutItem>
        <DxStackLayoutItem Length="5%">
            <Template>
                <div class="stacklayout-item">
                    <DxCheckBox CheckType="CheckType.Switch" style="width: 100%" @bind-Checked="@DecisionResult"
                                Alignment="CheckBoxContentAlignment.Center" title="@DecisionResult"/>
                </div>
            </Template>
        </DxStackLayoutItem>
    </Items>
</DxStackLayout>

@code {
    [Parameter]
    public string DecisionText
    {
        get => _decisionText;
        set
        {
            if (_decisionText == value) return;

            _decisionText = value;
            DecisionTextChanged.InvokeAsync(value);
        }
    }

    [Parameter]
    public bool DecisionResult
    {
        get => _decisionResult;
        set
        {
            if (_decisionResult == value) return;

            _decisionResult = value;
            DecisionResultChanged.InvokeAsync(value);
        }
    }

    [Parameter]
    public EventCallback<string> DecisionTextChanged { get; set; }
    [Parameter]
    public EventCallback<bool> DecisionResultChanged { get; set; }

    private string _decisionText;
    private bool _decisionResult;
}

问题：

我把它做成了一个剃须刀组件，但我遇到了问题，因为模型的属性没有在主页上更新。我可以通过一个属性来确认这一点：在页面上，有一个设置为 true 时SpinEdit启用。model.IsNegotiationsDoneBySupplyManagement一旦我进入组件模式，这种情况就不会再发生了：

<DxSpinEdit Id="amountSavedAfterNegotiations" @bind-Value="@_model.SavingsAfterNegotiations" Enabled="@_model.IsNegotiationsDoneBySupplyManagement" title="Savings (AED) after negotiations?" />

当我拥有原始代码（没有我粘贴的组件/最顶层代码）时，勾选此复选框将切换Enabled. SpinEdit在我转移到组件后，Enabled状态不再感应到model' 属性的变化，这让我相信model页面上的 ' 属性没有得到更新。

我连接组件的方式有什么问题？

标签： blazor-server-sidedevexpress-blazor

Answer 1

缺少的魔法出现在我调用组件的页面上。这就是我正在做的事情：

<BudgetReleaseRequestDecisionPoint DecisionText="@_model.TooltipTextForNegotiationsDoneBySupplyManagement" DecisionResult="@_model.IsNegotiationsDoneBySupplyManagement" />

这是正确的语法：

<BudgetReleaseRequestDecisionPoint DecisionText="@_model.TooltipTextForNegotiationsDoneBySupplyManagement" @bind-DecisionResult="@_model.IsNegotiationsDoneBySupplyManagement" />

我不得不将其更改DecisionResult为@bind-DecisionResult. 现在Page'smodel反映了它在组件中的属性发生的变化。