ASP.NET MVC 排球计分程序 （七）视图代码和一些解释
2017-06-24 22:09
471 查看
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 和valueAddScore视图
@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>
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ASP.NET MVC 排球计分程序 （六）HomeController代码和一些解释
- ASP.NET MVC 排球计分程序 （六）HomeController代码和一些解释
- ASP.NET MVC 排球计分程序 （二）一些排球计分的基本实现方式
- ASP.NET MVC 排球计分程序 （二）一些排球计分的基本实现方式
- ASP.NET MVC 排球计分程序 （四）实体类和SqlHelper类的设计
- ASP.NET MVC 排球计分程序 （八）排球计分程序的演示
- ASP.NET MVC 排球计分程序 （五）基本界面的摆放
- ASP.NET MVC 排球计分程序 （一）综述
- ASP.NET MVC 排球计分程序 （三）需求分析与数据库设计
- ASP.NET MVC 排球计分程序 （一）综述
- ASP.NET MVC 排球计分程序 （四）实体类和SqlHelper类的设计
- ASP.NET MVC 排球计分程序 （三）需求分析与数据库设计
- ASP.NET MVC 排球计分程序 （八）排球计分程序的演示
- Asp.net MVC 视图之公用代码
- Asp.net MVC 视图之公用代码
- ASP.NET MVC 3:Razor视图引擎下显式和隐式代码块
- 【转载】使用Json比用string返回数据更友好，也更面向对象一些 |Asp.net MVC 2.0 + Unity 2.0(IoC) + EF4.0 实例：RoRoWoBlog 开源项目框架代码
- MVC之排球比赛计分程序 ——（八）具体代码（1）
- ASP.NET mvc 在视图中使用@helper封装输出代码
- 【EntityFramework系列教程十，翻译】ASP.NET MVC程序中的一些高级应用