版权声明:本文为博主原创文章,博主QQ:289102120,博主Mobile:15891712396 https://blog.csdn.net/vinglemar/article/details/88847116
第一步:启动Dreamweaver,制作一个静态表格:
文件名称为table.html,备用,其中的代码将在后面使用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
table {
width: 80%;
margin-left:auto;
margin-right:auto;
}
th,td{
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #666;
}
th{
background-color: #CCC;
}
.row1 th {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}
</style>
</head>
<body>
<table>
<tr class="row1">
<th>ID</th>
<th>Name</th>
<th>Sex</th>
<th>Age</th>
</tr>
<tr>
<th>HT001</th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>HT002</th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>HT003</th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>HT004</th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>HT005</th>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
第二步:启动VS,创建MVC4,基本 类型项目,然后:
添加Home控制器,代码如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcDynamicTable.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
public ActionResult DynTableShowA()
{
return View();
}
public ActionResult InputRowsNumber()
{
return View();
}
public ActionResult DynTableShowB(int RowsNumber)
{
ViewBag.i = RowsNumber.ToString();
return View();
}
}
}
添加相应的View视图文件:
添加视图文件 DynTableShowA.cshtml,部分代码从table.html中复制,并修改成如下:
@{
ViewBag.Title = "动态表格演示A";
}
<table>
<caption>@ViewBag.Title</caption>
<tr class="row1">
<th>ID</th>
<th>Name</th>
<th>Sex</th>
<th>Age</th>
</tr>
@for (int i = 0; i < 60; i++)
{
<tr>
<th>HT@(i+1)</th>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
}
</table>
@Html.ActionLink("返回首页", "Index");
添加视图文件DynTableShowB.cshtml,代码从DynTableShowA.cshtml中复制,并修改成如下:
@{
ViewBag.Title = "动态表格演示B";
int iC=int.Parse(ViewBag.i);
}
<table>
<caption>@ViewBag.Title</caption>
<tr class="row1">
<th>ID</th>
<th>Name</th>
<th>Sex</th>
<th>Age</th>
</tr>
@for (int i = 0; i<@iC ; i++)
{
<tr>
<th>HT@(i+1)</th>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
}
</table>
@Html.ActionLink("返回首页", "Index")
首页 Index.cshtml:
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<h2>静态表格</h2>
<h2>@Html.ActionLink("动态表格-A","DynTableShowA")</h2>
<h2>@Html.ActionLink("动态表格-B","InputRowsNumber")</h2>
InputRowsNumber.cshtml
@{
ViewBag.Title = "InputRowsNumer";
}
<h2>请输入一个整数,代表表格的行数:</h2>
@using (Html.BeginForm("DynTableShowB", "Home", FormMethod.Post))
{
@Html.TextBox("RowsNumber");
<input type="submit" value="提交"/>
}
修改Site.css文件:
打开Site.css文件,在后面添加代码如下,这些 css 代码从 table.html 中复制获得:
table {
width: 80%;
margin-left:auto;
margin-right:auto;
}
th,td{
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #666;
}
th{
background-color: #CCC;
}
.row1 th {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}
caption
{
font-weight: 900;
font-family: 黑体;
font-size: larger;
}
技术要点:
- 1. Dreamweaver制作的html及CSS如何和VS MVC4开发平台结合使用。
- 2. get和post请求的区别。
- 3. 静态和动态的区别。
- 4. mvc开发平台自带的html助记符的使用。
- 5.页面链接的创建方法。
- 6.CSS文件的使用。
代码完整下载:https://download.csdn.net/download/vinglemar/11065449