如何在ASP.NET Framework视图中展示Module类的变量与计算结果

1 调整Module模型类适配ASP.NET绑定规则 #

原类中的StudyHours和RemainingStudyHours是公共字段，ASP.NET的数据绑定机制仅支持绑定公共属性，所以需要修改为属性定义，其余计算逻辑、构造方法均可直接复用：

public class Module
{
    public string Code { get; set; }
    public string Name { get; set; }
    public int Credits { get; set; }
    public int ClassHours { get; set; }
    public int HoursSpent { get; set; }
    public int Weeks { get; set; }
    public string WorkingDate { get; set; }
    public string Username { get; set; }
    // 字段改属性
    public double StudyHours { get; set; }
    public double RemainingStudyHours { get; set; }

    // 其余构造方法、计算方法、ToString方法均和原有WPF代码一致，无需修改
    public Module()
    {
    }
    public Module(string code, string name, int credits, int classHours, int hoursSpent, int weeks, string workingdate, string username)
    {
        Code = code;
        Name = name;
        Credits = credits;
        ClassHours = classHours;
        HoursSpent = hoursSpent;
        Weeks = weeks;
        WorkingDate = workingdate;
        Username = username;
        StudyHours = CalculateStudyHours(credits, classHours, weeks);
        RemainingStudyHours = CalculateRemainingStudyHours(credits, classHours, weeks, hoursSpent);
    }
    public double CalculateStudyHours(int credits, int classHours, int weeks)
    {
        return (credits * 10 / weeks) - classHours;
    }
    public double CalculateRemainingStudyHours(int credits, int classHours, int weeks, int hoursSpent)
    {
        int value = (credits * 10 / weeks) - classHours;
        return value - hoursSpent;
    }
    public override string ToString()
    {
        return Code + "\n" + Name + "\n" + "Credits: " + Credits + "\n" + "Class hours per week: " + ClassHours + "\n" + "Requires " + StudyHours + " hours of self study per week." + "\n" + 
            "Based on your hours spent working on this module you have: " + RemainingStudyHours + " remaining hours left ";
    }
}

2 按使用的框架场景实现表格展示 #

场景1：ASP.NET Web Forms（新手入门常用） #

• 前端页面添加GridView控件，手动定义表头和绑定字段，关闭自动生成列：

<asp:GridView ID="gvModules" runat="server" AutoGenerateColumns="False" CssClass="table table-bordered">
    <Columns>
        <asp:BoundField DataField="Code" HeaderText="模块代码" />
        <asp:BoundField DataField="Name" HeaderText="模块名称" />
        <asp:BoundField DataField="Credits" HeaderText="学分" />
        <asp:BoundField DataField="ClassHours" HeaderText="每周课时" />
        <asp:BoundField DataField="StudyHours" HeaderText="每周需自主学习时长" />
        <asp:BoundField DataField="HoursSpent" HeaderText="已投入学习时长" />
        <asp:BoundField DataField="RemainingStudyHours" HeaderText="剩余学习时长" />
    </Columns>
</asp:GridView>

• 后端页面.cs文件中绑定数据源，示例代码如下：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 此处替换为你实际从数据库/业务逻辑层获取的Module集合数据
        List<Module> modules = new List<Module>
        {
            new Module("PROG6212", "编程2A", 15, 3, 2, 12, "2024-01-01", "testUser")
        };
        gvModules.DataSource = modules;
        gvModules.DataBind();
    }
}

场景2：ASP.NET MVC #

• 控制器中构造Module集合数据，传递到视图：

public ActionResult ModuleList()
{
    // 此处替换为实际业务数据
    List<Module> modules = new List<Module>
    {
        new Module("PROG6212", "编程2A", 15, 3, 2, 12, "2024-01-01", "testUser")
    };
    return View(modules);
}

• 强类型视图中用Razor语法渲染表格：

@model List<Module>
<table class="table table-striped">
    <thead>
        <tr>
            <th>模块代码</th>
            <th>模块名称</th>
            <th>学分</th>
            <th>每周课时</th>
            <th>每周需自主学习时长</th>
            <th>已投入学习时长</th>
            <th>剩余学习时长</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var module in Model)
        {
            <tr>
                <td>@module.Code</td>
                <td>@module.Name</td>
                <td>@module.Credits</td>
                <td>@module.ClassHours</td>
                <td>@module.StudyHours</td>
                <td>@module.HoursSpent</td>
                <td>@module.RemainingStudyHours</td>
            </tr>
        }
    </tbody>
</table>

内容的提问来源于stack exchange，提问作者Sebastian Marshall