首页 > 代码库 > 排球记分员计分程序（六）————Views视图的编码与设计
排球记分员计分程序（六）————Views视图的编码与设计
一.Views视图的编码与设计
1.在上一步创建新的 DuiWuController控制器时，系统在Views\DuiWu文件夹中创建新的Create.cshtml、 Delete.cshtml、 Details.cshtml、 Edit.cshtml和Index.cshtml 文件。
2.查看原来的Index.cshtml 文件，代码如下图所示：
@model IEnumerable<排球计分程序.Models.DuiWu>
@{
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.ID }) |
@Html.ActionLink("Details", "Details", new { id=item.ID }) |
@Html.ActionLink("Delete", "Delete", new { id=item.ID })
</td>
</tr>
}
</table>
3.在浏览器中查看运行界面如下所示：
有图。。。。
4.界面不美观，在Index中更改显示界面，更改代码如下：
4.1HTML+CSS页面修饰代码：
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
th
{
font: white 18px 华文行楷;
border: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 6px 6px 12px;
}
td
{
border: 1px solid #C1DAD7;
background: #fff;
font: 18px black;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
.div
{
width:600px;
height:80px;
margin-top:10px;
}
.div1
{
width:500px;
height:550px;
margin-top:30px;
padding-left:10px;
float:left;
}
.div2
{
width:500px;
height:550px;
margin-top:50px;
margin-left:650px;
}
.div3 {
font: white 18px 华文行楷;
border: 1px solid #C1DAD7;
width:300px;
height:160px;
margin-top:-130px;
margin-left:400px;
}
</style>
</head >
4.2显示主界面
<html>
<body>
<form id="form1" >
<div>
<h1>比赛得分详细信息</h1>
</div>
<div class="div">
<table>
<tr>
<td></td>
<td>中国队</td>
<td>：</td>
<td>塞尔维亚队</td>
</tr>
<tr>
<td>总比分：</td>
<td><input type="text" id="ZongChinaA" size="5" value="http://www.mamicode.com/0"/></td>
<td>：</td>
<td><input type="text" id="ZongB" size="5" value="http://www.mamicode.com/0"/></td>
</tr>
<tr>
<td>本局比分：</td>
<td><input type="text" id="JuChinaA" size="5" value="http://www.mamicode.com/0"/></td>
<td>：</td>
<td><input type="text" id="JuB" size="5" value="http://www.mamicode.com/0" /></td>
</tr>
</table>
</div>
<div class="div3">
<p class="td">第一局比分：</p>
<p>第二局比分：</p>
<p>第三局比分：</p>
<p>第四局比分：</p>
<p>第五局比分：</p>
</div>
<div class="div1">
<div>
<h2>中国队</h2>
</div>
<table>
<tr>
<td>编号</td>
<td>姓名</td>
<td>位置</td>
<td>个人得分</td>
<td colspan="2">计分方式</td>
</tr>
<tr>
<td>1</td>
<td>袁心玥</td>
<td>副 攻</td>
<td><input type="text" size="5" id="china1" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分" onclick="Add()"/></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分" onclick="Add1()"/></td>
</tr>
<tr>
<td>2</td>
<td>朱 婷</td>
<td>主 攻</td>
<td><input type="text" size="5" id="china2" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分" /></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分" /></td>
</tr>
<tr>
<td>3</td>
<td>杨方旭</td>
<td>接 应</td>
<td><input type="text" size="5" id="china3" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分" /></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分" /></td>
</tr>
<tr>
<td>6</td>
<td>龚翔宇</td>
<td>接 应</td>
<td><input type="text" size="5" id="china4" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分"/></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分"/></td>
</tr>
<tr>
<td>7</td>
<td>魏秋月</td>
<td>二 传</td>
<td><input type="text" size="5" id="china5" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分"/></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分"/></td>
</tr>
<tr>
<td>9</td>
<td>张常宁</td>
<td>主 攻</td>
<td><input type="text" size="5" id="china6" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分"/></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分"/></td>
</tr>
<tr>
<td>10</td>
<td>刘晓彤</td>
<td>主 攻</td>
<td><input type="text" size="5" id="china7" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分"/></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分"/></td>
</tr>
<tr>
<td>11</td>
<td>徐云丽</td>
<td>副 攻</td>
<td><input type="text" size="5" id="china8" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分"/></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分"/></td>
</tr>
<tr>
<td>12</td>
<td>惠若琪</td>
<td>主 攻</td>
<td><input type="text" size="5" id="china9" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分"/></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分"/></td>
</tr>
<tr>
<td>15</td>
<td>林 莉</td>
<td>自由人</td>
<td><input type="text" size="5" id="china10" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分"/></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分"/></td>
</tr>
<tr>
<td>16</td>
<td>丁 霞</td>
<td>二 传</td>
<td><input type="text" size="5" id="china11" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分"/></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分"/></td>
</tr>
<tr>
<td>17</td>
<td>颜 妮</td>
<td>副 攻</td>
<td><input type="text" size="5" id="china12" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分"/></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分"/></td>
</tr>
</table>
</div>
<div class="div2">
<div style="padding-left:-10px; width: 262px;">
<h2>塞尔维亚队</h2>
</div>
<table>
<tr>
<td class="td">编号</td>
<td class="td">个人得分</td>
<td class="td" colspan="2">计分方式</td>
</tr>
<tr>
<td>1</td>
<td><input type="text" size="5" id="sai1" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分" onclick="jia()"/></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分" onclick="jia1()"/></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" size="5" id="sai2" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分"/></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分"/></td>
</tr>
<tr>
<td>3</td>
<td><input type="text" size="5" id="sai3" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分"/></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分"/></td>
</tr>
<tr>
<td>4</td>
<td><input type="text" size="5" id="sai4" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分"/></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分"/></td>
</tr>
<tr>
<td>5</td>
<td><input type="text" size="5" id="sai5" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分"/></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分"/></td>
</tr>
<tr>
<td>6</td>
<td><input type="text" size="5" id="sai6" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分"/></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分"/></td>
</tr>
<tr>
<td>9</td>
<td><input type="text" size="5" id="sai7" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分"/></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分"/></td>
</tr>
<tr>
<td>10</td>
<td><input type="text" size="5" id="sai8" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分"/></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分"/></td>
</tr>
<tr>
<td>15</td>
<td><input type="text" size="5" id="sai9" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分"/></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分"/></td>
</tr>
<tr>
<td>16</td>
<td><input type="text" size="5" id="sai10" /></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分"/></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分"/></td>
</tr>
<tr>
<td>17</td>
<td><input type="text" size="5" id="sai11" /></td>
<td><input type="button" name="add"value="http://www.mamicode.com/加分"/></td>
<td><input type="button" name="jian" value="http://www.mamicode.com/减分"/></td>
</tr>
<tr>
<td>19</td>
<td><input type="text" size="5" id="sai12"/></td>
<td><input type="button" name="add" value="http://www.mamicode.com/加分"/></td>
<td><input type="button" name="jian"value="http://www.mamicode.com/减分"/></td>
</tr>
</table>
</div>
</form>
</body>
</html>
5.运行新更改的显示界面，显示如下：
差一图。。。。
6.通过调用函数方法，在单击队员的加分或减分后，不仅会在该队员的个人得分中+1分，还会在该队员所在的队伍本局局比分中+1分，通过判断前四局的局比分与25分的关系，还有在25分局点时两队分数是否相差大于2分，或者判断第五局的局比分与15分的关系，还有在15分局点时两队分数是否相差大于2分来决定本局是否结束。
本局结束，在本局获胜的队伍的总比分中+1，并且前四局将局比分记录后清零，第五局记录后直接显示获胜的队伍名。
下一篇会更多的显示运行运行效果图。
排球记分员计分程序（六）————Views视图的编码与设计