Digamos que tengo un elemento en Blazor. Quiero establecer el estilo de los elementos según el valor del campo de entrada en Blazor. Soy consciente de que puede hacer esto usando bloques if else en el código html, sin embargo, quiero evitar esto ya que la base del código crece extremadamente rápido. Sería mejor una función que evalúe el objeto entrante y lo estilice.
por ejemplo, si tengo el elemento a continuación que pasa un valor, el valor se pasa a una función.
<th><InputText placeholder="First Name" id=FirstName @bind-Value="@filterModel.FirstName">First Name</InputText></th>
Función
private async void UpdateVisibleData(object sender, FieldChangedEventArgs e){ Console.WriteLine(e.FieldIdentifier.FieldName + " Change Detected"); var fieldChanged = e.FieldIdentifier.FieldName; var IsEmptyString = FindEmptyStringInField(filterModel, fieldChanged); if(IsEmptyString){ element.style.setProperty('--my-variable-name', 'hotpink'); } }No he podido hacer funcionar la parte style.setproperty. No estoy seguro de qué otros métodos hay. Abierto a JSInterop. aunque preferible si puedo apuntar a la función style.setproperty y hacer que esto funcione.
O puede usar JSInterop así:
/wwwroot/js/ejemplo.js
export function examplefunction (Id, Color) { document.getElementById(Id).style.backgroundColor = Color; }página de la maquinilla de afeitar:
@inject IJSRuntime JS @code { private IJSObjectReference? module; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { module = await JS.InvokeAsync<IJSObjectReference>("import", "/js/example.js"); } } private async void UpdateVisibleData(object sender, FieldChangedEventArgs e){ var fieldChanged = e.FieldIdentifier.FieldName; await module.InvokeVoidAsync("examplefunction", fieldChanged, "hotpink"); } }Yo usaría ? operador para hacer HTML simple sin código adicional
<input type="text" placeholder="First Name" id=FirstName @bind=@textInput style='@(String.IsNullOrEmpty(textInput) ? "background-color: hotpink;" : "")' />Esta no es una respuesta exacta al apuntar a la identificación. sin embargo, encontré una solución para esto que no es tan mala para el ensamblaje web al pasar una función condicional a la etiqueta de estilo en el elemento. No hace crecer la base de código tanto como usar bloques if else y declarar cadenas individuales. aunque seguir apuntando a la identificación del elemento en función de los cambios de eventos de campo sería menos exigente desde el punto de vista computacional, ya que la función condicional se verifica para cada cambio de estado en cada campo que la usa en lugar de solo llamarse en la identificación del elemento si se cumple la condición.
html
<th><InputText style="@StyleForEmptyString(filterModel.FirstName)" placeholder="First Name" id=FirstName @bind-Value="@filterModel.FirstName">First Name</InputText></th>@código{
private string StyleForEmptyString(string fieldValue) { if (fieldValue == ""){ return "outline:none; box-shadow:none;"; } return ""; }```