排球記分員計分程序（六）————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="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">
<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="加分" onclick="Add()"/></td>
<td><input type="button" name="jian" value="減分" 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="加分" /></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="加分" onclick="jia()"/></td>
<td><input type="button" name="jian" value="減分" onclick="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，並且前四局將局比分記錄後清零，第五局記錄後直接顯示獲勝的隊伍名。
下一篇會更多的顯示運行運行效果圖。
排球記分員計分程序（六）————Views視圖的編碼與設計