Model binding and TextBoxFor HTML Helper in ASP.NET MVC 5

Simple Binding


In simple binding, the parameter in the action method is the same name with model properties.
MVC Default Binder will automatically map correct action method for the incoming request.


namespace WebApplication1.Models
{
	public class EmployeeModel
	{
		public string Name{ get; set; }
		public decimal Salary{ get; set; }
	}
}

Controller :


public ActionResult Index(string Name, decimal Salary)
{
	ViewBag.Name = Name;
	ViewBag.Salary = Salary;
	return View();
}

TextBox HTML Helper and Class Binding

The HtmlHelper class includes the extension method TextBox() that renders the HTML control <input type="text"> in the razor view.


It is recommended to use the generic TextBoxFor<TModel, TProperty> extension method that creates <input type="text"> control.


The first type parameter is for the model class, and second type parameter is for the property.


The following example shows how to render a textbox for the CustomerName property of the Customer model.

@model Customer

@Html.TextBoxFor( m => m.CustomerName )

In the above example, the lamba expression m => m.CustomerName specifies the CustomerName property of the Customer class to bind with a textbox.
It generates an input text element with id and name attributes, as shown below.


<input type="text" id="CustomerName" name="CustomerName" value="" />

The following example renders a textbox with the class attribute.

@model Customer

@Html.TextBoxFor( m => m.CustomerName, new { @class = "form-control" } )

HTML Result :


<input type="text" class="form-control" id="CustomerName" name="CustomerName" value="" /> 

Class Binding


Model class is passed as a parameter in action method.


The data from the form is mapped to the following model class


public class Customer
{

	[Required]
	public string CustomerName{ get; set; }

}

View :



@model WebApplication1.Models.Customer

@using(Html.BeginForm("Index", "Home", FormMethod.Post))
{
	@Html.TextBoxFor(model => model.CustomerName)
	@Html.ValidationMessageFor(model => model.CustomerName)
	<button type="submit">Send</button>
}


Controller


public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(Customer customer)
    {
        if (ModelState.IsValid)
        {
            //TODO: AddCustomer(customer);
        }

        return View("Index", customer);
    }
}

The "Home" views folder matches HomeController name.


Complex Binding


In this example, we will show you how to bind multiple models in a single view.


namespace WebApplication1.Models
{
	public class StudentModel
	{
		public int ID{ get; set; }
		public decimal Name{ get; set; }
		
		public CourseModel courseModel { get; set; }
	}
	public class CourseModel
	{
		public int ID { get; set; }
        public string Course { get; set; }
	}
}

We have added courseModel as a property in StudentModel, so StudentModel has right to access CourseModel.


[HttpPost]
public ActionResult Index(StudentModel model)
{
	ViewBag.Id = model.Id;
	ViewBag.Name = model.Name;
	ViewBag.Course = model.courseModel.Course;
	return View();
	//or return View(model);
}

@model WebApplication1.Models.StudentModel

@using(Html.BeginForm("Index", "Home", FormMethod.Post))
{
    <table>
        <tr>
            <td>ID</td>
            <td>@Html.TextBoxFor(model => model.Id)</td>
        </tr>
        <tr>
            <td>Name</td>
            <td>@Html.TextBoxFor(model => model.Name)</td>
        </tr>
        <tr>
            <td>Course</td>
            <td>@Html.TextBoxFor(model => model.courseModel.Course)</td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="Submit"></td>
        </tr>
    </table>
}
<p>
    ID : @ViewBag.ID<br />
    Name : @ViewBag.Name<br />
    Course : @ViewBag.Course<br />
</p>