在HTML/CSS 中,我们经常用HTML来布局和填充内容,用CSS来添加效果,修饰内容和布局,使整个页面变得更好看。
即在<head></head>标签内添加CSS样式表的链接:
代码展示如下:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Make a Table Frame</title> <link rel="stylesheet" type="text/css" href="CSS/tableframe.css" > </head>
定义:
对带有指定属性的 HTML 元素设置样式。
注意:
只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。
功能:
“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。
CSS中的选择器有三个:
标签选择器、class类选择器、id选择器
1.标签选择器样式表:a{}、 div{}、table{} ...
{对全局所有的选中类型标签的样式修改}
2.class类选择器 样式表: .class{}
{在HTML中每个标签都可以同时绑定多个类名,每个标签都可以设置class;同一个界面中class是不可重复}
3. id选择器样式表: #d1 {}
{每个标签都可有id,每个页面不可重复id,}
【一个HTML标签只能绑定一个id属性,一个HTML标签可以绑定多个class属性】
单纯选择<div>标签的时候 是对全局的的(所有的)<div>进行修饰;
选择器优先级:
id选择器>class类选择器>标签选择器
所以有id和class 选择器的标签将不会被覆盖。交叉时是按照优先级覆盖显示的。
单纯的HTML 表格表单内容
标题<caption>标签:
表格的标题<caption>的内容填充(HTML):
<caption> 表格标题</caption>
标题<caption>的样式修饰(CSS)
table.formdata caption { text-shadow: #FF00ff; text-align: center; padding-bottom: 6px; font-weight: bold; }
其他<table>标签相关内容可参考 HTML中表格的实例应用 一文。
form在网页中主要负责数据采集功能。
一个表单有三个基本组成部分:
(1)表单标签:包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
(2)表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
(3)表单按钮:提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入。还可以用表单按钮来控制其他定义了处理脚本的处理工作。
定义:
<input> 标签规定用户可输入数据的输入字段。
根据不同的 type 属性,输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等
语法代码:
<input type="value" >
实例代码:
<td><input type="text" name="Mainboard 6月" id="Mainboard 6月"></td>
关系展示:
实例代码:
<p>
<input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn">
<input type="reset" value= "Reset All" class="btn">
</p>
实例展示:
<input>标签的其他属性值:
input标签外是否添加form标签需要按情形区分:
应用场景的区别:
1.所有向后台提交数据(包括原生和ajax提交)的<input>都建议用<form>包裹.
2.如果只是用来做前台交互效果则不推荐使用form包裹。
但提交数据时,其实也可以不用form包裹input标签:
1.如果有form标签,在点击提交铵钮时,浏览器自动收集参数,并打包一个http请求到服务器,完成表单提交。在这一过程中,浏览器会根据method的不同,将参数编码后,放在urI中(get),或者放在请求的data中(post)。然后发送到服务器。
2.如果没有form,post方式的提交要使用ajax手工完成。get方式的提交需要自己拼接url。
<form>表单其他相关内容可参考 HTML中 表单 的应用实例 一文。
最后,附带一下该可输入的EXCEL表格的源码。
HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Make a Table Frame</title> <link rel="stylesheet" type="text/css" href="CSS/tableframe.css" > </head> <body image=""> <form method="psot"> <table border="1px" class="formdata"> <caption>电脑配件管理表2018年5月-8月</caption> <tr> <th></th> <th scope="col">5月</th> <th scope="col">6月</th> <th scope="col">7月</th> <th scope="col">8月</th> </tr> <tr> <th scope="row">Hard Disk</th> <td><input type="text" name="Hard Disk 5月" id="Hard Disk 5月"></td> <td><input type="text" name="Hard Disk 6月" id="Hard Disk 6月"></td> <td><input type="text" name="Hard Disk 7月" id="Hard Disk 7月"></td> <td><input type="text" name="Hard Disk 8月" id="Hard Disk 8月"></td> </tr> <tr> <th scope="row">Mainboard</th> <td><input type="text" name="Mainboard 5月" id="Mainboard 5月"></td> <td><input type="text" name="Mainboard 6月" id="Mainboard 6月"></td> <td><input type="text" name="Mainboard 7月" id="Mainboard 7月"></td> <td><input type="text" name="Mainboard 8月" id="Mainboard 8月"></td> </tr> <tr> <th scope="row">Case</th> <td><input type="text" name="Case 5月" id="Case 5月"></td> <td><input type="text" name="Case 6月" id="Case 6月"></td> <td><input type="text" name="Case 7月" id="Case 7月"></td> <td><input type="text" name="Case 8月" id="Case 8月"></td> </tr> <tr> <th scope="row">Power</th> <td><input type="text" name="Power 5月" id="Power 5月"></td> <td><input type="text" name="Power 6月" id="Power 6月"></td> <td><input type="text" name="Power 7月" id="Power 7月"></td> <td><input type="text" name="Power 8月" id="Power 8月"></td> </tr> <tr> <th scope="row">CPU Fan</th> <td><input type="text" name="CPU Fan 5月" id="CPU Fan 5月"></td> <td><input type="text" name="CPU Fan 6月" id="CPU Fan 6月"></td> <td><input type="text" name="CPU Fan 7月" id="CPU Fan 7月"></td> <td><input type="text" name="CPU Fan 8月" id="CPU Fan 8月"></td> </tr> <tr> <th scope="row">Total</th> <td><input type="text" name="Total 5月" id="Total 5月"></td> <td><input type="text" name="Total 6月" id="Total 6月"></td> <td><input type="text" name="Total7月" id="Total 7月"></td> <td><input type="text" name="Total 8月" id="Total 8月"></td> </tr> </table> <p> <input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn"> <input type="reset" value= "Reset All" class="btn"> </p> </form> </body> </html>
CSS code :
body { font-family: Arial; /*background-image: url(image/mainroad.jpg) no-repeat;*/ background-color: #00ff00; background-size: 100%; } table.formdata { width: 300px; height: 150px; border: 2px solid #F00; border-collapse: collapse; font-family: Arial; } table.formdata caption { text-shadow: #FF00ff; text-align: center; padding-bottom: 6px; font-weight: bold; } table.formdata th { border:1px solid #be34hc; background-color: #E2E2E2; color:#000000; text-aglin:center; font-weight: normal; padding: 2px 8px 2px 6px; margin: 0px; } table.formdata input { width: 100px; padding: 1px 3px 1px 3px; margin: 0px; border:none; font-family: Arial; } .btn { width:100px; background-color: #FF00ee; border:1px solid #00f2f2; font-family: Arial; }
本文部分内容来自网络,如有侵权,请联系修改。
昨天我们在《使用HTML添加表格3(间距与颜色)——零基础自学网页制作》(目录在结尾)中学习了设置单元格以及其中内容的空间间距和背景颜色。
其中添加列向单元格背景颜色只需要修改对应的<tr>标签中的style属性,而修改行向标签需要修改不同<tr></tr>标签中的<td>标签的style属性,这样操作起来就非常的麻烦,那有没有简便的修改行向单元格背景颜色的方法呢?
当然有!
开发团队给出了<colgroup><col></col></colgroup>这样的组合来解决这个问题,下面让我们详细学习。
<colgroup></colgroup>标签是一个给行向单元格打组的标签,在页面中不会显示。
<col></col>标签是来具体设置行向单元格数量和颜色的标签。
示例代码如下:
<colgroup><col span = "1" style="background-color:#ff0000;"></col></colgroup>
这段代码添加到"第一个页面.html"当中就可以,具体代码如下:
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1><hr>
<h2>表格元素</h2><hr>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="2">表格的头部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的脚部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格标题</caption>
<colgroup>
<col span = "1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>
</html>
页面效果如图:
因为第一列和最后一列只有一行所以,也都变红了。
其中span的数量代表行数。
如果把span等号后面的数改成2,因为表格只有两行,所以整个表格都红了。
表格嵌套
我们可以通过向表格中添加表格实现表格嵌套。表格嵌套可以把一个单元格分成行向或列向分割单元格。
代码示例如下:我们把"一列一行"分割成列向两个单元格。
<tr><td><table border = "1" width="100%"><tr><td>1</td><td>2</td></tr></table></td>
使用
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
这段代码替换文字"一列一行"即可。
页面效果如图所示:
留个思考题,大家可以思考一下行向分割单元格怎么写。
今天的内容结束了。
全部示例代码如下:
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1><hr>
<h2>表格元素</h2><hr>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="2">表格的头部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的脚部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格标题</caption>
<colgroup>
<col span = "1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>
</html>
喜欢的小伙伴请关注我,阅读中遇到任何问题请给我留言,如有疏漏或错误欢迎大家斧正,不胜感激!
学到这里,相信大家已经有独立读懂HTML代码说明的能力了,明天我会为大家讲解16进制颜色表示方法。之后会给大家推荐html代码参考手册的链接。如果您是零基础的话,学完16进制颜色表示方法后,基本上就可以无障碍的阅读html代码参考手册了,如果阅读起来还是有困难,请继续看后面我为大家讲解一些常用元素及属性的文章,已及html中特殊符号的输入方法,全部做完后再结束这套教程。
如果您有任何疑问或不解欢迎关注并私信我。
HTML序章(学习目的、对象、基本概念)——零基础自学网页制作
HTML是什么?——零基础自学网页制作
第一个HTML页面如何写?——零基础自学网页制作
HTML页面中head标签有啥用?——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2(路径详解)——零基础自学网页制作
使用HTML添加表格1(基本元素)——零基础自学网页制作
使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作
使用HTML添加表格3(间距与颜色)——零基础自学网页制作
使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作
HTML表单4(form的action、method属性)——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
在ASP.NET Core处理模型有两个核心的概念
模型绑定分为基础和高级分别两篇,在这节中,我们学习关于模型绑定处理的细节
我们通过一个例子来了解模型绑定的概念,在Visual Studio 2022 中创建一个ASP.NET Core Web App (Model-View-Controller) 项目,名称为AspNetCore.ModelBinding
Models & Repository
在Models文件夹下添加一个新的类叫EmployeeDetails.cs,这定义了2个两个类和一个枚举:
namespace AspNetCore.ModelBinding.Models
{
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public DateTime DOB { get; set; }
public Address HomeAddress { get; set; }
public Role Role { get; set; }
}
public class Address
{
public string HouseNumber { get; set; }
public string Street { get; set; }
public string City { get; set; }
public string PostalCode { get; set; }
public string Country { get; set; }
}
public enum Role
{
Admin,
Designer,
Manager
}
}
namespace AspNetCore.ModelBinding.Models
{
public interface IRepository
{
IEnumerable<Employee> Employee { get; }
Employee this[int id] { get; set; }
}
public class EmployeeRepository : IRepository
{
private Dictionary<int, Employee> employee = new Dictionary<int, Employee>
{
[1] = new Employee
{
Id = 1,
Name = "John",
DOB = new DateTime(1980, 12, 25),
Role = Role.Admin
},
[2] = new Employee
{
Id = 2,
Name = "Michael",
DOB = new DateTime(1981, 5, 13),
Role = Role.Designer
},
[3] = new Employee
{
Id = 3,
Name = "Rachael",
DOB = new DateTime(1982, 11, 25),
Role = Role.Designer
},
[4] = new Employee
{
Id = 4,
Name = "Anna",
DOB = new DateTime(1983, 1, 20),
Role = Role.Manager
}
};
public IEnumerable<Employee> Employee => employee.Values;
public Employee this[int id]
{
get
{
return employee.ContainsKey(id) ? employee[id] : ;
}
set
{
employee[id] = value;
}
}
}
}
我们创建repository并且创建4个员工,我们使用4个员工的数据帮助我们理解模型绑定的概念
Controllers & Views
using AspNetCore.ModelBinding.Models;
using Microsoft.AspNetCore.Mvc;
namespace AspNetCore.ModelBinding.Controllers
{
public class HomeController : Controller
{
private IRepository repository;
public HomeController(IRepository repo)
{
repository = repo;
}
public IActionResult Index(int id = 1)
{
return View(repository[id]);
}
}
}
@model Employee
@{
ViewData["Title"] = "Index";
}
<h2>Employee</h2>
<table class="table table-bordered align-middle">
<tr><th>Id:</th><td>@Model.Id</td></tr>
<tr><th>Name:</th><td>@Model.Name</td></tr>
<tr><th>Date of Birth:</th><td>@Model.DOB.ToShortDateString()</td></tr>
<tr><th>Role:</th><td>@Model.Role</td></tr>
</table>
注册Repository作为服务
builder.Services.AddSingleton<IRepository, EmployeeRepository>();
在应用中更新下面代码:
using ModelBindingValidation.Models;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddSingleton<IRepository, EmployeeRepository>();
builder.Services.AddControllersWithViews();
var app = builder.Build();
...
2 理解模型绑定
ASP.NET Core模型绑定在整个过程发挥什么作用呢?我们请求的URL包含了employee id的值(给与第三段的URL是1) /Home/Index/1
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}"
);
public IActionResult Index(int id = 1)
{
return View(repository[id]);
}
模型绑定会从下面3个地方查询值:
1 表单数据值
2 路由变量
3 查询字符串
这是为什么Employee 为2的员工被显示,因为在查询字符串Id的值(即1)之前框架在路由变量中发现了Id(即2)值,因此2的值被提供给action方法参数,如果我们打开URL-Home/Index?id=3,然而Employee Id为3的员工将被显示:
如果ASP.NET Core在这三个地方没有发现绑定的值,会发生什么呢?– 表单数据值,路由变量&查询字符串,在这种情况下,它将根据action方法定义的类型提供默认值,这些默认值是:
2 string类型为""
3 时间类型为01-01-0001 00:00:00
4 float类型为0
public IActionResult Index(int id)
{
if (id == 0)
id = 1;
return View(repository[Convert.ToInt32(id)]);
}
我们数据中没有员工Id为0,因此我们在if代码块中赋值为1,这将帮助我们阻止运行时错误,我们可以通过使用Try-Catch 块处理运行时错误
注意可空类型的默认值为,现在修改Index方法有一个able int类型参数,代码如下:
public IActionResult Index(int? id)
{
if (id == )
id = 1;
return View(repository[Convert.ToInt32(id)]);
}
运行你的应用程序并且进入URL– /Home/Index,现在通过断点来检查id的值, 这时你将发现它的值为
4 模型绑定简单类型
public IActionResult Index(int? id)
{
if (id == )
id = 1;
return View(repository[Convert.ToInt32(id)]);
}
如果你收到要给URL,Id值是字符串 像– /Home/Index/John 在这种情况下,框架将尝试把John转换到int值,这时不能转化,因此action 方法接收到id的参数为
模型绑定查找公共属性从下面三个地方:
在Home Controller中添加Create方法,这两个方法如下:
public IActionResult Create() => View();
[HttpPost]
public IActionResult Create(Employee model) => View("Index", model);
模型绑定的功能是从Http请求中提取Employee类公共属性,并且将它提供给Create方法的参数,该方法传递Employee模型对象到默认View
@model Employee
@{
ViewData["Title"] = "Create Employee";
}
<h2>Create Employee</h2>
<form asp-action="Create" method="post">
<div class="form-group">
<label asp-for="Id"></label>
<input asp-for="Id" class="form-control" />
</div>
<div class="form-group">
<label asp-for="Name"></label>
<input asp-for="Name" class="form-control" />
</div>
<div class="form-group">
<label asp-for="DOB"></label>
<input asp-for="DOB" class="form-control" />
</div>
<div class="form-group">
<label asp-for="Role"></label>
<select asp-for="Role" class="form-control"
asp-items="@new SelectList(Enum.GetNames(typeof(Role)))"></select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<input asp-for="Id" class="form-control" />
Name属性被绑定通过下面这种方式
<input asp-for="Name" class="form-control" />
下面2张图片显示了填充和提交的表单:
6 复杂对象包含复杂对象
EmployeeDetails.cs类包含了名称为HomeAddress公共属性,这个属性是一个Address类型,因此复杂对象包含另一个复杂对象案例
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public DateTime DOB { get; set; }
public Address HomeAddress { get; set; }
public Role Role { get; set; }
}
public class Address
{
public string HouseNumber { get; set; }
public string Street { get; set; }
public string City { get; set; }
public string PostalCode { get; set; }
public string Country { get; set; }
}
绑定HomeAddress属性时,模型绑定处理过程和前面的相同:
更新Create.cshtml视图文件绑定HomeAddress类型所有属性,代码如下:
@model Employee
@{
ViewData["Title"] = "Create Employee";
}
<h2>Create Employee</h2>
<form asp-action="Create" method="post">
<div class="form-group">
<label asp-for="Id"></label>
<input asp-for="Id" class="form-control" />
</div>
<div class="form-group">
<label asp-for="Name"></label>
<input asp-for="Name" class="form-control" />
</div>
<div class="form-group">
<label asp-for="DOB"></label>
<input asp-for="DOB" class="form-control" />
</div>
<div class="form-group">
<label asp-for="Role"></label>
<select asp-for="Role" class="form-control"
asp-items="@new SelectList(Enum.GetNames(typeof(Role)))"></select>
</div>
<div class="form-group">
<label asp-for="HomeAddress.HouseNumber"></label>
<input asp-for="HomeAddress.HouseNumber" class="form-control" />
</div>
<div class="form-group">
<label asp-for="HomeAddress.City"></label>
<input asp-for="HomeAddress.City" class="form-control" />
</div>
<div class="form-group">
<label asp-for="HomeAddress.Street"></label>
<input asp-for="HomeAddress.Street" class="form-control" />
</div>
<div class="form-group">
<label asp-for="HomeAddress.PostalCode"></label>
<input asp-for="HomeAddress.PostalCode" class="form-control" />
</div>
<div class="form-group">
<label asp-for="HomeAddress.Country"></label>
<input asp-for="HomeAddress.Country" class="form-control" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
当绑定HomeAddress属性时候,我们必须包含"HomeAddress",看Helper标签asp-for="HomeAddress.HouseNumber" 绑定HouseNumber属性,我们也为另一些属性使用这种绑定
@model Employee
@{
ViewData["Title"] = "Index";
}
<h2>Employee</h2>
<table class="table table-sm table-bordered table-striped">
<tr><th>Id:</th><td>@Model.Id</td></tr>
<tr><th>Name:</th><td>@Model.Name</td></tr>
<tr><th>Date of Birth:</th><td>@Model.DOB.ToShortDateString()</td></tr>
<tr><th>Role:</th><td>@Model.Role</td></tr>
<tr><th>House No:</th><td>@Model.HomeAddress?.HouseNumber</td></tr>
<tr><th>Street:</th><td>@Model.HomeAddress?.Street</td></tr>
<tr><th>City:</th><td>@Model.HomeAddress?.City</td></tr>
<tr><th>Postal Code:</th><td>@Model.HomeAddress?.PostalCode</td></tr>
<tr><th>Country:</th><td>@Model.HomeAddress?.Country</td></tr>
</table>
现在,运行应用程序并且进入URL– /Home/Create, 填充并提交表单,我们将发现address类型属性的显示,显示图片如下:
检查源代码
下面是浏览器为html生成的源代码
<div class="form-group">
<label for="HomeAddress_HouseNumber">HouseNumber</label>
<input class="form-control" type="text" id="HomeAddress_HouseNumber" name="HomeAddress.HouseNumber" value="" />
</div>
<div class="form-group">
<label for="HomeAddress_City">City</label>
<input class="form-control" type="text" id="HomeAddress_City" name="HomeAddress.City" value="" />
</div>
<div class="form-group">
<label for="HomeAddress_Street">Street</label>
<input class="form-control" type="text" id="HomeAddress_Street" name="HomeAddress.Street" value="" />
</div>
<div class="form-group">
<label for="HomeAddress_PostalCode">PostalCode</label>
<input class="form-control" type="text" id="HomeAddress_PostalCode" name="HomeAddress.PostalCode" value="" />
</div>
<div class="form-group">
<label for="HomeAddress_Country">Country</label>
<input class="form-control" type="text" id="HomeAddress_Country" name="HomeAddress.Country" value="" />
</div>
HouseNumber输入控件获取属性名字的值HomeAddress.HouseNumber,然而id属性的值变为HomeAddress_HouseNumber,相同的方式,City输入控件获取name属性的值,然而id的属性的值为 HomeAddress_City
string houseNo = Request.Form["HomeAddress.HouseNumber"];
[Bind(Prefix)]特性能修改复杂类型模型绑定的默认行为,让我们通过一个例子来理解,创建一个名为PersonAddress.cs的模型类使用下面代码:
namespace AspNetCore.ModelBinding.Models
{
public class PersonAddress
{
public string City { get; set; }
public string Country { get; set; }
}
}
[ ]
public IActionResult DisplayPerson(PersonAddress personAddress)
{
return View(personAddress);
}
下一步,修改Create视图中asp-action标签的值,将该值设置为DisplayPerson,代码如下:
<form asp-action="DisplayPerson" method="post">
...
</form>
@model PersonAddress
@{
ViewData["Title"] = "Person";
}
<h2>Person</h2>
<table class="table table-sm table-bordered table-striped">
<tr><th>City:</th><td>@Model.City</td></tr>
<tr><th>Country:</th><td>@Model.Country</td></tr>
</table>
现在运行你的应用程序,并且进入URL- /Home/Create,填充表单并且点击提交按钮
模型绑定失败的原因是因为City和Country输入控件属性Name包含了字符串HomeAddress 前缀,在浏览器中检查输入控件源代码
<input class="form-control" type="text" id="HomeAddress_City" name="HomeAddress.City" value="">
<input class="form-control" type="text" id="HomeAddress_Country" name="HomeAddress.Country" value="">
为了解决这个问题,我们在action方法的参数中应用[Bind(Prefix)],告诉ASP.NET Core 基于HomeAddress前缀完成模型绑定
public IActionResult DisplayPerson
([Bind(Prefix = nameof(Employee.HomeAddress))] PersonAddress personAddress)
{
return View(personAddress);
}
再次提交表单,这次我们将发现City和Country值并将他们显示在浏览器,看下面图片:
使用[Bind]选择性的绑定属性
public IActionResult DisplayPerson([Bind(nameof(PersonAddress.City), Prefix = nameof(Employee.HomeAddress))] PersonAddress personAddress)
{
return View(personAddress);
}
我们可以使用另外一种方法实现相同的功能,在PersonAddress类的Country属性上使用 [BindNever] 特性,BindNever指定的属性模型绑定将被忽略
using Microsoft.AspNetCore.Mvc.ModelBinding;
namespace AspNetCore.ModelBinding.Models
{
public class PersonAddress
{
public string City { get; set; }
[ ]
public string Country { get; set; }
}
}
8 模型绑定上传文件
我们通过模型绑定技术完成上传文件功能,这里我们必须做3件事情:
1 在View中添加input type=”file”控件
2 在html表单的标签中添加enctype="multipart/form-data"特性
3 在action方法中添加IFormFile类型参数,使用该参数绑定上传文件
我们创建一个上传文件的特性,添加一个新的Controller并且命名为FileUploadController.cs. 代码给与如下:
using Microsoft.AspNetCore.Mvc;
namespace ModelBindingValidation.Controllers
{
public class FileUploadController : Controller
{
private IWebHostEnvironment hostingEnvironment;
public FileUploadController(IWebHostEnvironment environment)
{
hostingEnvironment = environment;
}
public IActionResult Index() => View();
[ ]
public async Task<IActionResult> Index(IFormFile file)
{
string path = Path.Combine(hostingEnvironment.WebRootPath, "Images/" + file.FileName);
using (var stream = new FileStream(path, FileMode.Create))
{
await file.CopyToAsync(stream);
}
return View((object)"Success");
}
}
}
添加一个IWebHostEnvironment 的依赖用来获取"wwwroot"文件夹的全部路径, Index方法通过模型绑定技术将上传的文件绑定到IFormFile类型参数
方法内部将文件保存到应用程序wwwroot/Images文件夹内
为了能够正常工作你确保在wwwroot目录下创建Images文件夹,接下来在 Views/FileUpload文件夹内添加Index文件,代码如下:
@model string
@{
ViewData["Title"] = "Upload File";
}
<h2>Upload File</h2>
<h3>@Model</h3>
<form method="post" enctype="multipart/form-data">
<div class="form-group">
<input type="file" name="file" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
总结:
参考文献
https://www.yogihosting.com/aspnet-core-model-binding/
*请认真填写需求信息,我们会在24小时内与您取得联系。