一.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:249px; height:194px; margin-top:-130px; margin-left:500px; } </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="0"/></td> <td>：</td> <td><input type="text" id="ZongB" size="5" value="0"/></td> </tr> <tr> <td>本局比分：</td> <td><input type="text" id="JuChinaA" size="5" value="0"/></td> <td>：</td> <td><input type="text" id="JuB" size="5" value="0" /></td> </tr> </table> </div><div class="div3">
<table> <tr> <td>第一局比分：</td> <td><input type="text" id="JuFen1" size="2" value=""/></td> <td>:</td> <td><input type="text" id="JuFen01" size="2" value=""/></td> </tr> <tr> <td>第二局比分：</td> <td><input type="text" id="JuFen2" size="2" value=""/></td> <td>:</td> <td><input type="text" id="JuFen02" size="2" value=""/></td> </tr> <tr> <td>第三局比分：</td> <td><input type="text" id="JuFen3" size="2" value=""/></td> <td>:</td> <td><input type="text" id="JuFen03" size="2" value=""/></td> </tr> <tr> <td>第四局比分：</td> <td><input type="text" id="JuFen4" size="2" value=""/></td> <td>:</td> <td><input type="text" id="JuFen04" size="2" value=""/></td> </tr> <tr> <td>第五局比分：</td> <td><input type="text" id="JuFen5" size="2" value=""/></td> <td>:</td> <td><input type="text" id="JuFen05" size="2" value=""/></td> </tr> </table> </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="加分" οnclick="Add()"/></td> <td><input type="button" name="jian" value="减分" οnclick="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="加分" /></td> <td><input type="button" name="jian" value="减分" /></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="加分" /></td> <td><input type="button" name="jian" value="减分" /></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="加分"/></td> <td><input type="button" name="jian" value="减分"/></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="加分"/></td> <td><input type="button" name="jian" value="减分"/></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="加分"/></td> <td><input type="button" name="jian" value="减分"/></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="加分"/></td> <td><input type="button" name="jian" value="减分"/></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="加分"/></td> <td><input type="button" name="jian" value="减分"/></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="加分"/></td> <td><input type="button" name="jian" value="减分"/></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="加分"/></td> <td><input type="button" name="jian" value="减分"/></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="加分"/></td> <td><input type="button" name="jian" value="减分"/></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="加分"/></td> <td><input type="button" name="jian" value="减分"/></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="加分" οnclick="jia()"/></td> <td><input type="button" name="jian" value="减分" οnclick="jia1()"/></td> </tr> <tr> <td>2</td> <td><input type="text" size="5" id="sai2" /></td> <td><input type="button" name="add" value="加分"/></td> <td><input type="button" name="jian" value="减分"/></td> </tr> <tr> <td>3</td> <td><input type="text" size="5" id="sai3" /></td> <td><input type="button" name="add" value="加分"/></td> <td><input type="button" name="jian" value="减分"/></td> </tr> <tr> <td>4</td> <td><input type="text" size="5" id="sai4" /></td> <td><input type="button" name="add" value="加分"/></td> <td><input type="button" name="jian" value="减分"/></td> </tr> <tr> <td>5</td> <td><input type="text" size="5" id="sai5" /></td> <td><input type="button" name="add" value="加分"/></td> <td><input type="button" name="jian" value="减分"/></td> </tr> <tr> <td>6</td> <td><input type="text" size="5" id="sai6" /></td> <td><input type="button" name="add" value="加分"/></td> <td><input type="button" name="jian" value="减分"/></td> </tr> <tr> <td>9</td> <td><input type="text" size="5" id="sai7" /></td> <td><input type="button" name="add" value="加分"/></td> <td><input type="button" name="jian" value="减分"/></td> </tr> <tr> <td>10</td> <td><input type="text" size="5" id="sai8" /></td> <td><input type="button" name="add" value="加分"/></td> <td><input type="button" name="jian" value="减分"/></td> </tr> <tr> <td>15</td> <td><input type="text" size="5" id="sai9" /></td> <td><input type="button" name="add" value="加分"/></td> <td><input type="button" name="jian" value="减分"/></td> </tr> <tr> <td>16</td> <td><input type="text" size="5" id="sai10" /></td> <td><input type="button" name="add" value="加分"/></td> <td><input type="button" name="jian" value="减分"/></td> </tr> <tr> <td>17</td> <td><input type="text" size="5" id="sai11" /></td> <td><input type="button" name="add"value="加分"/></td> <td><input type="button" name="jian" value="减分"/></td> </tr> <tr> <td>19</td> <td><input type="text" size="5" id="sai12"/></td> <td><input type="button" name="add" value="加分"/></td> <td><input type="button" name="jian"value="减分"/></td> </tr> </table> </div> </form></body></html>
5.运行新更改的显示界面，显示如下：
各局局比分：
6.通过调用函数方法，在单击队员的加分或减分后，不仅会在该队员的个人得分中+1分，还会在该队员所在的队伍本局局比分中+1分，通过判断前四局的局比分与25分的关系，还有在25分局点时两队分数是否相差大于2分，或者判断第五局的局比分与15分的关系，还有在15分局点时两队分数是否相差大于2分来决定本局是否结束。
本局结束，在本局获胜的队伍的总比分中+1，并且前四局将局比分记录后清零，第五局记录后直接显示获胜的队伍名。
下一篇会更多的显示运行运行效果图。