Checkbox Switch Button Razor

BS6: el mismo código para check normal, sólo cambia form-switch en el div contenedor

<div class="col-auto text-end form-check form-switch">
    <input id="checkPositive" type="checkbox" class="form-check-input" @bind="ShowNuevoFabricante"/>
    <label class="form-check-label" for="checkPositive"> Nuevo</label>
</div>

Para que se visualice como un switch necesitamos:

• crear un div que lo contenga como custom-control custom-switch
• Crear una label con el atributo for (aunque no se quiera poner nada, es imprescindible crearla con nbsp dentro)
• Aplicar la clase custom-control-input

En código funciona como un checkbox normal, se puede enlazar con una propiedad y detectar cambios en el SET

<div class="col-4">
   <p class="formLabel">Ocultar Negativos</p>
   <div class="custom-control custom-switch" >
      <input id="checkPositive" type="checkbox" class="custom-control-input"    @bind="ViewOnlyPositiveTrend" />
      <label class="custom-control-label" for="checkPositive"> Modificar</label>
   </div>
</div>

bool ViewOnlyPositiveTrend
{
   get
   {
       return _viewOnlyPositiveTrend;
   }
   set
   {
      _viewOnlyPositiveTrend = value;
      RefreshFromMemory();
   }
}

Anuncio publicitario

Formularios con botón externo

En Blazor es muy sencillo usar botones externos en lugar de un submit de formulario ya que el model enlazado está disponible en servidor igualmente.

No obstante, si usamos esta opción nos perdemos las validaciones html5 del formulario, atributo required, max-min…… La alternativa es que el botón sea sólo un submit y el evento servidor lo llame el formulario en el onsubmit. Si el botón está en el formulario esto ya es automático, pero si está fuera debemos configurar la propiedad form del botón.

<form id="frmModalDocumental" @onsubmit="SaveLimiteDocumental">
                <SelectMarea EnableEdit=true required></SelectMarea>
                <SelectEspeciePesca EnableEdit=true required></SelectEspeciePesca>
                <input type="number" min="1" max="1000" required />
</form>

<button type="submit" form="frmModalDocumental">Guardar</button>