使用 WebGrid 在运行时生成动态数量的列
5.00/5 (3投票s)
在不知道列数的情况下显示记录列表，使用 WebGrid。
引言
本文介绍如何在单个视图页面中显示不同类型的列表。 基本上，我们知道结构。 基于此，我们将设计 HTML 表格。 但在这里，我们不知道列表的结构，因此我们使用 WebGrid Html 助手在运行时创建所有内容。
Using the Code
例如，我创建了两个不同的类，并填充了一些数据以在 HTML 表格中显示。 这两个类是 StudentModelClass 和 EmployeeClass。
创建要显示的数据
StudentModelClass 包含 Student 信息 - 它们是学生 ID、姓名、年龄和电话号码。 FillData 方法提供 StudentModelClass 信息的列表。
public class StudentModelClass
{
public int studentId { get; set; }
public string studentName { get; set; }
public int studentAge { get; set; }
public string studentPhno { get; set; }
//Filling The Records in Student List
public static List<StudentModelClass> FillData()
{
List<StudentModelClass> stuList = new List<StudentModelClass>();
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 包含 Employee 信息。 它们是员工 ID、姓名和入职日期。 FillData 方法提供 EmployeeClass 信息的列表。
public class EmployeeClass
{
public int EmpId { get; set; }
public string EmpName { get; set; }
public DateTime Doj { get; set; }
//Filling The Records in Employee List
public static List<EmployeeClass> FillData()
{
List<EmployeeClass> stuList = new List<EmployeeClass>();
stuList.Add(new EmployeeClass() { EmpId = 101,
EmpName= "Dinesh", Doj = Convert.ToDateTime("09/09/2016") });
stuList.Add(new EmployeeClass() { EmpId = 102,
EmpName = "Maha", Doj = Convert.ToDateTime("02/01/2016") });
stuList.Add(new EmployeeClass() { EmpId = 103,
EmpName = "Kishor", Doj = Convert.ToDateTime("01/02/2016") });
stuList.Add(new EmployeeClass() { EmpId = 104,
EmpName = "Naveen", Doj = Convert.ToDateTime("08/01/2016") });
return stuList;
}
}
Model 类
现在，我创建了名为 WebGridClass 的通用模型类，用于显示列表。 该类包含
List<dynamic> GridData--> 对象列表，它支持所有类。WebGridColumn 列表--> 此webgridcolumn列表显示列。标题--> 列表的标题，显示在网页中。KeyField--> 它是包含唯一值的对象的列名。 用于从列表中识别记录（例如：在StudentModelClass中，我们基于studentId识别记录，在EmployeeClass中，我们基于EmployeeId识别记录）。
它包含一个名为 GetDetailsForGrid<T>() 的方法。 此方法用于获取列名的列表，此外创建一列，转换一个通用 List<dynamic> 类型并将数据保存在 static 变量中。
public class WebGridClass
{
public List<dynamic> GridData = new List<dynamic>();
public List<WebGridColumn> ColNames = new List<WebGridColumn>();
public string Title { get; set; }
public string KeyField { get; set; }
// Holding the data
public static WebGridClass HoldWebGridDetails = new WebGridClass();
public static void GetDetailsForGrid<T>(List<T> list, string Title, string KeyField)
{
WebGridClass objWeb = new WebGridClass();
//Get Properties
var properties = typeof(T).GetProperties();
//Add New Column With A link
objWeb.ColNames.Add(new WebGridColumn() { Header = "Action",
ColumnName = KeyField, Format = item => new MvcHtmlString
("<a href='Edit?id=" + item[KeyField] + "'>Edit</a>") });
objWeb.ColNames.AddRange(properties.Select(s => new WebGridColumn()
{ Header = s.Name, ColumnName = s.Name, CanSort = true }).ToList());
//Convert The data into the List<dynamic.
objWeb.GridData = list.Cast<dynamic>().ToList();
objWeb.Title = Title;
//Holding The Values.???
HoldWebGridDetails = objWeb;
}
}
GetDetailsForGrid<T> 方法的说明
已创建名为 GetDetailsForGrid<T> 的通用方法。 T 代表类对象。 它用于
- 从
T对象中读取properties。var properties = typeof(T).GetProperties();
- 使用
keyfield值创建一个用于操作链接的新列 & 并将其添加到WedGridClass ColNames属性中objWeb.ColNames.Add(new WebGridColumn() { Header = "Action", ColumnName = KeyField, Format = item => new MvcHtmlString ("<a href='Edit?id=" + item[KeyField] + "'>Edit</a>") }); - 将列名转换为
WebGridColumn并使其成为WebGridColumnList& 并将其添加到WedGridClass ColNames属性中。objWeb.ColNames.AddRange(properties.Select(s => new WebGridColumn() { Header = s.Name, ColumnName = s.Name, CanSort = true }).ToList()); - 将
List<T>转换为动态列表 & 并将其添加到WedGridClass GridData属性中。objWeb.GridData = list.Cast<dynamic>().ToList();
- 将标题存储在
webgrid中，存储到WedGridClass Title属性中。objWeb.Title = Title;
- 将
WebGridClass存储到static变量中，以便在内存中保存数据。HoldWebGridDetails = objWeb;
现在，每当我们调用此方法时，它会将信息存储到 static 变量中。
控制器 (Controller)
在这里，我有 3 个 action 结果，index() action 结果用于在视图中显示数据，另外 2 个 action 结果用于获取结果并重定向到 Index() action 结果。
public ActionResult Index()
{
var data = new WebGridClass();
data = WebGridClass.HoldWebGridDetails;
return View(data);
}
public ActionResult StudentDetails()
{
//Retrieve Student List
var data = new List<StudentModelClass>();
data = StudentModelClass.FillData();
//Passing The List<StudentModelClass>
//to List<Dynamic> and Fill the WebGridClass class
WebGridClass.GetDetailsForGrid(data, "Student List", "studentId");
return RedirectToAction("Index");
}
public ActionResult EmployeeDetails()
{
//Retrieve Employee List
var data = new List<EmployeeClass>();
data = EmployeeClass.FillData();
//Passing The List<EmployeeClass> to List<Dynamic> and Fill the WebGridClass class
WebGridClass.GetDetailsForGrid(data, "Employee List", "EmpId");
return RedirectToAction("Index");
}
在 StudentDetails 方法中，只需填充并将记录传递给 WebGridClass.GetDetailsForGrid，然后重定向到 index ActionResult。 同样的事情也发生在 EmployeeDetails ActionResult 中。 现在 Index ActionResult 处理存储在 static 变量中的数据。
索引视图页面
视图页面正在显示数据
@model MVCArchitecture.Models.WebGridClass
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@Model.Title</title>
</head>
<body>
<h2>@Model.Title</h2>
@{
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
)
</body>
</html>
它仅使用 WebGrid HTML 助手显示记录和标题。
输出
以下截图显示了输出
关注点
通常，在许多地方，我们显示记录列表，因此我们每次都为视图中不同类型的数据创建程序。 在这种情况下，我们能够减少程序的大小，并且非常容易使用。