Building Forms With Validation

By Ashwin Venugopal -

 





Exploring Form Elements

HTML includes a variety of form elements that are fully usable in Blazor. Ultimately, Blazor generates HTML as output. Additionally, Blazor provides components that enhance functionality, making it beneficial to utilize these components rather than relying solely on HTML elements. This approach offers us excellent functionality at no additional cost. Blazor offers the following components:

  • EditForm
  • InputBase < >
  • InputCheckbox
  • InputDate <TValue>
  • InputNumber <TValue>
  • InputSelect <TValue>
  • InputText
  • InputTextArea
  • InputRadio
  • InputRadioGroup
  • ValidationMessage
  • ValidationSummary

 

EditForm

EditForm functions as a form tag but offers additional functionalities. It generates an EditContext instance as a cascading value, allowing all components within EditForm to share the same EditContext.

EditContext monitors the metadata related to the editing process, including which fields have been modified, and keeps track of any validation messages. You must either provide a model (a class intended for editing) or an EditContext instance. For most scenarios, it is preferable to assign a model, but in more complex situations, you might want to initiate the EditContext manually. EditForm has the following events that can be used to handle form submissions:  

OnValidSubmit gets triggered when the data in the form validates correctly.

OnInvalidSubmit gets triggered if the form does not validate correctly.

OnSubmit gets triggered when the form is submitted, regardless of whether the form validates correctly or not. Use OnSubmit if you want to control the validation yourself.

InputBase < >

All the input classes in Blazor are based on the InputBase class. This class provides a variety of features that can be utilized across all input components. It manages AdditionalAttributes, implying that when we include additional attributes to the tag, they will be automatically applied to the output. Consequently, the components that inherit from this class can utilize any HTML attributes, as they will be included in the final output.

InputBase includes a Value property that we can bind to, along with an event callback named ValueChanged that triggers when the value is modified. We can also update the DisplayName to ensure that the automated validation messages accurately represent the intended name instead of defaulting to the property name. It is important to note that not all controls support the DisplayName property, and some properties are exclusively utilized within the component itself.

InputCheckbox

The InputCheckbox component will render as <input type= “checkbox”>.

InputDate <TValue>

The InputDate component will display as an <input type="date">. We can utilize both DateTime and DateTimeOffset as the values for the InputDate component. There is no option to format the date; it will adhere to the browser's current configuration. This functionality is intentional and aligns with the HTML5 specifications.

InputNumber <TValue>

The InputNumber component will render as <input type= “number”>. We can use Int32, Int64, Single, Double, and Decimal as values for the InputNumber component.

InputSelect <TValue>

The InputSelect component will render as <select>.

InputText

The InputText component will render as <input type= “text”.

InputTextArea

The InputSelect component will render as <textarea>.

InputRadio

The InputRadio component will render as <input type= “radio”>.

InputRadioGroup

The InputRadioGroup component will render as <Input type= “radio”>.

ValidationMessage

The ValidationMessage component is capable of displaying specific error messages related to individual properties. Our goal is to utilize this component to present validation errors beneath a form element. To add a ValidationMessage component, we have to specify the For property with the name of the property we want to show the validation errors for.

ValidationSummary

The ValidationSummary component will show all the validation errors as a list for the entire EditContext. To make sure our input controls match the Bootstrap theme (or whatever theme we might be using), we can create our own Custom validation class.

Conclusion

All the components of Blazor are discussed above.

 






























Comments

Post a Comment

Popular posts from this blog

How AMI Store & Restore Works?

By Ashwin Venugopal -
Image
  CreateStoreImageTask The CreateStoreImageTask API stores an AMI as a single object in an S3 bucket. The API initiates a task that collects all the data from the AMI and its associated snapshots, subsequently using an S3 multipart upload to store this data in an S3 object. It gathers all elements of the AMI, including most of the non-Region-specific metadata and all EBS snapshots included in the AMI, and consolidates them into a single object in S3. During the upload process, the data is compressed to minimize the space utilized in S3, which means that the S3 object could be smaller than the total sizes of the snapshots in the AMI. If the account making this API call has access to AMI and snapshot tags, they will be retained. The S3 object shares the same ID as the AMI, except it has a .bin extension. Additionally, the S3 metadata tags for the object include the AMI name, AMI description, AMI registration date, AMI owner account, and a timestamp indicating when the store operation...
Read more

Create A Store Image Task

By Ashwin Venugopal -
Image
  Introduction When you save an AMI in an S3 bucket, a task for storing the image is initiated. This store image task allows you to track the progress and result of the procedure. Securing your AMIs It is crucial to verify that the S3 bucket is set up with adequate security to protect the content of the AMI and that this security is upheld for the entire duration that the AMI objects are stored in the bucket. If this cannot be achieved, it is advisable to refrain from using these APIs. Make sure that public access to the S3 bucket is prohibited. It is suggested to activate Server-side encryption for the S3 buckets where you keep the AMIs, even though it’s not mandatory. When AMI snapshots are transferred to the S3 object, they are sent over TLS connections. It is possible to save AMIs that contain encrypted snapshots; however, the snapshots will be decrypted during the storing process. Identify the source AMI used to create a new Amazon EC2 AMI You can determine the AMI that was us...
Read more

Information Protection Scanner: Resolve Issues with Information Protection Scanner Deployment

By Ashwin Venugopal -
Image
  About If you are experiencing problems with the Microsoft Purview Information Protection scanner, check the health of your deployment by utilizing the Start-ScannerDiagnosticsPowerShell cmdlet to start the scanner diagnostic tool. The diagnostics tool checks the following details and then creates a log files with the results: Whether the database is up to date. Whether network URLs are accessible. Whether there's a valid authentication token and policy can be acquired. Whether the profile is defined in the Azure portal. Whether offline/online configuration exists and can be acquired. Whether the rules configured are valid.  The Start-ScannerDiagnostics command does not perform a comprehensive check of prerequisites. If you encounter problems with the scanner, you need to verify that your system meets the scanner's requirements, and that your scanner's configuration and installation are finished.  Verify Scanning Details Per Scanner Node and Repository Run the Get-ScanSt...
Read more