I want to show Components in a tabs , so first of all create few components. In this project we have three components, First View Component public class AllViewComponent : ViewComponent { private readonly UserManager<ApplicationUser> _userManager; public AllViewComponent(UserManager<ApplicationUser> userManager) { _userManager = userManager; } public async Task<IViewComponentResult> InvokeAsync() { List<StudentViewModel> allUsers = new List<StudentViewModel>(); var items = await _userManager.Users.ToListAsync(); foreach (var item in items) { allUsers.Add(new StudentViewModel {Id=item.Id, EnrollmentNo = item.EnrollmentNo, FatherName = item.FatherName, Name = item.Name, Age = item.Age, Birthdate = item.Birthdate, Address = item.Address, Gender = item.Gender, Email = item.Email }); }
Asp.Net MVC uses such type of classes in which each field may contains specific validation rules using data annotations, to let the user interact with those only. These fields may contains some extra fields to be used as a temporary purpose.
Create two classes in the Models folder named Student and Employee as written below:
public class Student
{
public string Name { get; set; }
public int Age { get; set; }
public string City { get; set; }
}
public class Employee
{
public int EmpId { get; set; }
public string EmpName { get; set; }
}
Create a folder in our solution named ViewModels and add a class named Student_EmployeeViewModel which will have the following code.
public class Student_EmployeeViewModel
{
public List<Student> Students { get; set; }
public List<Employee> Employees { get; set; }
}
Come to our Controller (Home controller) and add an Action (Student_Employee) which will be type of HttpGet. This action will have some lines of code as below which contains two list of student and employee and then assign them to the newly created object of Student_EmployeeViewModel.
public ActionResult Student_Employee()
{
List<Student> studentList = new List<Student>();
studentList.Add(new Student() { Name = "Student 1", Age = 24 });
studentList.Add(new Student() { Name = "Student 2", Age = 25 });
studentList.Add(new Student() { Name = "Student 3", Age = 23 });
List<Employee> empList = new List<Employee>();
empList.Add(new Employee() { EmpName = "Employee 1", EmpId = 101 });
empList.Add(new Employee() { EmpName = "Employee 2", EmpId = 102 });
empList.Add(new Employee() { EmpName = "Employee 3", EmpId = 103 });
Student_EmployeeViewModel vm = new Student_EmployeeViewModel();
vm.Students = studentList;
vm.Employees = empList;
return View(vm);
}
Create an empty view by right clicking on this action and then Add View dialog box as discussed earlier. Write the following code in this view which will have two list as defined in our ViewModel.
@model MvcApplication1.Models.Student_EmployeeViewModel
@{
ViewBag.Title = "Student_Employee";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Students List</h2>
@foreach (var item in Model.Students)
{
<option>@item.Name @item.Age</option>
}
<h2>Employees List</h2>
@foreach (var item in Model.Employees)
{
<option>@item.EmpName @item.EmpId</option>
}
In the above code, we run two loops for each list of student and employee and display their name and age/id on the page.
Run this project and write the address of this action in the address bar, this will shows all the data of student as well as employees we have added in the action.
Create two classes in the Models folder named Student and Employee as written below:
public class Student
{
public string Name { get; set; }
public int Age { get; set; }
public string City { get; set; }
}
public class Employee
{
public int EmpId { get; set; }
public string EmpName { get; set; }
}
Create a folder in our solution named ViewModels and add a class named Student_EmployeeViewModel which will have the following code.
public class Student_EmployeeViewModel
{
public List<Student> Students { get; set; }
public List<Employee> Employees { get; set; }
}
Come to our Controller (Home controller) and add an Action (Student_Employee) which will be type of HttpGet. This action will have some lines of code as below which contains two list of student and employee and then assign them to the newly created object of Student_EmployeeViewModel.
public ActionResult Student_Employee()
{
List<Student> studentList = new List<Student>();
studentList.Add(new Student() { Name = "Student 1", Age = 24 });
studentList.Add(new Student() { Name = "Student 2", Age = 25 });
studentList.Add(new Student() { Name = "Student 3", Age = 23 });
List<Employee> empList = new List<Employee>();
empList.Add(new Employee() { EmpName = "Employee 1", EmpId = 101 });
empList.Add(new Employee() { EmpName = "Employee 2", EmpId = 102 });
empList.Add(new Employee() { EmpName = "Employee 3", EmpId = 103 });
Student_EmployeeViewModel vm = new Student_EmployeeViewModel();
vm.Students = studentList;
vm.Employees = empList;
return View(vm);
}
Create an empty view by right clicking on this action and then Add View dialog box as discussed earlier. Write the following code in this view which will have two list as defined in our ViewModel.
@model MvcApplication1.Models.Student_EmployeeViewModel
@{
ViewBag.Title = "Student_Employee";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Students List</h2>
@foreach (var item in Model.Students)
{
<option>@item.Name @item.Age</option>
}
<h2>Employees List</h2>
@foreach (var item in Model.Employees)
{
<option>@item.EmpName @item.EmpId</option>
}
In the above code, we run two loops for each list of student and employee and display their name and age/id on the page.
Run this project and write the address of this action in the address bar, this will shows all the data of student as well as employees we have added in the action.
Comments
Post a Comment