MVC项目实践（六）——UI页面的实现

上篇给出了一个首页：

 1 @model VolleyballScoring.Models.Team
 2 
 3 @{
 4     ViewBag.Title = "Index";
 5 }
 6 
 7 <h2>Index</h2>
 8 <h3>选择你想要进行的事情</h3>
 9 <div>@Html.ActionLink("查询","Index","Teams")</div>
10 <div>@Html.ActionLink("计分台","Scoring")</div>
11 <div>@Html.ActionLink("观看比赛","Index","Audience")</div>

第一个是跳转查询页面

@model IEnumerable<VolleyballScoring.Models.Team>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.TId }) |
            @Html.ActionLink("Details", "Details", new { id=item.TId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.TId })|
        </td>
    </tr>
}

</table>
<div>@Html.ActionLink("Game-Index","Index","Games")</div>

计分台的第一个页面是选择队伍

@model IEnumerable<VolleyballScoring.Models.Game>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.TIdA)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.TIdB)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.SscoA)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.SscoB)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.TIdA)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.TIdB)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.SscoA)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.SscoB)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.GId }) |
            @Html.ActionLink("Details", "Details", new { id=item.GId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.GId })
        </td>
    </tr>
}

</table>

在选择队伍之后是主要计分页面

 1 @model VolleyballScoring.Models.Section
 2 
 3 @{
 4     ViewBag.Title = "Create";
 5 }
 6 
 7 <h2>Create</h2>
 8 
 9 @using (Html.BeginForm()) {
10     @Html.ValidationSummary(true)
11 
12     <fieldset>
13         <legend>Section</legend>
14 
15         <div class="editor-label">
16             @Html.LabelFor(model => model.GId)
17         </div>
18         <div class="editor-field">
19             @Html.EditorFor(model => model.GId)
20             @Html.ValidationMessageFor(model => model.GId)
21         </div>
22 
23         <div class="editor-label">
24             @Html.LabelFor(model => model.SNum)
25         </div>
26         <div class="editor-field">
27             @Html.EditorFor(model => model.SNum)
28             @Html.ValidationMessageFor(model => model.SNum)
29         </div>
30 
31         <div class="editor-label">
32             @Html.LabelFor(model => model.RouA)
33         </div>
34         <div class="editor-field">
35             @Html.EditorFor(model => model.RouA)
36             @Html.ValidationMessageFor(model => model.RouA)
37         </div>
38 
39         <div class="editor-label">
40             @Html.LabelFor(model => model.RouB)
41         </div>
42         <div class="editor-field">
43             @Html.EditorFor(model => model.RouB)
44             @Html.ValidationMessageFor(model => model.RouB)
45         </div>
46 
47         <p>
48             <input type="submit" value="Create" />
49         </p>
50     </fieldset>
51 }
52 
53 <div>
54     @Html.ActionLink("Back to List", "Index")
55 </div>
56 
57 @section Scripts {
58     @Scripts.Render("~/bundles/jqueryval")
59 }

最后的表现给观众的详情页面

 1 @model VolleyballScoring.Models.Section
 2 
 3 @{
 4     ViewBag.Title = "Edit";
 5 }
 6 
 7 <h2>Edit</h2>
 8 
 9 @using (Html.BeginForm()) {
10     @Html.ValidationSummary(true)
11 
12     <fieldset>
13         <legend>Section</legend>
14 
15         @Html.HiddenFor(model => model.SId)
16 
17         <div class="editor-label">
18             @Html.LabelFor(model => model.GId)
19         </div>
20         <div class="editor-field">
21             @Html.EditorFor(model => model.GId)
22             @Html.ValidationMessageFor(model => model.GId)
23         </div>
24 
25         <div class="editor-label">
26             @Html.LabelFor(model => model.SNum)
27         </div>
28         <div class="editor-field">
29             @Html.EditorFor(model => model.SNum)
30             @Html.ValidationMessageFor(model => model.SNum)
31         </div>
32 
33         <div class="editor-label">
34             @Html.LabelFor(model => model.RouA)
35         </div>
36         <div class="editor-field">
37             @Html.EditorFor(model => model.RouA)
38             @Html.ValidationMessageFor(model => model.RouA)
39         </div>
40 
41         <div class="editor-label">
42             @Html.LabelFor(model => model.RouB)
43         </div>
44         <div class="editor-field">
45             @Html.EditorFor(model => model.RouB)
46             @Html.ValidationMessageFor(model => model.RouB)
47         </div>
48 
49         <p>
50             <input type="submit" value="Save" />
51         </p>
52     </fieldset>
53 }
54 
55 <div>
56     @Html.ActionLink("Back to List", "Index")
57 </div>
58 
59 @section Scripts {
60     @Scripts.Render("~/bundles/jqueryval")
61 }

以上就是主要页面的实现，大致功能已经实现。接下来是测试运行。

相关阅读:
HTTP报文
 Linux命令行下快捷键
 ruby离线安装整理
 Tomcat启动时卡在 INFO HostConfig.deployDirectory Deploy
ruby在线安装整理
 python_控制台输出带颜色的文字方法
 http proxy模块参数
 upstream模块调度算法
 upstream模块介绍
 nginx的upstream目前支持5种方式的分配
原文地址：https://www.cnblogs.com/hutengqi/p/7074403.html