Блог

У меня есть большой DxFormLayout со многими DxFormLayoutGroup s, и у каждого DxFormLayoutGroup много DxFormlauoutItem s. Мне интересно, можно ли сжать код razor, компонентировав несколько DxFormlauoutItem секунд. Вот мой код:

Страница:

 <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 => _decisionResu<
        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 _decisionResu<
}
 

Проблема:

Я сделал его компонентом razor, но у меня возникла проблема, поскольку свойства модели не обновляются на главной странице. Я могу подтвердить это одним свойством: на странице есть SpinEdit параметр, который включается один раз model.IsNegotiationsDoneBySupplyManagement , имеет значение true. Этого больше не происходит, как только я перешел в режим компонента:

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

Когда у меня был исходный код (без вставленного мной компонента / самого верхнего кода), установка этого флажка переключала Enabled состояние SpinEdit . После того, как я перешел на компонент, Enabled состояние больше не воспринимает изменения в свойстве model s, что наводит меня на мысль model , что свойства s на странице не обновляются.

Что не так с тем, как я подключил компонент?

Отсутствующая магия была на странице, где я вызывал компоненты. Это то, что я делал:

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

Это правильный синтаксис:

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

Мне пришлось изменить значение DecisionResult @bind-DecisionResult . Теперь Page ‘s model отражает изменения, которые происходят с его свойствами с помощью компонента in.