Html.Editor and Html.EditorFor in MVC Framework

March 13, 2018 0 Comments A+ a-

ASP .Net

Html.Editor and Html.EditorFor

You learn on this topic for How can you create html elements based on the model properties type in MVC Framework by using HTMLHelper methods.
HTMLHelper class provide two extension methods for generate hidden field.
  • Html.Editor()
  • Html.EditorFor()

Html.Editor()

  • Html.Editor() is loosely typed method. So It always require property name passed as string.
  • It will generate a html elements based on the model's properties type.
  • It doesn't get error at compile time.
It have so many overloaded methods such as
  • Editor(String)
  • Editor(String, Object)
  • Editor(String, String)
  • Editor(String, String, Object)
  • Editor(String, String, String)
  • Editor(String, String, String, Object)
Known more details on the Editor, Please click it here.

Html.EditorFor()

  • Html.EditorFor() also used to generate input field in view for the model object property specified using a lambda expression.
  • It will generate a html elements based on the model's properties type.
  • This method is a strongly typed extension method.
  • It gets error at compile time, if you assign wrong property name.
It have so many overloaded methods such as
  • EditorFor<TModel, TValue>(HtmlHelper<TModel>, Expression<Func<TModel, TValue>>)
  • EditorFor<TModel, TValue>(HtmlHelper<TModel>, Expression<Func<TModel, TValue>>, Object)
  • EditorFor<TModel, TValue>(HtmlHelper<TModel>, Expression<Func<TModel, TValue>>, String)
  • EditorFor<TModel, TValue>(HtmlHelper<TModel>, Expression<Func<TModel, TValue>>, String, Object)
  • EditorFor<TModel, TValue>(HtmlHelper<TModel>, Expression<Func<TModel, TValue>>, String, String)
  • EditorFor<TModel, TValue>(HtmlHelper<TModel>, Expression<Func<TModel, TValue>>, String, String, Object)
Known more details on the EditorFor, Please click it here.
We will discuss this on the below example.
EmployeeModel.cs
   
 public class EmployeeModel
        {
        public int Id { set; get; }
        public string Name { set;get; }
        public float Salary { set; get; }
        public bool EmployeeType { set; get; }
        public DateTime DOJ { set; get; }
        }

EmployeeController.cs
   
  public class EmployeeController : Controller
    {
        public ActionResult Create()
        {          
            return View();
        }
    }

Create.cshtml
   
@model MVCIntro1.Models.EmployeeModel
@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Create

@using (Html.BeginForm()) {

Editor

@:Employee ID : @Html.Editor("Id", new { @class = "form-control" }) @:Employee Name : @Html.Editor("Name", new { @class = "form-control" }) @:Salary : @Html.Editor("Salary", new { @class = "form-control" }) @:Employee Type : @Html.Editor("EmployeeType", new { @class = "form-control" }) @:Date Of Join : @Html.Editor("DOJ", new { @class = "form-control" })

EditorFor

@:Employee ID : @Html.EditorFor(Model=> Model.Id, new { @class = "form-control" }) @:Employee Name : @Html.EditorFor(Model => Model.Name, new { @class = "form-control" }) @:Salary : @Html.EditorFor(Model => Model.Salary, new { @class = "form-control" }) @:Employee Type : @Html.EditorFor(Model => Model.EmployeeType, new { @class = "form-control" }) @:Date Of Join : @Html.EditorFor(Model => Model.DOJ, new { @class = "form-control" }) }
We have successfully completed our code part. Let's run the application and see the appropriate HTML output
HTML Output:
   

Editor

Employee ID : Employee Name : Salary : Employee Type : Date Of Join :

EditorFor

Employee ID : Employee Name : Salary : Employee Type : Date Of Join :