What is the best method for two way binding and disabling editable text fields in Blazor? - asp.net-core

Question

For POCOs with lots of fields I find it really convenient to have a simple form/component binding structure like this
< input type="text" bind="#Person.FirstName" />
< input type="text" bind="#Person.LastName" />
< input type="text" bind="#Person.Address" />
Where I then have save or create new buttons/events to deal with object at a time situations. In other words the entire object is bound to an editable component making life super easy to bring objects from the DB for editing and back into the db.
What I find annoying are situations where I have to both display an object's details but make sure parts of it are locked/un-editable based on certain conditions. Let's say I can't change LastName for some business logic reason. This:
< input type="text" bind="#Person.LastName" disabled="#somecondition" />
is unsafe as users can potentially inspect the page, modifying the disabled flag and still cause the two way binding to be enabled and changes overwritten in the existing save event. The workarounds I find are annoying e.g., you can use if code blocks to switch between textboxes and plain-text binding, or you just do all the business logic in the event which introduced more logic for error reporting.
Here is a compromise that I think "works":
if(some_protective_condition) { < input type="text" bind="#Person.Address" /> }
else { < span>#Person.Addressv< /span>}
If I understand correctly most of these workarounds essentially play with the DOM or some aspect of visibility ensuring the editable control does not get rendered. What is the coding pattern would you guys use for these situations of interface level locking?
EDIT/TLDR: Looking for the best/safe least code pattern to maintain two-way binding, display a value and make it editable/non-editable in certain situations.
Suggestions welcome as I am trying to build good solid long term habits.
Tried several techniques. Looking for the best option if I have missed something.

Answer 1

I think what your looking for is InputBase. Creating a component that inherits from InputBase is going to give you access to additional features like validation styles (#CssClass) on top of two-way binding. You can use the #attributes on the input inside your component to add readonly and disabled attributes according to your POCO.
For InputBase have a peek at my answer here. Disabling the input by adding #attributes="GetAttributes()" to the html input.
[Parameter] public bool IsReadOnly { get; set; } = false;
[Parameter] public bool IsDisabled { get; set; } = false;
Dictionary<string,object> GetAttributes()
{
// Required should be handled by the DataAnnotation.
var dict = new Dictionary<string, object>();
if (IsReadOnly)
{
dict.Add("readonly", true);
}
if (IsDisabled)
{
dict.Add("disabled", true);
}
return dict;
}

Answer 2

I think the 'Blazor Way' to integrate business rules into your views is to use AuthorizeView...
<AuthorizeView Policy="CanEditAddress">
<Authorized>
< input type="text" bind="#Person.Address" />
</Authorized>
<NotAuthorized>
< span>#Person.Addressv< /span>
</NotAuthorized>
</AuthorizeView>
The docs show how to populate authorization policies using cascading parameters...
https://learn.microsoft.com/en-us/aspnet/core/blazor/security/?view=aspnetcore-7.0#expose-the-authentication-state-as-a-cascading-parameter
If your rules are not really 'business rules' but are 'presentation rules' (like your forms have an edit mode vs a display mode) then the above pattern is still a good way to go. That is, I would create a class named 'PresentationView' that is the equivalent of AuthorizationView but for presentation rules.