The Syncfusion editor controls supports the strongly typed HTML helpers represented by lambda expressions that have the model or template passed into the view. The Extension method is used to get a value from the model.
The Strongly-Typed HTML helper (i.e., NumericTextBox) takes lambda as a parameter that tells the helper, which element of the model to be used in the typed view.
The Strongly typed views are used for rendering specific types of model objects, instead of using the general ViewData structure.
The following list of controls supports the Strongly-Typed HTML Helper
The following steps explain how to use the strongly typed helpers to create a Numeric Textbox.
Add a class name “EditorValue” in the Models folder and replace the code with the following code:
public class EditorValue
{
public int number { set; get; }
public EditorValue(int value)
{
number = value;
}
public EditorValue() { }
}
using Syncfusion.EJ2.Inputs;
public ActionResult Index()
{
//Editor For
NumericTextBox editor = new NumericTextBox();
editor.Enabled = false;
ViewData["editmodel"] = editor;
return View(new EditorValue(66));
}
<div>
@using (Html.BeginForm())
{
@Html.EJS().NumericTextBoxFor(model => model.number, (Syncfusion.EJ2.Inputs.NumericTextBox)ViewData["editmodel"]).Render();
@Html.EJS().Button("btn").Content("Post").Render()
}
</div>
The following steps explain how to get the values by using the Scaffolding methods in Post back.
[HttpPost]
public ActionResult Index(EditorValue model)
{
//Editor For
NumericTextBox editor = new NumericTextBox();
editor.Enabled = true;
ViewData["editmodel"] = editor;
return View(model);
}
On clicking the button, the Post method will be triggered. In that, the selected value will be obtained as follows.
In the server-side validation, the page must be submitted via a postback to validate on the server and if the model data is not valid, the server sends a response back to the client.
The best way to validate a model is by using the Data Annotations that has a set of attributes and classes defined in the System.ComponentModel.DataAnnotations assembly.
Step 1: Add the following namespace to the “EditorValue” model.
using System.ComponentModel.DataAnnotations;
The Data Annotations allows to decorate model classes with the metadata. This metadata describes a set of rules that are used to validate a property.
The following Data Annotation attributes are used for the Numeric Textbox. Required: Indicates that the property is a required field.
Step 2: Next, Update the number property of the “EditorValue” class as “Required Field” by adding the following line
public class EditorValue
{
[Required(ErrorMessage = "Numeric Textbox is Required")]
public int number { set; get; }
}
Step 3: Modify the view page as follows:
<div>
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
@Html.EJS().NumericTextBoxFor(model => model.number, (Syncfusion.EJ2.Inputs.NumericTextBox)ViewData["editmodel"]).Render()
@Html.ValidationMessageFor(model => model.number)
@Html.EJS().Button("btn").Content("Post").Render()
}
</div>
When you press the “POST” button on this page then it will post the data to the server and the code written with in EditorFor action will validate the NumericTextBox value by checking the ModelState.IsValid property. If the NumericTextBox value is not selected, the ModelState.IsValid will return false and display error message.