c# - 使用数据验证将小时数输入时间表

Question

我需要用户能够将小时数输入到表中，可能带有小数，如下所示:

我已经声明了以下类来保存模型数据:

public class WeeklyTimes
{
    public decimal Week1 { get; set; }
    public decimal Week2 { get; set; }
    public decimal Week3 { get; set; }
    public decimal Week4 { get; set; }
    public decimal Week5 { get; set; }
}

public class MonthlyReport
{
    public WeeklyTimes TimeSpentTutoring { get; set; }
    public WeeklyTimes TimeSpentOnPreparation { get; set; }
    public WeeklyTimes TimeSpentOnHomework { get; set; }
}

并绑定(bind)到以下 View :

<table class="timesheet">
<tr class="timesheet-row">
    <th class="center-align" />
    <th class="center-align">Week 1</th>
    <th class="center-align">Week 2</th>
    <th class="center-align">Week 3</th>
    <th class="center-align">Week 4</th>
    <th class="center-align">Week 5</th>
</tr>
<tr class="timesheet-row">
    <th class="left-align">Tutoring Time</th>
    <td>@Html.TextBoxFor(x => x.TimeSpentTutoring.Week1, new { @class = "input-time" })</td>
    <td>@Html.TextBoxFor(x => x.TimeSpentTutoring.Week2, new { @class = "input-time" })</td>
    <td>@Html.TextBoxFor(x => x.TimeSpentTutoring.Week3, new { @class = "input-time" })</td>
    <td>@Html.TextBoxFor(x => x.TimeSpentTutoring.Week4, new { @class = "input-time" })</td>
    <td>@Html.TextBoxFor(x => x.TimeSpentTutoring.Week5, new { @class = "input-time" })</td>
</tr>
<tr class="timesheet-row">
    <th class="left-align">Learner Homework</th>
    <td>@Html.TextBoxFor(x => x.TimeSpentOnHomework.Week1, new { @class = "input-time" })</td>
    <td>@Html.TextBoxFor(x => x.TimeSpentOnHomework.Week2, new { @class = "input-time" })</td>
    <td>@Html.TextBoxFor(x => x.TimeSpentOnHomework.Week3, new { @class = "input-time" })</td>
    <td>@Html.TextBoxFor(x => x.TimeSpentOnHomework.Week4, new { @class = "input-time" })</td>
    <td>@Html.TextBoxFor(x => x.TimeSpentOnHomework.Week5, new { @class = "input-time" })</td>
</tr>
<tr class="timesheet-row">
    <th class="left-align">Tutor Prep & Commute</th>
    <td>@Html.TextBoxFor(x => x.TimeSpentOnPreparation.Week1, new { @class = "input-time" })</td>
    <td>@Html.TextBoxFor(x => x.TimeSpentOnPreparation.Week2, new { @class = "input-time" })</td>
    <td>@Html.TextBoxFor(x => x.TimeSpentOnPreparation.Week3, new { @class = "input-time" })</td>
    <td>@Html.TextBoxFor(x => x.TimeSpentOnPreparation.Week4, new { @class = "input-time" })</td>
    <td>@Html.TextBoxFor(x => x.TimeSpentOnPreparation.Week5, new { @class = "input-time" })</td>
</tr>
</table>

这个问题的两个部分:

1. 我是 MVC 的新手，不确定 HTML 中的重复数量。有没有更好的方法来构建此 HTML？
2. 确保适当验证的最佳方法是什么？理想情况下，用户只能输入数字，格式如下:“#.#”。但是，使用十进制数据类型，我似乎无法做到这一点。我也在考虑使用字符串数据类型和正则表达式验证，但这对我来说似乎很奇怪。

Answer 1

首先:您可以为 WeeklyTimes 创建一个模板

放在 EditorTemplates/WeeklyTimes.cshtml 上

您可能希望将标签添加到 WeeklyTimes 类

public class WeeklyTimes
{
    public string Name { get; set; }
    public decimal Week1 { get; set; }
    public decimal Week2 { get; set; }
    public decimal Week3 { get; set; }
    public decimal Week4 { get; set; }
    public decimal Week5 { get; set; }
}

WeeklyTimes.cshtml :

@model WeeklyTimes
<tr class="timesheet-row">
    <th class="left-align">@Model.Name</th>
    <td>@Html.TextBoxFor(x => x.Week1, new { @class = "input-time" })</td>
    <td>@Html.TextBoxFor(x => x.Week2, new { @class = "input-time" })</td>
    <td>@Html.TextBoxFor(x => x.Week3, new { @class = "input-time" })</td>
    <td>@Html.TextBoxFor(x => x.Week4, new { @class = "input-time" })</td>
    <td>@Html.TextBoxFor(x => x.Week5, new { @class = "input-time" })</td>
</tr>

您可能需要另一个用于 MonthlyReport 或只是在 View 中按您的意愿进行

月度报告:

@model MonthlyReport
<table class="timesheet">
    <tr class="timesheet-row">
        <th class="center-align" />
        <th class="center-align">Week 1</th>
        <th class="center-align">Week 2</th>
        <th class="center-align">Week 3</th>
        <th class="center-align">Week 4</th>
        <th class="center-align">Week 5</th>
    </tr>
    @EditorFor(m=> m.TimeSpentTutoring)
    @EditorFor(m=> m.TimeSpentOnPreparation)
    @EditorFor(m=> m.TimeSpentOnHomework)
</table>

---

第二:你可以像这样装饰你的小数点以进行正确的验证

[DisplayFormat(DataFormatString = "{0:#.#}", ApplyFormatInEditMode = true)]

对于客户端验证，您可以:

$('input').on('change', function() {
    // this will add invalid class to the invalid inputs and you can make your css mark them with a red border or something. If you use 'input change' it will validate on every keystroke
    $('#myForm').validate();
});

并且您可以使用占位符来提高可用性:

@Html.TextBoxFor(x => x.Week1, new { @class = "input-time", placeholder="0.2" });

如果您想为支持 html5 输入类型的浏览器寻求更好的客户端方法，您可以这样做

@Html.TextBoxFor(x => x.Week1, new { @class = "input-time", placeholder="0.2", type="number" });

如果这不能解决您的所有请求，您必须实现自定义验证器。查看此博客文章，了解有关如何实现该目标的完整详细信息。 http://www.codeproject.com/Articles/275056/Custom-Client-Side-Validation-in-ASP-NET-MVC3