2

我需要用户能够在表格中输入小时数，可能带有小数，如下所示：

时间表

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

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; }
}

并绑定到以下视图：

<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. 确保适当验证的最佳方法是什么？理想情况下，用户只能输入数字，格式如下：“#.#”。但是，使用十进制数据类型，我似乎无法做到这一点。我也考虑使用字符串数据类型和正则表达式验证，但这对我来说似乎很奇怪。
4

3 回答 3

2

第一：您可以为 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 或只是在视图中按照您的意愿进行操作

月度报告 ：

@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

于 2013-08-23T03:59:51.437 回答
1

@Bart ans 解决了您的第一个问题。

你的第二个问题试试这个

<Script>
    function Numberonly() {
                            alert('hi');
                        var reg = /^((\d{0,9})*(\.\d{0,2})|(\d{0,9})*)$/;

                        if (!reg.test(($("#txtWeek1").val()))) {
                            $("#txtWeek1").val('');
                            return false;
                        }
                    }
</Script>

看法 

@Html.TextBoxFor(x => x.Week1, new { @class = "input-time" ,@id="txtWeek1", @onkeyup = "Numberonly()" })

它只允许Ex:123.12两位数字后的小数点。

于 2013-08-23T05:10:08.147 回答
-1

1）你确实可以限制这个Html。您在这里有两个选择。第一个是为整个模型调用一个 Html 助手@Html.EditorForModel()。但这可能不是您想要的，因为您的整个模型中有三个子实体。我会建议更多类似于循环遍历每个实体的所有属性的内容。

前任：

@foreach (var property in Model.TimeSpentTutoring.GetType().GetProperties()) {
    ...
}

然后，您只需要在每次传递时创建一个文本框。这是处理类似情况的链接。

2) DisplayFormatdata 属性可用于格式化数字。

前任 （＃。＃＃）：

[DisplayFormat(DataFormatString = "{0:n2}", ApplyFormatInEditMode = true)]
public decimal Week1 { get; set; }
...
于 2013-08-14T05:49:28.200 回答