为表格数据创建通用显示模板视图 | ASP.NET MVC

引言

MVC 显示模板，用于显示各种类型的表格数据。这是一个通用的解决方案/设计，用于显示表格数据。

背景

在当今世界，我们需要在我们的网站上显示大量的表格数据，尤其是在数据驱动的网站中。作为一种需求，数据可能不同，但布局（UI 设计）必须在整个网站中保持一致。一种方法是为需要显示表格数据的每个部分创建一个单独的视图。在这种方法中，如果我们对 UI 进行任何更改，则必须在每个位置/视图中进行相同的更改。因此，从维护的角度来看，这不是一个好主意。第二种方法是创建一个通用视图，它可以以表格格式显示数据。

Using the Code

首先，我们需要创建一个通用的类，它可以包含任何对象

public class GenericObjectCollection
{
    public List<GenericEntity> EntitiesMapping { get; set; }
    public List<object> Collection { get; set; }
}

可以看到，属性 Collection 可以保存任何对象的集合。我们将使用此属性来保存需要表格表示的集合对象。另一个属性是 EntitiesMapping。它也是一个对象集合 (GenericEntity)。

属性 Collection 是一个需要以表格格式显示的对象的集合。但是，此对象可以有许多字段/属性，可能需要显示所有或其中的一部分。可以使用属性 EntityMapping 来指定。它主要包含应显示的属性/字段的名称、标题文本、格式和索引。Index 用于控制要显示的字段的顺序。

public class GenericEntity : IComparable
{
    public string NameInType { get; set; }
    public string HeaderText { get; set; }
    public string Format { get; set; }
    public Int64 Index { get; set; }
    public int CompareTo(object obj)
    {
        return this.Index.CompareTo((obj as GenericEntity).Index);
    }
}

可以看到上面的代码。我实现了 IComparable 接口。它帮助我们根据 Index 对集合进行排序。

下一步是为数据类型 GenericObjectCollection 创建一个显示模板。

• 在“Views/Shared”文件夹下创建一个名为“DisplayTemplates”的文件夹。
• 在“DisplayTemplates”文件夹下创建一个视图，并将其名称设置为“GenericCollection_Tabular”。它的模型类应该是 GenericObjectCollection（上面创建的）

使用下面的代码来创建此视图

@using GenericTabularDisplay.Models
@using System.Reflection

@model GenericObjectCollection
<table cellpadding="1" cellspacing="1" border="1">
    <thead>
        <tr style="background-color:black;color:white;font-weight:bold">
            @{
                Model.EntitiesMapping.Sort();
                
                foreach (GenericEntity genEntity in Model.EntitiesMapping)
                {
                    <td>@genEntity.HeaderText</td>
                }
            }
        </tr>
    </thead>
    @{
        foreach (object entityObject in Model.Collection)
        {
            <tr>
                @{
                    foreach (GenericEntity genEntity in Model.EntitiesMapping)
                    {
                        PropertyInfo[] pies = entityObject.GetType().GetProperties();
                        foreach (PropertyInfo pi in pies)
                        {
                            if (pi.Name == genEntity.NameInType)
                            {
                                if(pi.GetValue(entityObject) != null)
                                { 
                                    <td>@pi.GetValue(entityObject)</td>
                                }
                                else
                                {
                                    <td></td>
                                }
                            }
                        }
                    }
                }
            </tr>
        }
    }
</table> 

现在你的通用显示模板已经准备好使用了。

我们需要一个模型类，用于显示表格数据

public class Employee
{
    public string Name { get; set; }
    public string Email { get; set; }
    public string Address { get; set; }
    public string Phone { get; set; }
}

要使用此通用显示模板，请在你的 MVC 项目中创建一个名为“Employee”的控制器，并创建一个名为“ShowEmployees”的操作来显示表格数据。

public ActionResult ShowEmployees()
{
    List<Employee> employees = new List<Employee>();
    employees.Add(new Employee()
    {
        Name = "Jitendra Kumar",
        Email = "Jitendra.Kumar@gmail.com",
        Address = "Delhi"
    });
    employees.Add(new Employee()
    {
        Name = "Nilay Sah",
        Email = "Nilay.Sah@gmail.com",
        Address = "Patna"
    });
    employees.Add(new Employee()
    {
        Name = "Atharva Sah",
        Email = "Atharva.Sah@gmail.com",
        Address = "Hajipur"
    });
    List<GenericEntity> genericEntities = new List<GenericEntity>();
    genericEntities.Add(new GenericEntity()
    {
        HeaderText = "Name",
        NameInType = "Name",
        Index = 1
    });
    genericEntities.Add(new GenericEntity()
    {
        HeaderText = "Emaployee's Email",
        NameInType = "Email",
        Index = 2
    });

    GenericObjectCollection genericObject = new GenericObjectCollection();
    genericObject.Collection = employees.ToList<object>();
    genericObject.EntitiesMapping = genericEntities;

    return View(genericObject);
}

在这里可以看到，我创建了一个对象集合“GenericEntity”，并添加了“GenericEntity”的对象，并将类 Employee 中的属性名称指定给属性 NameInType 及其标题文本。我还指定了表格中列的顺序。

最后，我创建了通用/公共类“GenericObjectCollection”的对象，并为其属性 Collection 和 EntitiesMapping 分配了值。

现在创建此操作的 View 并使用下面的代码

@model GenericTabularDisplay.Models.GenericObjectCollection

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ShowEmployees</title>
</head>
<body>
    <div>
        <h4>Employees Data</h4>
        
        <dl class="dl-horizontal">
            @Html.DisplayFor(model => model, "GenericCollection_Tabular")
        </dl>
    </div>
</body>
</html>

运行应用程序并使用此 URL 显示输出

https://:<port_number> /Employee/ShowEmployees

感谢你的时间和耐心。

祝你编程愉快！:)