Getting textbox input value in ASP.Net MVC

You want to get the input using textbox in your ASP.Net MVC application.

And you want to get that value in your controller’s action method for saving it to database or for further processing.

Before arriving at the solution, let us revisit a simple fact

All browsers can understand only HTML,CSS and Javascript.

The above statement is true irrespective of the technology that you use for building web applications. All web technologies such as ASP.Net Web Forms, ASP.Net MVC, Ruby on Rails generate the HTML dynamically as browser cannot understand your C# code or Ruby code.

Below picture shows you the demarcation between client side and server side

 

 

Having this fact reframes the problem at our hand.

The browser can understand only html textbox input (<input type=”text”>). How can we generate this input text HTML element and get the data back easily and effectively in ASP.Net MVC application?

There are several ways to do this. Let us discuss about few of most frequently used methods

1. Using plain HTML elements
2. Using HTML Helpers
3. Using HTML Helpers with Model

Using plain HTML elements:

In this method, we are going to use plain HTML elements in our View for getting the input.

I have created a simple controller by name “UserController”

public class UserController : Controller
{
// GET: User
  public ActionResult Add()
  {
    return View();
  }
}

I’ve added the view for the same – just a form to hold the html input text box and submit button.

<form action="/" method="post">

UserName :<input type="text" name="username" />

<input type="submit" value="Submit" />

</form>

These are just plain HTML elements and have nothing to do with ASP.Net MVC.

Let me add the POST action method for the same

[HttpPost]

public ActionResult Add(string username)

{

  return Content("Received Username:" + username);

}

We are not doing anything special here – just getting the username from the submitted form and displaying it back again to the user.

However, there is one important thing to be noted here

Model binding tries to match the value from your view to controller action method parameters. It does this by looking into many sources – from your html element names, route values etc..  But we are going to giving hint Model binding by giving same name attribute to your action parameter method name.

name attribute of your html element should match with action method parameter name

You would not get the actual input entered by the user in your action method if any of the following true

1. If the name attribute does not match with the action method parameter name
2. If you use only id attribute in your html element- even if it matches with your action method parameter name, it will not work

Using HTML Helpers:

Let us try to do the same with HTML Helpers. As the name implies HTML Helpers are just helpers – they help us in generating the HTML.

I have added another action method for demonstrating the HTML Helper

public ActionResult AddWithHTMLHelper()

{
  return View();
}

And the corresponding View

@using (Html.BeginForm("AddWithHTMLHelper","User",FormMethod.Post))
{
  @:UserName : @Html.TextBox("username")
  <input type="submit" value="Submit"/>
}

We are using couple of HTML helpers here

1. BeginForm – which would generate the form element – first and second parameter are the action and controller values
2. TextBox – This html helper would generate the input element of type text.

The benefit of using HTML helper instead of plain HTML element is that it would use the parameter passed for name and id attribute of generated HTML element. This would prevent us in making any typo issues such as specifying incorrect name value or specifying it in id attribute instead of name attribute in your html element.

The POST action method is no different. You just need to mention the same name in action method parameter.

[HttpPost]

public ActionResult AddWithHTMLHelper(string username

{
  return Content("Received Username:" + username);

}

 

 

Using HTML Helpers with Model:

If you are getting only couple of temporary values from user, using HTML Helpers would do. If you want to get some information backed by your model, you would use HTML helpers with model for the same. HTML Helpers with models would generate the correct html based on the passed model information.

Create User.cs in Models folder – This user class is our model

public class User
{
  public string username { get; set; }
  public string age { get; set; }
}

We are passing the empty model to user – This model would be filled with user’s data when he submits the form.

public ActionResult AddWithHTMLHelperAndModel()
{
  var model = new User();
  return View(model);
}

And View has the following content. The first line tells the view that what type of model you are passing. This information is needed for strong typing in using model information.

@model TextInput.Models.User
@using (Html.BeginForm("AddWithHTMLHelperAndModel", "User", FormMethod.Post))
{
  @:UserName : @Html.TextBoxFor(m => m.username)
  @:Age : @Html.TextBoxFor(m => m.age)
  <input type="submit" value="Submit" />
}

By convention, all HTML helpers with associated models would suffix with ‘For’. Earlier we have used, @Html.TextBox. Now, we are using @Html.TextBoxFor when using with Model

[HttpPost]
public ActionResult AddWithHTMLHelperAndModel(User user)
{
  return Content("Received Username:" + user.username + " Age:"+user.age);
}

If you like this article, please subscribe. I’ll send you useful articles along the way.

[x_subscribe form=”277″]