Introduction
This article explains how to access data from a view to the controller's action method. The action method is a simple C# method that can be parameterized or without a parameter in the controller.We use two types of methods to handle our browser request; one is HTTP GET and another is HTTP POST. When we call an action method by a request's URL by the browser then the HTTP GET method will be called but when a request is from a button click event then the HTTP POST method will be called. So in this article I am going to explaining how to access view input field data in the controller's action method when a HTTP POST request is called.
Example for GET and POST Request Type
To understand how to access view input field data in the controller's action method (POST), we create a "Calculate Simple Interest" application. This application gets Principle, Rate and Time as user input and generates simple interest. So let's proceed with the application.Create an action method in the
CalculateSimpleInterest
controller (CalculateSimpleInterestController.cs) that renders the view on the UI.
Collapse | Copy Code
public ActionResult SimpleInterest()
{
return View();
}
Create a view to get user input from the UI, so the code is:Calculate Simple Interest
Collapse | Copy Code
<fieldset>
<legend>Calculate Simple Interest</legend>
@using (Ajax.BeginForm("CalculateSimpleInterestResult","CalculateSimpleInterest",
new AjaxOptions { UpdateTargetId = "divInterestDeatils" }))
{
<div id="divInterestDeatils"></div>
<ol>
<li>
@Html.Label("Amount")
@Html.TextBox("txtAmount")
</li>
<li>
@Html.Label("Rate")
@Html.TextBox("txtRate")
</li>
<li>
@Html.Label("Year")
@Html.TextBox("txtYear")
</li>
</ol>
<button>Calculate</button>
}
</fieldset>
So now the screen is ready to get input and it shows it as:
Figure 1.1 Input screens to calculate simple interest
Get the view's data in the Action Method
I will now explain the four ways to get the view's data in the controller action. These are:- Using Traditional approach
- Using the
FormCollection
Object - Using the Parameters
- Strongly type model binding to view
Using Traditional Approach
In the traditional approach we use the request object of theHttpRequestBase
class. The request object has view input field values in name/value
pairs. When we create a submit button then the request type POST is
created and calls the POST method.
Figure 1.2 Requested Data
We have four data, those are in Name-Value pairs. So we can access
these data in a POST method by passing the Name as an indexer in the
Request and get values. Our POST method means the controller action that
handles the POST request type is:
Collapse | Copy Code
[HttpPost]
public ActionResult CalculateSimpleInterestResult()
{
decimal principle = Convert.ToDecimal(Request["txtAmount"].ToString());
decimal rate = Convert.ToDecimal(Request["txtRate"].ToString());
int time = Convert.ToInt32(Request["txtYear"].ToString());
decimal simpleInteresrt = (principle*time*rate)/100;
StringBuilder sbInterest = new StringBuilder();
sbInterest.Append("<b>Amount :</b> " + principle+"<br/>");
sbInterest.Append("<b>Rate :</b> " + rate + "<br/>");
sbInterest.Append("<b>Time(year) :</b> " + time + "<br/>");
sbInterest.Append("<b>Interest :</b> " + simpleInteresrt);
return Content(sbInterest.ToString());
}
When it executes, we get simple interest as the result as in the following:
Figure 1.3 Output screen after getting response
Using the FormCollection ObjectWe can also get post requested data by the
FormCollection
object. The FormCollection
object also has requested data in the name/value collection as the Request object. To get data from the FormCollection
object we need to pass it is as a parameter and it has all the input field data submitted on the form.
Collapse | Copy Code
[HttpPost]
public ActionResult CalculateSimpleInterestResult(FormCollection form)
{
decimal principle = Convert.ToDecimal(form["txtAmount"].ToString());
decimal rate = Convert.ToDecimal(form["txtRate"].ToString());
int time = Convert.ToInt32(form["txtYear"].ToString());
decimal simpleInteresrt = (principle*time*rate)/100;
StringBuilder sbInterest = new StringBuilder();
sbInterest.Append("<b>Amount :</b> " + principle+"<br/>");
sbInterest.Append("<b>Rate :</b> " + rate + "<br/>");
sbInterest.Append("<b>Time(year) :</b> " + time + "<br/>");
sbInterest.Append("<b>Interest :</b> " + simpleInteresrt);
return Content(sbInterest.ToString());
}
It also gives the same output as Figure 1.3 shows.Using the Parameters
We can pass all input field names as a parameter to the post action method. The input field name and parameter name should be the same. These parameters have input field values that were entered by the user. So we can access view input field values from these parameters. The input field takes a string value from the user so the parameter should be a string type. There is no need to define a parameter in any specific sequence.
Collapse | Copy Code
[HttpPost]
public ActionResult CalculateSimpleInterestResult(string txtAmount, string txtRate, string txtYear)
{
decimal principle = Convert.ToDecimal(txtAmount);
decimal rate = Convert.ToDecimal(txtRate);
int time = Convert.ToInt32(txtYear);
decimal simpleInteresrt = (principle*time*rate)/100;
StringBuilder sbInterest = new StringBuilder();
sbInterest.Append("<b>Amount :</b> " + principle+"<br/>");
sbInterest.Append("<b>Rate :</b> " + rate + "<br/>");
sbInterest.Append("<b>Time(year) :</b> " + time + "<br/>");
sbInterest.Append("<b>Interest :</b> " + simpleInteresrt);
return Content(sbInterest.ToString());
}
It also gives the same output as Figure 1.3 shows.In all three approaches above we are parsing the string to a non-string type. If any of the parsing attempts fail then the entire action will fail. We are converting each value to avoid an exception but it also increases the amount of code. So we look at the fourth approach that would reduce the amount of code.
Strongly type model binding to view
We bind a model to the view; that is called strongly type model binding.Step 1: Create a Model for Simple Interest.
Collapse | Copy Code
namespace CalculateSimpleInterest.Models
{
public class SimpleInterestModel
{
public decimal Amount { get; set; }
public decimal Rate { get; set; }
public int Year { get; set; }
}
}
Step 2: Create an action method that render a view on the UI.We are passing an empty model to be bound to the view.
Collapse | Copy Code
public ActionResult SimpleInterest()
{
SimpleInterestModel model = new SimpleInterestModel();
return View(model);
}
Step 3: Create a strongly typed view that has the same screen as in Figure 1.1.
Collapse | Copy Code
@model CalculateSimpleInterest.Models.SimpleInterestModel
@{
ViewBag.Title = "SimpleInterest";
}
<h2>Calulate Simple Interest</h2>@using (Ajax.BeginForm("CalculateSimpleInterestResult","CalculateSimpleInterest",
new AjaxOptions { UpdateTargetId = "divInterestDeatils" }))
{
<fieldset>
<legend>Calulate Simple Interest</legend><div id="div1"></div>
<div class="editor-label">
@Html.LabelFor(model => model.Amount)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Amount)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Rate)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Rate)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Year)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Year)
</div>
<p>
<input type="submit" value="Calculate" />
</p>
</fieldset>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
Step 4: Create an action method that handles the POST request and processes the data.In the action method we pass a model as the parameter. That model has UI input field data. Here we do not need to parse and do not need to write extra code.
Collapse | Copy Code
[HttpPost]
public ActionResult CalculateSimpleInterestResult(SimpleInterestModel model)
{
decimal simpleInteresrt = (model.Amount*model.Year*model.Rate)/100;
StringBuilder sbInterest = new StringBuilder();
sbInterest.Append("<b>Amount :</b> " + model.Amount+"<br/>");
sbInterest.Append("<b>Rate :</b> " + model.Rate + "<br/>");
sbInterest.Append("<b>Time(year) :</b> " + model.Year + "<br/>");
sbInterest.Append("<b>Interest :</b> " + simpleInteresrt);
return Content(sbInterest.ToString());
}
It also gives the same output as Figure 1.3 shows.
No comments:
Post a Comment