View Model:
- View Model is middle layer of view and model.
Some Question are emerge which are following
- Where I should put my presentation logic
- Where I should put my Data transmission logic
- How I can create a view with multiple models.
Practical Implementation:
Step 1: Create Two Model Classes( Employee.cs and User.cs)
namespace ViewModel.Models
{
public class Employee
{
public string EmployeeName { get; set; }
public string Address { get; set; }
public DateTime DataofBirth { get; set; }
public int Salary { get; set; }
}
}
namespace ViewModel.Models
{
public class User
{
public string UserName { get; set; }
}
}
Step 2: Create a controller names Employee
public class EmployeeController : Controller
{
//
// GET: /Employee/
public ActionResult Index()
{
Employee emp = GetEmployee();
ViewBag.CurrentUser = GetUserName();
return View(emp);
}
public User GetUserName()
{
User u = new User();
u.UserName = "Yogesh";
return u;
}
private Employee GetEmployee()
{
Employee e = new Employee();
e.EmployeeName = "Ganesha";
e.Address = "Pratap Nagar";
e.DataofBirth = new DateTime(1983, 4, 3);
e.Salary = 10000;
return e;
}
}
Step 3. Add Index(Index.cshtml) View
@model ViewModel.Models.Employee
@{
Layout = null;
}
@{
ViewModel.Models.User CurrentUser = ViewBag.CurrentUser;
}
Employee Details
@Model.EmployeeName
@Model.Address
@Model.DataofBirth
@Model.Salary
Age:
@{
int age = DateTime.Now.Year – Model.DataofBirth.Year;
if(Model.DataofBirth>DateTime.Now.AddYears(-age))
{
age–;
}
@age
}
Salary:
@{
if (Model.Salary>20000)
{
@Model.Salary
}
else
{
@Model.Salary
}
}
Step 4. Run the Program and See the output
Step5 . Now We will create View Model
Create a Class (EmployeeVM) into Models folder and write following Code
namespace ViewModel.Models
{
public class EmployeeVM
{
public Employee emp { get; set; }
public User userobj { get; set; }
public EmployeeVM(Employee e1, User u2)
{
emp = e1;
userobj = u2;
}
public int Age
{
get
{
int age = DateTime.Now.Year - emp.DataofBirth.Year;
if(emp.DataofBirth>DateTime.Now.AddYears(-age))
{
age--;
}
return age;
}
}
public string SalaryColor
{
get
{
if(emp.Salary>20000)
{
return "Orange";
}
else
{
return "Red";
}
}
}
}
}
Step 6: Make changes in Employee Controller as following
namespace ViewModel.Controllers
{
public class EmployeeController : Controller
{
//
// GET: /Employee/
public ActionResult Index()
{
Employee emp = GetEmployee();
//ViewBag.CurrentUser = GetUserName();
User CurrentUser = GetUserName();
EmployeeVM empobj = new EmployeeVM(emp, CurrentUser);
//return View(emp);
return View(empobj);
}
public User GetUserName()
{
User u = new User();
u.UserName = "Yogesh";
return u;
}
private Employee GetEmployee()
{
Employee e = new Employee();
e.EmployeeName = "Ganesha";
e.Address = "Pratap Nagar";
e.DataofBirth = new DateTime(1983, 4, 3);
e.Salary = 10000;
return e;
}
}
}
Step 7 Make Changes in Index.cshtml
@*@model ViewModel.Models.Employee*@
@model ViewModel.Models.EmployeeVM
@{
Layout = null;
}
@*@{
ViewModel.Models.User CurrentUser = ViewBag.CurrentUser;
}*@
@*
*@
Employee Details
@*
@Model.EmployeeName
@Model.Address
@Model.DataofBirth
@Model.Salary
*@
@Model.emp.EmployeeName
@Model.emp.Address
@Model.emp.DataofBirth
@Model.emp.Salary
@*
Age:
@{
int age = DateTime.Now.Year – Model.DataofBirth.Year;
if(Model.DataofBirth>DateTime.Now.AddYears(-age))
{
age–;
}
@age
}
*@
Age:@Model.Age
@*
Salary:
@{
if (Model.Salary>20000)
{
@Model.Salary
}
else
{
@Model.Salary
}
}
*@
Salary:
@Model.emp.Salary
Step 8 : Now Run and Execute the program and see the results.