首页 > 代码库 > ASP.NET MVC 排球计分程序 （七）视图代码和一些解释

ASP.NET MVC 排球计分程序 （七）视图代码和一些解释

2024-10-11 11:49:02   217人阅读

Index 视图

@{
    ViewBag.Title = "Index";
}


<html>
    <head>
        <title>输入姓名</title>
    </head>
    <body>
        @using(Html.BeginForm("AddPerson","Home")) { 
            <table border="1">
                <tr>
                    <th>@Html.Label("a","队名：")</th>
                <th colspan="1">@Html.TextBox("teamAName")</th>
  
                <th>VS</th>
                    <th>@Html.Label("b","队名：")</th>
                <th colspan="1">@Html.TextBox("teamBName")</th>
                   </tr>
                <tr>
                <th>队员</th>
                <th>姓名</th>
                <th></th>
                <th>队员</th>
                <th>姓名</th>
                   </tr>
                @{
            for (int i = 1; i <=12; i++)
            {
                <tr>
                    <td>@Html.TextBox("idA"+i.ToString(),i)</td>
                    <td> @Html.TextBox("nameA"+i.ToString())</td>
                    <td></td>
                    <td> @Html.TextBox("idB"+i.ToString(),i)</td>
                    <td> @Html.TextBox("nameB"+i.ToString())</td>
                </tr>
            }
                
                }
            </table>
<button type="submit">提交</button>
}
    </body>
    </html>

该视图使用循环生成了一个完整的表格。这正是Rezor视图的强大之处

让我们来看一看和网页上生成的视图有什么区别

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href=http://www.mamicode.com/"/Content/site.css" rel="stylesheet"/>

    <script src=http://www.mamicode.com/"/Scripts/modernizr-2.5.3.js"></script>

</head>
<body>
    


<html>
    <head>
        <title>输入姓名</title>
    </head>
    <body>
<form action="/Home/AddPerson" method="post">            <table border="1">
                <tr>
                    <th><label for="a">队名：</label></th>
                <th colspan="1"><input id="teamAName" name="teamAName" type="text" value=http://www.mamicode.com/"" /></th>
  
                <th>VS</th>
                    <th><label for="b">队名：</label></th>
                <th colspan="1"><input id="teamBName" name="teamBName" type="text" value=http://www.mamicode.com/"" /></th>
                   </tr>
                <tr>
                <th>队员</th>
                <th>姓名</th>
                <th></th>
                <th>队员</th>
                <th>姓名</th>
                   </tr>
                <tr>
                    <td><input id="idA1" name="idA1" type="text" value=http://www.mamicode.com/"1" /></td>
                    <td> <input id="nameA1" name="nameA1" type="text" value=http://www.mamicode.com/"" /></td>
                    <td></td>
                    <td> <input id="idB1" name="idB1" type="text" value=http://www.mamicode.com/"1" /></td>
                    <td> <input id="nameB1" name="nameB1" type="text" value=http://www.mamicode.com/"" /></td>
                </tr>
                <tr>
                    <td><input id="idA2" name="idA2" type="text" value=http://www.mamicode.com/"2" /></td>
                    <td> <input id="nameA2" name="nameA2" type="text" value=http://www.mamicode.com/"" /></td>
                    <td></td>
                    <td> <input id="idB2" name="idB2" type="text" value=http://www.mamicode.com/"2" /></td>
                    <td> <input id="nameB2" name="nameB2" type="text" value=http://www.mamicode.com/"" /></td>
                </tr>
                <tr>
                    <td><input id="idA3" name="idA3" type="text" value=http://www.mamicode.com/"3" /></td>
                    <td> <input id="nameA3" name="nameA3" type="text" value=http://www.mamicode.com/"" /></td>
                    <td></td>
                    <td> <input id="idB3" name="idB3" type="text" value=http://www.mamicode.com/"3" /></td>
                    <td> <input id="nameB3" name="nameB3" type="text" value=http://www.mamicode.com/"" /></td>
                </tr>
                <tr>
                    <td><input id="idA4" name="idA4" type="text" value=http://www.mamicode.com/"4" /></td>
                    <td> <input id="nameA4" name="nameA4" type="text" value=http://www.mamicode.com/"" /></td>
                    <td></td>
                    <td> <input id="idB4" name="idB4" type="text" value=http://www.mamicode.com/"4" /></td>
                    <td> <input id="nameB4" name="nameB4" type="text" value=http://www.mamicode.com/"" /></td>
                </tr>
                <tr>
                    <td><input id="idA5" name="idA5" type="text" value=http://www.mamicode.com/"5" /></td>
                    <td> <input id="nameA5" name="nameA5" type="text" value=http://www.mamicode.com/"" /></td>
                    <td></td>
                    <td> <input id="idB5" name="idB5" type="text" value=http://www.mamicode.com/"5" /></td>
                    <td> <input id="nameB5" name="nameB5" type="text" value=http://www.mamicode.com/"" /></td>
                </tr>
                <tr>
                    <td><input id="idA6" name="idA6" type="text" value=http://www.mamicode.com/"6" /></td>
                    <td> <input id="nameA6" name="nameA6" type="text" value=http://www.mamicode.com/"" /></td>
                    <td></td>
                    <td> <input id="idB6" name="idB6" type="text" value=http://www.mamicode.com/"6" /></td>
                    <td> <input id="nameB6" name="nameB6" type="text" value=http://www.mamicode.com/"" /></td>
                </tr>
                <tr>
                    <td><input id="idA7" name="idA7" type="text" value=http://www.mamicode.com/"7" /></td>
                    <td> <input id="nameA7" name="nameA7" type="text" value=http://www.mamicode.com/"" /></td>
                    <td></td>
                    <td> <input id="idB7" name="idB7" type="text" value=http://www.mamicode.com/"7" /></td>
                    <td> <input id="nameB7" name="nameB7" type="text" value=http://www.mamicode.com/"" /></td>
                </tr>
                <tr>
                    <td><input id="idA8" name="idA8" type="text" value=http://www.mamicode.com/"8" /></td>
                    <td> <input id="nameA8" name="nameA8" type="text" value=http://www.mamicode.com/"" /></td>
                    <td></td>
                    <td> <input id="idB8" name="idB8" type="text" value=http://www.mamicode.com/"8" /></td>
                    <td> <input id="nameB8" name="nameB8" type="text" value=http://www.mamicode.com/"" /></td>
                </tr>
                <tr>
                    <td><input id="idA9" name="idA9" type="text" value=http://www.mamicode.com/"9" /></td>
                    <td> <input id="nameA9" name="nameA9" type="text" value=http://www.mamicode.com/"" /></td>
                    <td></td>
                    <td> <input id="idB9" name="idB9" type="text" value=http://www.mamicode.com/"9" /></td>
                    <td> <input id="nameB9" name="nameB9" type="text" value=http://www.mamicode.com/"" /></td>
                </tr>
                <tr>
                    <td><input id="idA10" name="idA10" type="text" value=http://www.mamicode.com/"10" /></td>
                    <td> <input id="nameA10" name="nameA10" type="text" value=http://www.mamicode.com/"" /></td>
                    <td></td>
                    <td> <input id="idB10" name="idB10" type="text" value=http://www.mamicode.com/"10" /></td>
                    <td> <input id="nameB10" name="nameB10" type="text" value=http://www.mamicode.com/"" /></td>
                </tr>
                <tr>
                    <td><input id="idA11" name="idA11" type="text" value=http://www.mamicode.com/"11" /></td>
                    <td> <input id="nameA11" name="nameA11" type="text" value=http://www.mamicode.com/"" /></td>
                    <td></td>
                    <td> <input id="idB11" name="idB11" type="text" value=http://www.mamicode.com/"11" /></td>
                    <td> <input id="nameB11" name="nameB11" type="text" value=http://www.mamicode.com/"" /></td>
                </tr>
                <tr>
                    <td><input id="idA12" name="idA12" type="text" value=http://www.mamicode.com/"12" /></td>
                    <td> <input id="nameA12" name="nameA12" type="text" value=http://www.mamicode.com/"" /></td>
                    <td></td>
                    <td> <input id="idB12" name="idB12" type="text" value=http://www.mamicode.com/"12" /></td>
                    <td> <input id="nameB12" name="nameB12" type="text" value=http://www.mamicode.com/"" /></td>
                </tr>

            </table>
<button type="submit">提交</button>
</form>    </body>
    </html>


    <script src=http://www.mamicode.com/"/Scripts/jquery-1.7.1.js"></script>

    
</body>
</html>
@using(Html.BeginForm("AddPerson","Home"))会生成一个表单，连接到对应Action Controller里面。
@Html.TextBox("nameB"+i.ToString()) 会生成一个input标签，并根据所填参数将内容赋值给id name 和value

AddScore视图
 
@using 排球计分程序.Models
@{
    ViewBag.Title = "AddScore";
}
<html>
    <head>
        <title></title>
        
        <script src=http://www.mamicode.com/"~/Scripts/jquery-1.7.1.js"></script>
        <script type="text/javascript">

            $(function () {
                //A队的队员下拉列表 获取值 并往里文本框添加值
                $("#teamA").blur(function () {


                    var options = $("#teamA option:selected");
                    //alert(options.text());
                    $("#teamYuan").val(options.text());
                    $("#teamMing").val("@ViewBag.teamAName");
                });
                //A队的击球状态的下拉列表 获取值 并往里文本框添加值
                $("#teamAJiQiu").blur(function () {
                    var options = $("#teamAJiQiu option:selected");
                    //alert(options.text());
                    $("#teamTai").val(options.text());
                    $("#teamMing").val("@ViewBag.teamAName");

                    });
                //A队的是否得分的下拉列表 获取值 并往里文本框添加值
                $("#teamAIsFen").blur(function () {
                    var options = $("#teamAIsFen option:selected");
                    //alert(options.text());
                    $("#teamIsFen").val(options.text());
                    $("#teamMing").val("@ViewBag.teamAName");

                    });

                //B队的队员下拉列表 获取值 并往里文本框添加值
                $("#teamB").blur(function () {
                    var options = $("#teamB option:selected");
                    //alert(options.text());
                    $("#teamYuan").val(options.text());
                    $("#teamMing").val("@ViewBag.teamBName");
                });
                //B队的击球状态的下拉列表 获取值 并往里文本框添加值
                $("#teamBJiQiu").blur(function () {
                    var options = $("#teamBJiQiu option:selected");
                    //alert(options.text());
                    $("#teamTai").val(options.text());
                    $("#teamMing").val("@ViewBag.teamBName");

                    });
                //B队的是否得分的下拉列表 获取值 并往里文本框添加值
                $("#teamBIsFen").blur(function () {
                    var options = $("#teamBIsFen option:selected");
                    //alert(options.text());
                    $("#teamIsFen").val(options.text());
                    $("#teamMing").val("@ViewBag.teamBName");
                    });

            });
        </script>
        <style type="text/css">
            body {
                font-size:larger;
            }
        </style>
    </head>
    <body>

    </body>
</html>




@using(Html.BeginForm("Admin","Home")) { 
    <h2>统计界面</h2>@*
    @Html.TextBox("teamAName",ViewBag.teamAName)
     @Html.TextBox("teamBName",ViewBag.teamBName)
    
*@
    
 
  <h3>
     </h3>  
    <table>
        <tr>
            <td>@Html.TextBox("tA", (string)ViewBag.teamAName)</td>
            <td>VS </td>
            <td>@Html.TextBox("tB", (string)ViewBag.teamBName)</td>
        </tr>
        <tr>
            <td>当前比分</td>
            <td>@Html.TextBox("dangQianA", (string)ViewBag.dangQianA)</td>
            <td>@Html.TextBox("dangQianB", (string)ViewBag.dangQianB)</td>
        </tr>
        <tr>
            <td>局比分</td>
            <td>@Html.TextBox("juA", (string)@ViewBag.juA)</td>
            <td>@Html.TextBox("juB", (string)@ViewBag.juB)</td>
        </tr>

    </table>
<h3> @ViewBag.teamAName VS  @ViewBag.teamBName</h3>
    
<table>

    
    <tr>
        @*您当前选择的是： 队名 队员 击球状态 是否得分*@
        <td></td>
        <td>队名</td>
        <td>队员</td>
        <td>击球状态</td>
        <td>是否得分</td>
      
    </tr>
    <tr>
        <td></td>
        <td>@ViewBag.teamAName</td>
        <td>@Html.Raw(ViewBag.DropDownListA)</td>
        <td>@Html.Raw(ViewBag.DropDownListJiQiu)</td>
        <td>@Html.Raw(ViewBag.DropDownListIsFen)</td>
    </tr>
    <tr>
        <td></td>
        <td>@ViewBag.teamBName</td>
        <td>@Html.Raw(ViewBag.DropDownListB)</td>
        <td>@Html.Raw(ViewBag.DropDownListJiQiuB)</td>
        <td>@Html.Raw(ViewBag.DropDownListIsFenB)</td>
    </tr>
     <tr>
        @*您当前选择的是： 队名 队员 击球状态 是否得分*@

         <td>您当前选择的是：</td>
         
        <td>@Html.TextBox("teamMing", "", new { @readonly="true"})</td>
        <td>@Html.TextBox("teamYuan", "", new { @readonly="true"})</td>
        <td>@Html.TextBox("teamTai", "", new { @readonly="true"})</td>
        <td>@Html.TextBox("teamIsFen", "", new { @readonly="true"})</td>
      
    </tr>
    <tr>
        @*您当前选择的是： 队名 队员 击球状态 是否得分*@

         <td colspan="4">  <h1 style="text-align:center"><button type="submit">提交</button></h1></td>

      
    </tr>
  

</table>
}
@using (Html.BeginForm("selectScore", "Home"))
{
    <button type="submit">查询</button>
}
<h1>A队目前的数据</h1>
@Html.Raw(ViewBag.selectA)
<h1>B队目前的数据</h1>
@Html.Raw(ViewBag.selectB)

这里用了JQuery的一些语法 用来获取下拉列表的值，更改文本框的值

 

selectScore视图

@{
    ViewBag.Title = "selectScore";
}

<h2>最高分查询</h2>

<table>
    <tr>

        <th></th>
        <th>A队目前分数情况</th>
        <th>B队目前分数情况</th>
    </tr>
    <tr>
        <td>得分最高者</td>
        <td>@ViewBag.AMaxFen </td>
        <td>@ViewBag.BMaxFen </td>
    </tr>
    <tr>
        <td>发球最高分者</td>
        <td>@ViewBag.AFaQiu </td>
        <td>@ViewBag.BFaQiu </td>
    </tr>
    <tr>
        <td>一传最高分者</td>
        <td>@ViewBag.AYiChuan
        </td>
        <td>@ViewBag.BYiChuan </td>
    </tr>
    <tr>
        <td>拦网最高分者</td>
        <td>@ViewBag.ALanWang 
        </td>
        <td>@ViewBag.BLanWang  </td>
    </tr>
    <tr>
        <td>扣球最高分者</td>
        <td>@ViewBag.BKouQiu
        </td>
        <td>@ViewBag.BKouQiu </td>
    </tr>
    <tr>
        <td>抹球最高分者</td>
        <td>@ViewBag.AMoQiu 
            
        </td>
        <td>@ViewBag.BMoQIu </td>
    </tr>
</table>
@using (Html.BeginForm("AddScore", "Home"))
{
    <button type="submit">返回加分界面</button>
}

 



ASP.NET MVC 排球计分程序 （七）视图代码和一些解释


联系
我们