2019-3-27 Asp.Net MVC4教学静态表格和动态表格

第一步:启动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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>HT002</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>HT003</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>HT004</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>HT005</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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

2019-3-27 Asp.Net MVC4教学 静态表格 和 动态表格