在现代Web开发中，经常需要展示动态生成的数据表格。本文将介绍如何使用MVC架构和WebGrid Html Helpers来实现这一功能。将通过创建两个示例类——StudentModelClass和EmployeeClass——来展示如何动态填充数据并生成表格。
首先，定义了StudentModelClass类，它包含了学生ID、姓名、年龄和电话号码等信息。通过FillData方法，可以生成一个包含学生信息的列表。例如，创建了三个学生的信息，并将其添加到列表中。
public class StudentModelClass
{
public int studentId { get; set; }
public string studentName { get; set; }
public int studentAge { get; set; }
public string studentPhno { get; set; }
public static List FillData()
{
List stuList = new List();
stuList.Add(new StudentModelClass() { studentId = 1, studentName = "Dinesh", studentPhno = "9884562624", studentAge = 23 });
stuList.Add(new StudentModelClass() { studentId = 2, studentName = "Kishor", studentPhno = "9262498845", studentAge = 23 });
stuList.Add(new StudentModelClass() { studentId = 3, studentName = "Aravind", studentPhno = "9262988454", studentAge = 23 });
return stuList;
}
}
接下来，定义了EmployeeClass类，它包含了员工ID、姓名和入职日期等信息。同样地，也通过FillData方法生成了一个包含员工信息的列表。
public class EmployeeClass
{
public int EmpId { get; set; }
public string EmpName { get; set; }
public DateTime Doj { get; set; }
public static List FillData()
{
List empList = new List();
empList.Add(new EmployeeClass() { EmpId = 101, EmpName = "Dinesh", Doj = Convert.ToDateTime("09/09/2016") });
empList.Add(new EmployeeClass() { EmpId = 102, EmpName = "Maha", Doj = Convert.ToDateTime("02/01/2016") });
empList.Add(new EmployeeClass() { EmpId = 103, EmpName = "Kishor", Doj = Convert.ToDateTime("01/02/2016") });
empList.Add(new EmployeeClass() { EmpId = 104, EmpName = "Naveen", Doj = Convert.ToDateTime("08/01/2016") });
return empList;
}
}
为了展示这些数据，创建了一个通用的WebGridClass模型类。这个类包含了一个动态对象列表GridData，用于存储数据；一个WebGridColumn列表ColNames，用于定义表格的列；一个标题Title，用于在网页上显示；以及一个KeyField，用于标识记录的唯一值。
public class WebGridClass
{
public List GridData = new List();
public List ColNames = new List();
public string Title { get; set; }
public string KeyField { get; set; }
public static WebGridClass HoldWebGridDetails = new WebGridClass();
public static void GetDetailsForGrid(List list, string Title, string KeyField)
{
WebGridClass objWeb = new WebGridClass();
var properties = typeof(T).GetProperties();
objWeb.ColNames.Add(new WebGridColumn() { Header = "Action", ColumnName = KeyField, Format = item => new MvcHtmlString($"") });
objWeb.ColNames.AddRange(properties.Select(s => new WebGridColumn() { Header = s.Name, ColumnName = s.Name, CanSort = true }).ToList());
objWeb.GridData = list.Cast().ToList();
objWeb.Title = Title;
HoldWebGridDetails = objWeb;
}
}
GetDetailsForGrid
在控制器中，定义了三个动作结果：Index()用于显示数据，StudentDetails()和EmployeeDetails()用于获取结果并重定向到Index()。在StudentDetails()方法中，填充并传递记录到WebGridClass.GetDetailsForGrid，并重定向到Index ActionResult。EmployeeDetails ActionResult也执行相同的操作。现在，Index ActionResult处理存储在静态变量中的数据。
public ActionResult Index()
{
var data = new WebGridClass();
data = WebGridClass.HoldWebGridDetails;
return View(data);
}
public ActionResult StudentDetails()
{
var data = new List();
data = StudentModelClass.FillData();WebGridClass.GetDetailsForGrid(data, "Student List", "studentId");
return RedirectToAction("Index");
}
public ActionResult EmployeeDetails()
{
var data = new List();
data = EmployeeClass.FillData();
WebGridClass.GetDetailsForGrid(data, "Employee List", "EmpId");
return RedirectToAction("Index");
}
@model MVCArchitecture.Models.WebGridClass
@{
Layout = null;
}
@Model.Title
@{
var grid = new WebGrid(source: Model.GridData, canSort: true, ajaxUpdateContainerId: "tableId", rowsPerPage: 3);
}
@grid.GetHtml(
htmlAttributes: new { id = "tableId" },
tableStyle: "wGrid",
headerStyle: "wGridHeader",
alternatingRowStyle: "alt",
selectedRowStyle: "select",
columns: Model.ColNames
)