How to get the form control values in postback?

Getting form control values in post back

The list of form controls available in the Essential Studio are as follows:

1. DatePicker.
2. DateTimePicker.
3. Numeric, Currency, and Percentage Textbox.
4. Autocomplete and Dropdown list.
5. Mask Edit.
6. Checkbox and Radio Button.
7. RichTextEditor.

The form control value can be obtained on the post back in the following ways.

By using,

1. The Request object.
2. The FormCollection object.
3. The Parameters.
4. The Scaffolding method.

The following sections explain how to get the values on the post back in these controls. You can create the EJ form controls, and define the form method as post and also define the respective action for the form post back. This is demonstrated in the following code example.

@using (Html.BeginForm("FormPost", "Default", FormMethod.Post))
{   
    //Creates the EJ form controls.
    @Html.EJ().DatePicker("Date").Value("2/2/2015")
    @Html.EJ().DateTimePicker("DateTime").Value("04/15/2014 2:47 AM")    
    @Html.EJ().NumericTextbox("Counts").Value("1000")    
    @Html.EJ().CurrencyTextbox("Amount").Value("50")            
    @Html.EJ().PercentageTextbox("Percentage").Value("100")
    @Html.EJ().MaskEdit("Mask").MaskFormat("99-999-99999") 
    //Creates the Submit Button.    @Html.EJ().Button("btnDateSelect").Text("Submit").Type(ButtonType.Submit).Size(ButtonSize.Medium)
}

      // Gets: Default.
        public ActionResult Index()
        {
            return View();           
        }
        [HttpPost]
        public ActionResult FormPost()
        {
         //Gets the form element value and does the necessary action.
            return View();
        }

1. Getting post back value by using Request object: In the Request object approach, you can use the request object of the HttpRequestBase class. The request object has the input field values in the name or value pairs. When you submit the form, the post method is called. You have six data, those in the Name or Value pairs, so that you can access these data in a POST Action method by passing the Name as an indexer in the Request object and get values from it.  The following code example shows how to get the input fields values from the Request object.

        [HttpPost]
        public ActionResult FormPost()
        {
            // Gets the form element value and does the necessary action.
            // Request [name value of the field] - Gets the value.
            decimal count = Convert.ToDecimal(Request["Counts"].ToString());
            decimal amount = Convert.ToDecimal(Request["Amount"].ToString());
            string percentage = Request["Percentage"].ToString();
            decimal total = count * amount;
            return View();
        }

Figure 1: Post back value using Request object

2. Getting post back value by using the FormCollection object: You can also get the post requested data from the FormCollection object. The FormCollection object also has requested data in the name or value collection as the Request object. To get data from the FormCollection object, you need to pass it as a parameter, and it has all the input field data that submitted on the form. The following code example shows how to get the input fields values from the Form Collection.

     [HttpPost]
        public ActionResult FormPost(FormCollection form)
        {
            decimal count = Convert.ToDecimal(form["Counts"]);
            decimal amount = Convert.ToDecimal(form["Amount"]);
            decimal total = count * amount;
            return View();
        }

Figure 2: Post back value using the FormCollection object

3. Getting post back value by using the Parameters: You can pass all input field names as parameters to the post action method. The parameter name and input field name should be the same. These parameters have input field values that are entered to access the input field values from these parameters. The input field takes a string value from the end user, and so, the parameter should be a string type. There is no need to define a parameter in any specific sequence. The following code example shows how to get the input fields values from the parameters.

        [HttpPost]
        public ActionResult FormPost(string Counts, string Amount,string Percentage)
        {          
            decimal count = Convert.ToDecimal(Counts);
            decimal amount = Convert.ToDecimal(Amount);
            decimal total = count * amount;
            return View();
        }

Figure 3: Post back value using Parameters

4. Getting post back value by using Scaffolding method:

Strongly-Typed HTML Helper: The control supports strongly typed HTML helpers represented by lambda expressions that have model or template passed into the View. The Extension method is used to get a value from the model. The EditorFor takes lambda as a parameter that tells the helper with element of the model to use in the typed view. This enables the better compile-time checking of the views that allow you to find errors at build-time instead of at runtime, and also enables better code intelligence support within the view templates. The following steps explain how to get the values by using the Scaffolding methods.

1. Create the model for your requirement.

public class FormControls
    {
        public decimal count { get; set; }
        public decimal amount { get; set; }
        public decimal percentage { get; set; }
        public DateTime date { get; set; }
        public DateTime dateTime { get; set; }
    }

2. Create an action method that renders UI on the view page, and passes an empty model to be bound to the view page.

        public ActionResult Index()
        {
            FormControlModel model = new FormControlModel();
            return View(model);
        }

3. Create a strong typed view based on your model.

@model SyncfusionMvcApp.Models.FormControlModel
@using (Html.BeginForm("FormPost", "Default", FormMethod.Post))
{   
    //Creates the EJ form controls.
    @Html.EJ().DatePickerFor(model => model.date)
    @Html.EJ().DateTimePickerFor(model => model.dateTime)
    @Html.EJ().NumericTextBoxFor(model => model.count)
    @Html.EJ().CurrencyTextBoxFor(model => model.amount)
    @Html.EJ().PercentTextBoxFor(model => model.percentage)
    //Creates the Submit Button. @Html.EJ().Button("btnDateSelect").Text("Submit").Type(ButtonType.Submit).Size(ButtonSize.Medium)
}

4. Create an action method, FormPost that handles the Post request and processes the data. In the action method, you can pass a model as the parameter. That model has UI input field data.

    [HttpPost]
        public ActionResult FormPost(FormControlModel model)
        {
            decimal total = model.count * model.amount;
            return View();
        }

5. Select the values from the EJ form controls and post the form. You can get the selected values in the post action from the model as follows.

Figure 4: Selected values in the post action