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

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="/Content/site.css" rel="stylesheet"/>

    <script src="/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="" /></th>

                <th>VS</th>
                    <th><label for="b">队名：</label></th>
                <th colspan="1"><input id="teamBName" name="teamBName" type="text" value="" /></th>
                   </tr>
                <tr>
                <th>队员</th>
                <th>姓名</th>
                <th></th>
                <th>队员</th>
                <th>姓名</th>
                   </tr>
                <tr>
                    <td><input id="idA1" name="idA1" type="text" value="1" /></td>
                    <td> <input id="nameA1" name="nameA1" type="text" value="" /></td>
                    <td></td>
                    <td> <input id="idB1" name="idB1" type="text" value="1" /></td>
                    <td> <input id="nameB1" name="nameB1" type="text" value="" /></td>
                </tr>
                <tr>
                    <td><input id="idA2" name="idA2" type="text" value="2" /></td>
                    <td> <input id="nameA2" name="nameA2" type="text" value="" /></td>
                    <td></td>
                    <td> <input id="idB2" name="idB2" type="text" value="2" /></td>
                    <td> <input id="nameB2" name="nameB2" type="text" value="" /></td>
                </tr>
                <tr>
                    <td><input id="idA3" name="idA3" type="text" value="3" /></td>
                    <td> <input id="nameA3" name="nameA3" type="text" value="" /></td>
                    <td></td>
                    <td> <input id="idB3" name="idB3" type="text" value="3" /></td>
                    <td> <input id="nameB3" name="nameB3" type="text" value="" /></td>
                </tr>
                <tr>
                    <td><input id="idA4" name="idA4" type="text" value="4" /></td>
                    <td> <input id="nameA4" name="nameA4" type="text" value="" /></td>
                    <td></td>
                    <td> <input id="idB4" name="idB4" type="text" value="4" /></td>
                    <td> <input id="nameB4" name="nameB4" type="text" value="" /></td>
                </tr>
                <tr>
                    <td><input id="idA5" name="idA5" type="text" value="5" /></td>
                    <td> <input id="nameA5" name="nameA5" type="text" value="" /></td>
                    <td></td>
                    <td> <input id="idB5" name="idB5" type="text" value="5" /></td>
                    <td> <input id="nameB5" name="nameB5" type="text" value="" /></td>
                </tr>
                <tr>
                    <td><input id="idA6" name="idA6" type="text" value="6" /></td>
                    <td> <input id="nameA6" name="nameA6" type="text" value="" /></td>
                    <td></td>
                    <td> <input id="idB6" name="idB6" type="text" value="6" /></td>
                    <td> <input id="nameB6" name="nameB6" type="text" value="" /></td>
                </tr>
                <tr>
                    <td><input id="idA7" name="idA7" type="text" value="7" /></td>
                    <td> <input id="nameA7" name="nameA7" type="text" value="" /></td>
                    <td></td>
                    <td> <input id="idB7" name="idB7" type="text" value="7" /></td>
                    <td> <input id="nameB7" name="nameB7" type="text" value="" /></td>
                </tr>
                <tr>
                    <td><input id="idA8" name="idA8" type="text" value="8" /></td>
                    <td> <input id="nameA8" name="nameA8" type="text" value="" /></td>
                    <td></td>
                    <td> <input id="idB8" name="idB8" type="text" value="8" /></td>
                    <td> <input id="nameB8" name="nameB8" type="text" value="" /></td>
                </tr>
                <tr>
                    <td><input id="idA9" name="idA9" type="text" value="9" /></td>
                    <td> <input id="nameA9" name="nameA9" type="text" value="" /></td>
                    <td></td>
                    <td> <input id="idB9" name="idB9" type="text" value="9" /></td>
                    <td> <input id="nameB9" name="nameB9" type="text" value="" /></td>
                </tr>
                <tr>
                    <td><input id="idA10" name="idA10" type="text" value="10" /></td>
                    <td> <input id="nameA10" name="nameA10" type="text" value="" /></td>
                    <td></td>
                    <td> <input id="idB10" name="idB10" type="text" value="10" /></td>
                    <td> <input id="nameB10" name="nameB10" type="text" value="" /></td>
                </tr>
                <tr>
                    <td><input id="idA11" name="idA11" type="text" value="11" /></td>
                    <td> <input id="nameA11" name="nameA11" type="text" value="" /></td>
                    <td></td>
                    <td> <input id="idB11" name="idB11" type="text" value="11" /></td>
                    <td> <input id="nameB11" name="nameB11" type="text" value="" /></td>
                </tr>
                <tr>
                    <td><input id="idA12" name="idA12" type="text" value="12" /></td>
                    <td> <input id="nameA12" name="nameA12" type="text" value="" /></td>
                    <td></td>
                    <td> <input id="idB12" name="idB12" type="text" value="12" /></td>
                    <td> <input id="nameB12" name="nameB12" type="text" value="" /></td>
                </tr>

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

    <script src="/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="~/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>
}
				


				
时间： 2024-10-13 14:55:15 

		


		


	

	
	

		


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


								

		

			

                ASP.NET MVC 排球计分程序 （一）综述
			

		

		

									

				---恢复内容开始--- 本篇博客主要是为了用MVC来做出一个排球的计分程序,该计分程序主要实现的功能有,将两队队员的姓名和其对应的球衣号插入数据库,根据在场上的表现,由记分员记录两队的发球,扣球,拦网等得分情况,在比赛过程中可以实现自动判断是否到达获胜比分,是否获得本场比赛的胜利.当比赛胜时.可以查询出本场的MVP,以及最佳得分员,最佳发球员等数据. 初步计划将这个文章系列分为以下几篇: 1.综述 2. 一些排球计分的基本实现方 3.需求分析与数据库设计 4.实体类和SQLHelper类的设计			

		

	

				

		

			

                ASP.NET MVC 排球计分程序 （二）一些排球计分的基本实现方式
			

		

		

									

				一.连接数据库 新建一个MVC应用程序(基本) 建一个HomeController 为Index添加视图 @{ ViewBag.Title = "Index"; } <h2>Index</h2> @using(Html.BeginForm("Indexa","Home")) { <b>id:</b> @Html.TextBox("id",1); <b>name:<			

		

	

				

		

			

                ASP.NET MVC 排球计分程序 （三）需求分析与数据库设计
			

		

		

									

				需求分析: 软件名称:排球计分程序 1.  需要键入比赛人员的的姓名,需要根据场上的比赛结果及时做出操作,记分员可以在记错的情况下撤销上一部操作.比赛结束,记分员应能查询到每个队伍的进球情况,以及拦网.击球等的最高分.全场MVP. 2.系统界面:两队比赛,每次有队伍得分,由记分员向系统内输入数据,将该队的分数通过单击按钮的方式加分,每次加分,将分数写入数据库.也应有减分的按钮,每次减分,写入数据库. 系统内:自动计算每队的得分情况是否达到该局胜利,如果胜利及时显示该局胜利的消息. 最后输出:每单			

		

	

				

		

			

                ASP.NET MVC 排球计分程序 （四）实体类和SqlHelper类的设计
			

		

		

									

				整体解决方案的图如下: . 在Model里添加一个叫PersonA的类 public class PersonA { public int id { get; set; } public string name { get; set; } } 添加一个叫PersonB的类 public class PersonB { public int id { get; set; } public string name { get; set; } } 添加一个叫ScoreA的类 public class			

		

	

				

		

			

                ASP.NET MVC 排球计分程序 （八）排球计分程序的演示
			

		

		

									

				运行主页 插入一些球员信息 单击提交进入统计界面 统计界面可以在中途查询信息,也可以实时的为场上的比赛计分 添加第一条信息 单击提交后文本框会清空 插入到数据库里的信息会在下方显示 添加多条信息 添加多条信息会根据得分情况实时显示当前比分 中途可以去查询界面查询当前最高分 到达获胜比分时局分会自动加1  当前比分自动清零 演示到此结束			

		

	

				

		

			

                ASP.NET MVC 排球计分程序 （六）HomeController代码和一些解释
			

		

		

									

				Index Action方法 (默认进入的主页) public ActionResult Index() { return View(); } AddPerson Action方法(单击主页提交 将交到AddPerson里来处理数据,并将队员 名字插入数据库) public ActionResult AddPerson() { //获取填入的衣服编号和名字 并将其写入数据库 //编号idA1 nameA1 SqlHelper.ClearBiaoRen(); //插入B的idB1 nameB1..			

		

	

				

		

			

                ASP.NET MVC 排球计分程序 （五）基本界面的摆放
			

		

		

									

				主页:Home/Index  (插入球员信息的页面) 可以通过此主页添加球员信息. 球员对应的衣服号可以修改为其他的,这里默认他出现的是1-12. 根据需要添加所需的球员姓名,几个都行. 键入后单击提交即可进入计分界面 可以根据需要添加场上内容 系统会根据添加的内容自动评定输赢 下方可以实时显示自己已经插入到数据库的信息 单击查询可以查询出目前的最高分是谁.发球击球等最高分是谁. 接下来的一篇我们将要介绍HomeController里的代码			

		

	

				

		

			

                MVC排球计分（七）——程序截图与运行结果
			

		

		

									

				开始输入队伍名字 计分界面 比赛记录插入数据库 详细记录			

		

	

				

		

			

                MVC排球计分（一）——综述
			

		

		

									

				使用ASP.NET MVC 实现一个排球计分程序. 初步计划将这个文章系列分为以下几篇: 1.综述 2.需求分析与数据库设计 3.架构概要设计 4.模型类设计 5.Controller与Action设计 6.视图设计 7.程序截图与运行结果 8.总结 以上只是初步的计划,在写博客的过程中可能会根据具体情况适当调整,但是内容基本就是这些了.可能会用到的技术如下: 1.C#语言 2.ASP.NET MVC 3.设计模式 4.关系数据库基础知识 5.JavaScript 6.HTML,CSS,标准化布