排球计分（六）view的实现

1.通过Volleyballs控制器自动生成的视图代码，在这里就不做代码演示了。

不过，自动生成的代码文字有些需要对其进行修改，才能达到想表达的意思。

2.下面的是创建比赛记录的代码：

index.cshtml:

@model 排球助手.Models.VolleyballDB
@{
    ViewBag.Title = "Index";
}

<h2>排球比赛</h2>

@using (Html.BeginForm("Play", "Home", FormMethod.Post))
{
    <p>输入比赛名称</p>
     <P> @Html.EditorFor(model => model.gameName)</P>
    <p>输入队名主方</p>
     <p>@Html.EditorFor(model => model.teamA)</p>
    <p>输入队名客方</p>
     <p>@Html.EditorFor(model => model.teamB)</p>
  <p>
      <input type="submit" value="开始" />
  </p>  
}

Play.cshtml:

@model 排球助手.Models.VolleyballDB
@{
    ViewBag.Title = "PlayRe";
   
}
@using (Html.BeginForm("PlayRe", "Home", FormMethod.Post, new { @ID="form1"}))
{
        <div style="display:none">
            @Html.EditorFor(model => model.gameName)
            @Html.EditorFor(model => model.teamA)    
            @Html.EditorFor(model => model.teamB)
            @Html.EditorFor(model => model.vsAB)
            @Html.EditorFor(model => model.gameFirst)
            @Html.EditorFor(model => model.gameSecond)  
            @Html.EditorFor(model => model.gameThird)
            @Html.EditorFor(model => model.gameFourth)
            @Html.EditorFor(model => model.gameFifth)
            @Html.EditorFor(model => model.teamWinner)
            @Html.EditorFor(model => model.gameContent)
        </div>
}
<h1>  比赛名：@Html.Encode(ViewData["nameGame"])</h1>
<h1>主方队伍：@Html.Encode(ViewData["nameA"])</h1>
<h1>客方队伍：@Html.Encode(ViewData["nameB"])</h1>
<h1>场次比分：<span id="jia">0</span>﹣<span id="yi">0</span></h1>
<h1>第<span id="times">1</span>局</h1>
<h1>对局比分：<span ID="a">00</span>﹣<span ID="b">00</span></h1>
<div id="xian">
   <div style="float:left;border:3px solid red;">
   <h2>@Html.Encode(ViewData["nameA"])</h2>
   <button onclick="team('a','1')">发球得分</button>
   <br />
   <button onclick="team('a','2')">扣球得分</button>
   <br />
   <button onclick="team('a','3')">拦网得分</button>
   </div>
   <div style="float:left;border:3px solid red;">
   <h2>@Html.Encode(ViewData["nameB"])</h2>
   <button onclick="team('b','1')">发球得分</button>
   <br />
   <button onclick="team('b','2')">扣球得分</button>
   <br />
   <button onclick="team('b','3')">拦网得分</button>
   </div>
</div>
<script type="text/javascript">
    var gameContent = document.getElementById("gameContent");
    var jia = document.getElementById('jia');
    var yi = document.getElementById('yi');
    var times = document.getElementById('times');
    var a = document.getElementById('a');
    var b = document.getElementById('b');
    function team(i, s) {
        var x = document.getElementById(i); 
        if (parseInt(x.innerHTML) + 1 < 10) {
            x.innerHTML = '0' + (parseInt(x.innerHTML) + 1);
        }
        else {
            x.innerHTML = parseInt(x.innerHTML) + 1;
        }
        if (i == 'a') {
            if(s=='1'){
            gameContent.value = gameContent.value + '第' + times.innerHTML + '局：' + a.innerHTML + '﹣' + b.innerHTML + '@Html.Encode(ViewData["nameA"])' + '发球得分；';
            }
            if (s == '2') {
                gameContent.value = gameContent.value + '第' + times.innerHTML + '局：' + a.innerHTML + '﹣' + b.innerHTML + '@Html.Encode(ViewData["nameA"])' + '扣球得分；';
            }
            if (s == '3') {
                gameContent.value = gameContent.value + '第' + times.innerHTML + '局：' + a.innerHTML + '﹣' + b.innerHTML + '@Html.Encode(ViewData["nameA"])' + '拦网得分；';
             }
        }
        if (i == 'b') {
            if (s == '1') {
                gameContent.value = gameContent.value + '第' + times.innerHTML + '局：' + a.innerHTML + '﹣' + b.innerHTML + '@Html.Encode(ViewData["nameB"])' + '发球得分；';
             }
             if (s == '2') {
                 gameContent.value = gameContent.value + '第' + times.innerHTML + '局：' + a.innerHTML + '﹣' + b.innerHTML + '@Html.Encode(ViewData["nameB"])' + '扣球得分；';
            }
            if (s == '3') {
                gameContent.value = gameContent.value + '第' + times.innerHTML + '局：' + a.innerHTML + '﹣' + b.innerHTML + '@Html.Encode(ViewData["nameB"])' + '拦网得分；';
            }
         }
        jisuan();
    }
    function jisuan() {
        if (parseInt(times.innerHTML) == 5) {
            if (parseInt(a.innerHTML) == 15) {
                jia.innerHTML = parseInt(jia.innerHTML) + 1;
                alert("本场比赛" +"@Html.Encode(ViewData["nameA"])" +"胜");
                gameContent.value = gameContent.value + '第' + times.innerHTML + '局：' + '@Html.Encode(ViewData["nameA"])' + '胜；';
                document.getElementById("gameFifth").value = a.innerHTML + "﹣" + b.innerHTML;
            }
            if (parseInt(b.innerHTML) == 15) {
                yi.innerHTML = parseInt(yi.innerHTML) + 1;
                alert("本场比赛" +"@Html.Encode(ViewData["nameB"])" +"胜");
                gameContent.value = gameContent.value + '第' + times.innerHTML + '局：' + '@Html.Encode(ViewData["nameB"])' + '胜；';
                document.getElementById("gameFifth").value = a.innerHTML + "﹣" + b.innerHTML;
            }
        }
        else {
            if (parseInt(a.innerHTML) == 25) {
                jia.innerHTML = parseInt(jia.innerHTML) + 1;
                alert("本局比赛" +"@Html.Encode(ViewData["nameA"])" +"胜");
                gameContent.value = gameContent.value + '第' + times.innerHTML + '局：' + '@Html.Encode(ViewData["nameA"])' + '胜；';
                shuju();
                times.innerHTML = parseInt(times.innerHTML) + 1;
                a.innerHTML = '00';
                b.innerHTML = '00';
            }
            if (parseInt(b.innerHTML) == 25) {
                yi.innerHTML = parseInt(yi.innerHTML) + 1;
                alert("本局比赛" +"@Html.Encode(ViewData["nameB"])" +"胜");
                gameContent.value = gameContent.value + '第' + times.innerHTML + '局：' + '@Html.Encode(ViewData["nameB"])' + '胜；';
                shuju();
                times.innerHTML = parseInt(times.innerHTML) + 1;
                a.innerHTML = '00';
                b.innerHTML = '00';
            }
        }
        if (parseInt(jia.innerHTML) == 3) {
            //times.innerHTML = parseInt(times.innerHTML) -1;
            win();
            alert("本场比赛" + "@Html.Encode(ViewData["nameA"])" + "胜");
          
        }
        if (parseInt(yi.innerHTML) == 3) {
            //times.innerHTML = parseInt(times.innerHTML) - 1;
            alert("本场比赛" + "@Html.Encode(ViewData["nameB"])" + "胜");
            win();
        }
    }
    function shuju()
    {
        if (parseInt(times.innerHTML) == 1) { document.getElementById("gameFirst").value = a.innerHTML + "﹣" + b.innerHTML; }
        if (parseInt(times.innerHTML) == 2) { document.getElementById("gameSecond").value = a.innerHTML + "﹣" + b.innerHTML; }
        if (parseInt(times.innerHTML) == 3) { document.getElementById("gameThird").value = a.innerHTML + "﹣" + b.innerHTML; }
        if (parseInt(times.innerHTML) == 4) { document.getElementById("gameFourth").value = a.innerHTML + "﹣" + b.innerHTML; }
     
    }
    function win()
    {
        document.getElementById("vsAB").value = jia.innerHTML + "vs" + yi.innerHTML;
        if(jia.innerHTML == 3){
            document.getElementById("teamWinner").value = "@Html.Encode(ViewData["nameA"])";
            gameContent.value = gameContent.value + '最终结果：' + document.getElementById("vsAB").value + '@Html.Encode(ViewData["nameA"])' + '胜；';
        }  
        if (yi.innerHTML == 3) {
            document.getElementById("teamWinner").value = "@Html.Encode(ViewData["nameB"])";
            gameContent.value = gameContent.value + '最终结果：' + document.getElementById("vsAB").value + '@Html.Encode(ViewData["nameB"])' + '胜；';
        }
        document.getElementById("form1").submit();
        document.getElementById("xian").style.display = 'none';
    }
 </script>