在 Blazor 中两种方式绑定和禁用可编辑文本字段的最佳方法是什么？答案

【问题标题】：What is the best method for two way binding and disabling editable text fields in Blazor?在 Blazor 中两种方式绑定和禁用可编辑文本字段的最佳方法是什么？
【发布时间】：2023-02-25 09:26:47
【问题描述】：

对于有很多字段的 POCO，我发现有一个像这样的简单表单/组件绑定结构真的很方便

< input type="text" bind="@Person.FirstName" />

< input type="text" bind="@Person.LastName" />

< input type="text" bind="@Person.Address" />

然后我可以保存或创建新的按钮/事件来一次处理对象。换句话说，整个对象都绑定到一个可编辑的组件，这使得将对象从数据库中取出进行编辑并返回到数据库中变得非常容易。

我觉得烦人的是我必须既显示对象的详细信息又要确保它的某些部分根据特定条件被锁定/不可编辑的情况。假设由于某些业务逻辑原因我无法更改 LastName。这：

< input type="text" bind="@Person.LastName" disabled="@somecondition" />

是不安全的，因为用户可能会检查页面，修改禁用标志，并且仍然会导致启用双向绑定并在现有保存事件中覆盖更改。我发现的解决方法很烦人，例如，您可以使用 if 代码块在文本框和纯文本绑定之间切换，或者您只是在引入更多错误报告逻辑的事件中执行所有业务逻辑。

这是我认为“有效”的妥协：

if(some_protective_condition) { < input type="text" bind="@Person.Address" /> }

else { <span>@Person.Addressv< /span>}

如果我理解正确的话，这些解决方法中的大多数本质上都是与 DOM 或可见性的某些方面一起使用，以确保不会呈现可编辑控件。对于这些接口级别锁定的情况，你们会使用什么编码模式？

编辑/TLDR：寻找最佳/安全最少的代码模式来维护双向绑定，显示一个值并使其在某些情况下可编辑/不可编辑。

欢迎提出建议，因为我正在努力养成良好的长期习惯。

尝试了几种技术。如果我错过了什么，寻找最佳选择。

【问题讨论】：

我只会和残疾人一起去。但是，我也会在输入验证中再次检查存储库服务中的条件。你永远不应该相信网络用户界面
我会创建一个包装器组件来封装您想要的额外功能。如果你愿意，我会添加一些示例组件代码作为答案？它不会完全是你想要的，但会给你一些想法和方向。
您无法直接控制用户的客户端浏览器。就你所知，这不是 Chrome，而是一些黑客软件，可以让他轻松修改 DOM。您描述的两种方法都很好（禁用 bool 上的输入，或使用 bool 显示简单文本。通常我不建议在绑定项目上更改 get;set;，但这次检查 bool 并且根本不设置如果组件被禁用，该值应该没问题。

标签： asp.net-core blazor blazor-server-side

【解决方案1】：

我认为将业务规则集成到您的视图中的“Blazor 方式”是使用 AuthorizeView ...

<AuthorizeView Policy="CanEditAddress">
    <Authorized>
        < input type="text" bind="@Person.Address" />
    </Authorized>
    <NotAuthorized>
        < span>@Person.Addressv< /span>
    </NotAuthorized>
</AuthorizeView>

文档展示了如何使用级联参数填充授权策略...... https://learn.microsoft.com/en-us/aspnet/core/blazor/security/?view=aspnetcore-7.0#expose-the-authentication-state-as-a-cascading-parameter

如果您的规则不是真正的“业务规则”而是“表示规则”（例如您的表单具有编辑模式与显示模式），那么上述模式仍然是一个不错的选择。也就是说，我将创建一个名为“PresentationView”的类，它与 AuthorizationView 等效，但用于表示规则。

【讨论】：

【解决方案2】：

是不安全的，因为用户可能会检查页面，修改禁用标志并仍然导致启用双向绑定和在现有保存事件中覆盖更改。

我想我找到了处理这个问题的最佳方法。考虑你的问题：
双向绑定和禁用可编辑的最佳方法是什么 Blazor 中的文本字段？

创建一个使用InputBase 进行双向绑定的组件，并有一个参数IsReadOnly。当IsReadOnly 为 true 时，组件将使用 value 呈现没有双向绑定的输入。否则，组件将使用@bind 通过双向绑定呈现。
@if (!IsReadOnly)
{
    <input type="text" @bind="@CurrentValue" />
}
else
{
     <input type="text" value="@CurrentValue" disabled />
}


@code {
     [Parameter] public bool IsReadOnly { get; set; } = false;
}
现在，当客户端检查页面并删除 disabled 属性时，该值未绑定，因此未更新。

【讨论】：