ASP.NET Core模型綁定 - 基礎(chǔ)篇

么是模型綁定？模型綁定是從HTTP請(qǐng)求獲取數(shù)據(jù)的一個(gè)過(guò)程并且將他們提供給Action方法的參數(shù)，模型包含了構(gòu)成應(yīng)用程序業(yè)務(wù)邏輯的數(shù)據(jù)，它們包含了數(shù)據(jù)庫(kù)或者另外數(shù)據(jù)源中的數(shù)據(jù)

在ASP.NET Core處理模型有兩個(gè)核心的概念

1 Model Binding – 從HTTP請(qǐng)求提取數(shù)據(jù)的一個(gè)過(guò)程，并將數(shù)據(jù)提供給Action方法的參數(shù)

2 Model Validation – 處理模型屬性驗(yàn)證的一個(gè)過(guò)程以至于未驗(yàn)證的實(shí)體不能進(jìn)入數(shù)據(jù)庫(kù)

模型綁定分為基礎(chǔ)和高級(jí)分別兩篇，在這節(jié)中，我們學(xué)習(xí)關(guān)于模型綁定處理的細(xì)節(jié)

1 ASP.NET Core 模型綁定例子

我們通過(guò)一個(gè)例子來(lái)了解模型綁定的概念，在Visual Studio 2022 中創(chuàng)建一個(gè)ASP.NET Core Web App (Model-View-Controller) 項(xiàng)目，名稱為AspNetCore.ModelBinding

Models & Repository

在Models文件夾下添加一個(gè)新的類叫EmployeeDetails.cs，這定義了2個(gè)兩個(gè)類和一個(gè)枚舉:

```
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 }}
```
在Models文件夾下創(chuàng)建一個(gè)新的文件Repository.cs，定義接口并實(shí)現(xiàn)該接口：
- ```
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; } } }}
```
  我們創(chuàng)建repository并且創(chuàng)建4個(gè)員工，我們使用4個(gè)員工的數(shù)據(jù)幫助我們理解模型綁定的概念
  Controllers & Views
  在Controllers文件夾下編輯HomeController.cs文件，通過(guò)依賴注入從構(gòu)造函數(shù)中獲取EmployeeRepository 倉(cāng)儲(chǔ)類，更新HomeController.cs 文件代碼如下：
  - 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]); } }}
    在Views->Home文件下編輯Index.cshtml 視圖文件以至于它能接收到Employee模型并綁定employee屬性在HTML表格，Index 代碼如下：
    @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>
    注冊(cè)Repository作為服務(wù)
    在Program.cs類中注冊(cè)EmployeeRepository 服務(wù)，以至于控制器能夠通過(guò)依賴注入訪問(wèn)這個(gè)類，代碼如下：
    builder.Services.AddSingleton<IRepository, EmployeeRepository>();
    在應(yīng)用中更新下面代碼：
    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();...
    現(xiàn)在運(yùn)行項(xiàng)目并且進(jìn)入U(xiǎn)RL– /Home/Index/1，將看到employee為1的員工編號(hào)顯示在瀏覽器，圖片如下:
    2 理解模型綁定
    ASP.NET Core模型綁定在整個(gè)過(guò)程發(fā)揮什么作用呢？我們請(qǐng)求的URL包含了employee id的值(給與第三段的URL是1) /Home/Index/1
    在Program.cs 類中有默認(rèn)路由，路由指定了3個(gè)URL段，Id是變量
    app.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}" );
    現(xiàn)在，我們看到Index方法有一個(gè)Id參數(shù)
    public IActionResult Index(int id=1){ return View(repository[id]);}
    ASP.NET Core模型綁定處理過(guò)程從URL中獲取的Id值，并且將Id值通過(guò)參數(shù)提供給action方法
    模型綁定會(huì)從下面3個(gè)地方查詢值：
    1 表單數(shù)據(jù)值
    2 路由變量
    3 查詢字符串
    從表單數(shù)據(jù)開始檢查，然后路由變量，最后是查詢字符串，在這種情況下，框架如果沒(méi)有在表單數(shù)據(jù)中發(fā)現(xiàn)Id的值, 接著會(huì)檢查路由變量，發(fā)現(xiàn)有個(gè)路由變量的值叫Id，然后停止搜索，接下來(lái)不會(huì)搜索查詢字符串
    搜索順序是非常重要，如果我們打開URL– /Home/Index/2?id=1 ，然而我們將會(huì)看到Employee Id 為2的記錄, 如下圖所示:
    這是為什么Employee 為2的員工被顯示，因?yàn)樵诓樵冏址甀d的值(即1)之前框架在路由變量中發(fā)現(xiàn)了Id(即2)值，因此2的值被提供給action方法參數(shù)，如果我們打開URL-Home/Index?id=3，然而Employee Id為3的員工將被顯示：
    在這種情況下，框架沒(méi)有發(fā)現(xiàn)Id的值在URL段，因此它將搜索查詢字符串發(fā)現(xiàn)Id為3的值
    3 模型綁定默認(rèn)值
    如果ASP.NET Core在這三個(gè)地方?jīng)]有發(fā)現(xiàn)綁定的值，會(huì)發(fā)生什么呢？– 表單數(shù)據(jù)值，路由變量&查詢字符串，在這種情況下，它將根據(jù)action方法定義的類型提供默認(rèn)值，這些默認(rèn)值是:
    1 int類型為0
    2 string類型為""
    3 時(shí)間類型為01-01-0001 00:00:00
    4 float類型為0
    在Index方法代碼中我們測(cè)試一下模型綁定默認(rèn)值：
    public IActionResult Index(int id){ if (id==0) id=1; return View(repository[Convert.ToInt32(id)]);}
    我們把參數(shù)id默認(rèn)值移除掉，接下來(lái)我們?cè)贗ndex方法中打斷點(diǎn)，然后運(yùn)行應(yīng)用程序并且進(jìn)入U(xiǎn)RL – /Home/Index，注意在這個(gè)url中沒(méi)有給定第三個(gè)參數(shù)employee id，因此現(xiàn)在模型綁定將提交默認(rèn)值，當(dāng)斷點(diǎn)命中時(shí)，我們將鼠標(biāo)移動(dòng)到id變量上檢查一下值，你將看到值0，如下圖所示:
    當(dāng)ASP.NET Core 沒(méi)有給employee id 值，因此它會(huì)為id參數(shù)綁定默認(rèn)值，Id參數(shù)是int類型，默認(rèn)值是0，因此模型綁定提供了默認(rèn)值為0
    你能獲取到它 – 如果Id參數(shù)類型修改為string，然而模型綁定將給與默認(rèn)值""
    我們數(shù)據(jù)中沒(méi)有員工Id為0，因此我們?cè)趇f代碼塊中賦值為1，這將幫助我們阻止運(yùn)行時(shí)錯(cuò)誤，我們可以通過(guò)使用Try-Catch 塊處理運(yùn)行時(shí)錯(cuò)誤
    注意可空類型的默認(rèn)值為，現(xiàn)在修改Index方法有一個(gè)able int類型參數(shù)，代碼如下：
    public IActionResult Index(int? id){ if (id==) id=1; return View(repository[Convert.ToInt32(id)]);}
    運(yùn)行你的應(yīng)用程序并且進(jìn)入U(xiǎn)RL– /Home/Index，現(xiàn)在通過(guò)斷點(diǎn)來(lái)檢查id的值, 這時(shí)你將發(fā)現(xiàn)它的值為
    4 模型綁定簡(jiǎn)單類型
    當(dāng)ASP.NET Core 綁定簡(jiǎn)單類型時(shí)，將會(huì)把值轉(zhuǎn)換為方法的參數(shù)類型，簡(jiǎn)單類型是– string,int,bool,float,datetime,decimal等
    讓我們通過(guò)一個(gè)簡(jiǎn)單的例子來(lái)了解一下：
    public IActionResult Index(int? id){ if (id==) id=1; return View(repository[Convert.ToInt32(id)]);}
    Index方法參數(shù)是int類型因此ASP.NET Core 框架會(huì)自動(dòng)轉(zhuǎn)換url中id段變量的值到int值
    案例 1 : 針對(duì) URL – /Home/Index/1
    當(dāng)強(qiáng)求的URL包含的id值為int，像– /Home/Index/1 框架會(huì)成功轉(zhuǎn)換1的值到int，因此方法參數(shù)會(huì)收到參數(shù)為1
    案例 2 : 針對(duì) URL – /Home/Index/John
    如果你收到要給URL，Id值是字符串像– /Home/Index/John 在這種情況下，框架將嘗試把John轉(zhuǎn)換到int值，這時(shí)不能轉(zhuǎn)化，因此action 方法接收到id的參數(shù)為
    5 模型綁定復(fù)雜類型
    當(dāng)action方法的參數(shù)是復(fù)雜類型，像類對(duì)象，然而模型綁定會(huì)指定綁定每個(gè)復(fù)雜類型的公共屬性
    模型綁定查找公共屬性從下面三個(gè)地方：
    1 表單數(shù)據(jù)
    2 路由變量
    3 查詢字符串
    這個(gè)是非常重要的感念，你將在你的項(xiàng)目中再次使用，面試時(shí)也經(jīng)常問(wèn)到這個(gè)問(wèn)題，因此我們創(chuàng)建一個(gè)例子理解它
    在Home Controller中添加Create方法，這兩個(gè)方法如下：
    public IActionResult Create()=> View();[HttpPost]public IActionResult Create(Employee model)=> View("Index", model);
    HTTP GET版本的Create方法選擇默認(rèn)View并且沒(méi)有傳遞任何模型給它，HTTP POST 版本的Create方法有一個(gè)Employee參數(shù)的類型(是一個(gè)復(fù)雜類型)
    模型綁定的功能是從Http請(qǐng)求中提取Employee類公共屬性，并且將它提供給Create方法的參數(shù)，該方法傳遞Employee模型對(duì)象到默認(rèn)View
    接下來(lái)在Views->Home 文件夾下創(chuàng)建Create 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>
    這個(gè)View包含了一個(gè)表單并且綁定了Employee實(shí)體一些公共屬性，當(dāng)表單被提交這些值將被提交到HTTP POST版本的Create方法
    Create方法需要Employee對(duì)象的參數(shù)，因此模型綁定過(guò)程首先從表單數(shù)據(jù)中查找Employee對(duì)象的每個(gè)公共屬性的值(Id, Name, DOB, Role)
    表單數(shù)據(jù)包含了這些值，使用asp-for幫助標(biāo)簽作為輸入元素，例如-示例–id屬性綁定到輸入控件，如下所示
    <input asp-for="Id" class="form-control" />
    Name屬性被綁定通過(guò)下面這種方式
    <input asp-for="Name" class="form-control" />
    模型綁定會(huì)把這些值綁定到Employee對(duì)象的屬性，將Employee對(duì)象傳遞給Create方法的參數(shù)，Create方法使用模型綁定技術(shù)獲取employee類型的參數(shù)值
    asp-for 是一個(gè)幫助標(biāo)簽，你可以獲取到更多的關(guān)于內(nèi)置幫助標(biāo)簽在ASP.NET Core
    Post版本的Create方法調(diào)用Index視圖，將Employee對(duì)象作為Model傳遞給View，現(xiàn)在運(yùn)行應(yīng)用程序并且進(jìn)入U(xiǎn)RL– /Home/Create，在表單中輸入所有值并點(diǎn)擊提交按鈕，我們會(huì)看到填充的值顯示在瀏覽器上
    下面2張圖片顯示了填充和提交的表單:
    6 復(fù)雜對(duì)象包含復(fù)雜對(duì)象
    EmployeeDetails.cs類包含了名稱為HomeAddress公共屬性，這個(gè)屬性是一個(gè)Address類型，因此復(fù)雜對(duì)象包含另一個(gè)復(fù)雜對(duì)象案例
    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屬性時(shí)，模型綁定處理過(guò)程和前面的相同:
    1 查找所有HomeAddress的公共屬性(即 HouseNumber, Street, City, PostalCode, Country)
    2 在表單數(shù)據(jù)中搜索這些公共屬性的值，注意路由&查詢字符串變量不能包含復(fù)雜類型
    更新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>
    當(dāng)綁定HomeAddress屬性時(shí)候，我們必須包含"HomeAddress"，看Helper標(biāo)簽asp-for="HomeAddress.HouseNumber" 綁定HouseNumber屬性，我們也為另一些屬性使用這種綁定
    編輯Index視圖顯示HomeAddress對(duì)象所有屬性，代碼如下:
    @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>
    現(xiàn)在，運(yùn)行應(yīng)用程序并且進(jìn)入U(xiǎn)RL– /Home/Create, 填充并提交表單，我們將發(fā)現(xiàn)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屬性的值變?yōu)镠omeAddress_HouseNumber，相同的方式，City輸入控件獲取name屬性的值，然而id的屬性的值為 HomeAddress_City
    在C#代碼中我們也能獲取HouseNumber值在action 方法通過(guò)使用Request.Form方法，代碼如下：
    string houseNo=Request.Form["HomeAddress.HouseNumber"];
    針對(duì)另外一些值也是相同的方式
    7 使用[Bind(Prefix)]特性綁定復(fù)雜類型
    [Bind(Prefix)]特性能修改復(fù)雜類型模型綁定的默認(rèn)行為，讓我們通過(guò)一個(gè)例子來(lái)理解，創(chuàng)建一個(gè)名為PersonAddress.cs的模型類使用下面代碼：
    namespace AspNetCore.ModelBinding.Models{ public class PersonAddress { public string City { get; set; } public string Country { get; set; } }}
    接下來(lái)，在HomeController類中添加一個(gè)新的action方法叫DisplayPerson
    [HttpPost]public IActionResult DisplayPerson(PersonAddress personAddress){ return View(personAddress);}
    下一步，修改Create視圖中asp-action標(biāo)簽的值，將該值設(shè)置為DisplayPerson，代碼如下：
    <form asp-action="DisplayPerson" method="post"> ...</form>
    現(xiàn)在，意味著當(dāng)我們?cè)诒韱沃休斎霐?shù)據(jù)并且提交表單時(shí)，數(shù)據(jù)將被提交到DisplayPerson方法，在Views->Home文件夾創(chuàng)建一個(gè)DisplayPerson視圖，這個(gè)視圖包含PersonAddress類型，并顯示城市和國(guó)家在模型對(duì)象
    DisplayPerson視圖代碼如下：
    @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>
    現(xiàn)在運(yùn)行你的應(yīng)用程序，并且進(jìn)入U(xiǎn)RL- /Home/Create，填充表單并且點(diǎn)擊提交按鈕
    注意City和Country沒(méi)有包含任何值，模型綁定失敗了，看如下圖：
    模型綁定失敗的原因是因?yàn)镃ity和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="">
    為了解決這個(gè)問(wèn)題，我們?cè)赼ction方法的參數(shù)中應(yīng)用[Bind(Prefix)]，告訴ASP.NET Core 基于HomeAddress前綴完成模型綁定
    因此改變DisplayPerson 方法包含[Bind(Prefix=nameof(Employee.HomeAddress))]顯示如下：
    public IActionResult DisplayPerson([Bind(Prefix=nameof(Employee.HomeAddress))] PersonAddress personAddress){ return View(personAddress);}
    再次提交表單，這次我們將發(fā)現(xiàn)City和Country值并將他們顯示在瀏覽器，看下面圖片:
    使用[Bind]選擇性的綁定屬性
    我們可以選擇性的綁定屬性，Bind()方法的第一個(gè)參數(shù)提供包含模型綁定中的所有屬性的名稱(用逗號(hào)分隔的列表中)，那意味著剩下的屬性將不被綁定
    修改DisplayPerson方法代碼，綁定方法包含City屬性
    public IActionResult DisplayPerson([Bind(nameof(PersonAddress.City), Prefix=nameof(Employee.HomeAddress))] PersonAddress personAddress){ return View(personAddress);}
    測(cè)試一下該方法，你將看到僅僅City值顯示，如下圖所示：
    我們可以使用另外一種方法實(shí)現(xiàn)相同的功能，在PersonAddress類的Country屬性上使用 [BindNever] 特性，BindNever指定的屬性模型綁定將被忽略
    using Microsoft.AspNetCore.Mvc.ModelBinding;namespace AspNetCore.ModelBinding.Models{ public class PersonAddress { public string City { get; set; } [BindNever] public string Country { get; set; } }}
    8 模型綁定上傳文件
    我們通過(guò)模型綁定技術(shù)完成上傳文件功能，這里我們必須做3件事情：
    1 在View中添加input type=”file”控件
    2 在html表單的標(biāo)簽中添加enctype="multipart/form-data"特性
    3 在action方法中添加IFormFile類型參數(shù)，使用該參數(shù)綁定上傳文件
    我們創(chuàng)建一個(gè)上傳文件的特性，添加一個(gè)新的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(); [HttpPost] 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"); } }}
    添加一個(gè)IWebHostEnvironment 的依賴用來(lái)獲取"wwwroot"文件夾的全部路徑, Index方法通過(guò)模型綁定技術(shù)將上傳的文件綁定到IFormFile類型參數(shù)
    方法內(nèi)部將文件保存到應(yīng)用程序wwwroot/Images文件夾內(nèi)
    為了能夠正常工作你確保在wwwroot目錄下創(chuàng)建Images文件夾，接下來(lái)在 Views/FileUpload文件夾內(nèi)添加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>
    瀏覽器看上如下：
    總結(jié)：
    在ASP.NET Core中模型綁定是一個(gè)重要的感念，開發(fā)人員能夠非常容易的在Views和Controllers之間傳輸數(shù)據(jù)，在這節(jié)文章中，我們通過(guò)例子來(lái)了解模型綁定原理
    源代碼地址
    https://github.com/bingbing-gui/Asp.Net-Core-Skill/tree/master/Fundamentals/AspNetCore.ModelBinding/AspNetCore.ModelBinding
    參考文獻(xiàn)
    https://www.yogihosting.com/aspnet-core-model-binding/

　AngularJS支持通過(guò)單個(gè)頁(yè)面上的多個(gè)視圖單頁(yè)應(yīng)用。要做到這一點(diǎn)AngularJS提供了ng-view 、 ng-template 指令和 $routeProvider 服務(wù)。

　　ng-view

　　NG-view標(biāo)記簡(jiǎn)單地創(chuàng)建一個(gè)占位符，其中一個(gè)相應(yīng)的視圖(HTML或ng-template視圖)，可以根據(jù)配置來(lái)放置。

　　使用

　　定義主模塊使用一個(gè) div 及ng-view。

<div ng-app="mainApp">
...
   <div ng-view></div>

</div>    12345復(fù)制代碼類型：[html]

　　ng-template

　　ng-template指令用于創(chuàng)建使用腳本標(biāo)記的HTML視圖。它包含一個(gè)“id”屬性用于由 $routeProvider 映射帶有控制器的視圖。

　　使用

　　定義腳本塊類型為 ng-template 的主模塊。

div ng-app="mainApp">
...
   <script type="text/ng-template" id="addStudent.htm">
      <h2> Add Student </h2>
         {{message}}
   </script>

</div>    12345678復(fù)制代碼類型：[html]

　　$routeProvider

　　$routeProvider是用來(lái)設(shè)置URL配置的關(guān)鍵服務(wù)，映射與對(duì)應(yīng)的HTML頁(yè)面或ng-template，并附加相同的控制器。

　　使用

　　定義腳本塊類型為 ng-template 的主模塊。

<div ng-app="mainApp">
...
   <script type="text/ng-template" id="addStudent.htm">
      <h2> Add Student </h2>
         {{message}}
   </script>

</div>    
123456789復(fù)制代碼類型：[html]

　　使用

　　定義腳本塊及主模塊，并設(shè)置路由配置。

var mainApp=angular.module("mainApp", ['ngRoute']);
      
      mainApp.config(['$routeProvider',
         function($routeProvider) {
            $routeProvider.
               when('/addStudent', {
                  templateUrl: 'addStudent.htm',
                  controller: 'AddStudentController'
               }).
               when('/viewStudents', {
                  templateUrl: 'viewStudents.htm',
                  controller: 'ViewStudentsController'
               }).
               otherwise({
                  redirectTo: '/addStudent'
               });
         }]);
123456789101112131415161718復(fù)制代碼類型：[html]

　　以下是在上面的例子中要考慮的重點(diǎn)。

　　$ routeProvider定義作為一個(gè)函數(shù)在mainApp模塊的配置下，使用鍵 '$routeProvider'.

　　$routeProvider定義URL “/addStudent”，然后映射到“addStudent.htm”。addStudent.htm 存在于相同的路徑的主html頁(yè)面。如果HTM網(wǎng)頁(yè)沒(méi)有定義，那么NG-模板使用id="addStudent.htm"。我們使用ng-template。

　　"otherwise" 用于設(shè)置的默認(rèn)視圖。

　　"controller" 用于為視圖設(shè)置相應(yīng)的控制器。

開課吧廣場(chǎng)-人才學(xué)習(xí)交流平臺(tái)

言

網(wǎng)站開發(fā)一般基于瀏覽器來(lái)展示，手機(jī)端目前成為兵家必爭(zhēng)之地，怎么在網(wǎng)頁(yè)端開發(fā)一份代碼，在手機(jī)端也能有不錯(cuò)的效果呢。查資料發(fā)現(xiàn)通過(guò)響應(yīng)式布局和自適應(yīng)布局可以解決，那接下來(lái)我們來(lái)實(shí)踐一下。

概念：

1、首先，響應(yīng)式和自適應(yīng)最為關(guān)鍵的區(qū)別是什么呢？

簡(jiǎn)而言之，響應(yīng)式就相當(dāng)于液體，它可以自動(dòng)適應(yīng)不同尺寸的屏幕，無(wú)論你的設(shè)備尺寸多么奇葩。響應(yīng)式使用CSS media queries的方法，根據(jù)目標(biāo)設(shè)備自動(dòng)改變風(fēng)格如顯示類型,寬度、高度等，這能很好解決不同屏幕尺寸的顯示問(wèn)題。

而自適應(yīng)設(shè)計(jì)是基于斷點(diǎn)使用靜態(tài)布局，一旦頁(yè)面被加載就無(wú)法再進(jìn)行自動(dòng)適應(yīng)，自適應(yīng)會(huì)自動(dòng)檢測(cè)屏幕的大小來(lái)加載適當(dāng)?shù)墓ぷ鞑季郑簿褪钦f(shuō)，當(dāng)你要采用自適應(yīng)設(shè)計(jì)網(wǎng)站時(shí)，你得一個(gè)一個(gè)設(shè)計(jì)6種常見的屏幕布局。

1.320
2.480
3.760
4.960
5.1200
6.1600

顯然，自適應(yīng)設(shè)計(jì)需要做更多的工作，你必須至少設(shè)計(jì)6種常見的布局。而響應(yīng)式設(shè)計(jì)可以更好地適應(yīng)復(fù)雜的媒體設(shè)備要求，能很好地解決顯示和性能問(wèn)題。

千言萬(wàn)語(yǔ)不如一圖：

如何選擇屏幕大小分割點(diǎn)

如何確定媒體查詢的分割點(diǎn)也是一個(gè)開發(fā)中會(huì)遇到的問(wèn)題，下面是市場(chǎng)上的移動(dòng)設(shè)備和電腦屏幕分辨率的分布情況，可以發(fā)現(xiàn)不同品牌和型號(hào)的設(shè)備屏幕分辨率一般都不一樣

如果我們選擇600px,900px,1200px,1800px作為分割點(diǎn)，可以適配到常見的14個(gè)機(jī)型：

當(dāng)然這只是其中的一種分割方案，我們還可以這樣劃分：480px,800px,1400px,1400px

簡(jiǎn)單點(diǎn)：提供三個(gè)設(shè)計(jì)稿件尺寸分別是：640px、960px、1200px

而作為曾經(jīng)典型的響應(yīng)式布局框架，Bootstrap是怎么進(jìn)行斷點(diǎn)的呢？

上面的分割方案不一定滿足項(xiàng)目中的實(shí)際需求，我們可以先用跨度大的分割點(diǎn)進(jìn)行分割，如果出現(xiàn)不適配的情況可以再根據(jù)實(shí)際情況增加新的分割點(diǎn)。

響應(yīng)式設(shè)計(jì)的步驟

1. 設(shè)置 Meta 標(biāo)簽

大多數(shù)移動(dòng)瀏覽器將HTML頁(yè)面放大為寬的視圖（viewport）以符合屏幕分辨率。你可以使用視圖的meta標(biāo)簽來(lái)進(jìn)行重置。下面的視圖標(biāo)簽告訴瀏覽器，使用設(shè)備的寬度作為視圖寬度并禁止初始的縮放。在<head>標(biāo)簽里加入這個(gè)meta標(biāo)簽。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

[1]（user-scalable=no 屬性能夠解決 iPad 切換橫屏之后觸摸才能回到具體尺寸的問(wèn)題。）

2. 通過(guò)媒介查詢來(lái)設(shè)置樣式 Media Queries

Media Queries 是響應(yīng)式設(shè)計(jì)的核心。它根據(jù)條件告訴瀏覽器如何為指定視圖寬度渲染頁(yè)面。假如一個(gè)終端的分辨率小于 980px，那么可以這樣寫：

@media screen and (max-width: 980px) {
  #head { … }
  #content { … }
  #footer { … }
}

這里的樣式就會(huì)覆蓋上面已經(jīng)定義好的樣式。

3. 設(shè)置多種視圖寬度

假如我們要設(shè)定兼容 iPad 和 iPhone 的視圖，那么可以這樣設(shè)置：

/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}

恩，差不多就這樣的一個(gè)原理。

一些注意的

1. 寬度需要使用百分比

例如這樣：

#head { width: 100% }
#content { width: 50%; }

2. 處理圖片縮放的方法

簡(jiǎn)單的解決方法可以使用百分比，但這樣不友好，會(huì)放大或者縮小圖片。那么可以嘗試給圖片指定的最大寬度為百分比。假如圖片超過(guò)了，就縮小。假如圖片小了，就原尺寸輸出。

img { width: auto; max-width: 100%; }

或
img { max-width: 100%; height: auto }
這行代碼對(duì)于大多數(shù)嵌入網(wǎng)頁(yè)的視頻也有效果，所以可以寫成：

img object { max-width: 100%; height:auto}

老版本的Ie不支持max-width，所以只好寫成：

img { width: 100%; height:auto}

此外，windows平臺(tái)縮放圖片時(shí)，可能出現(xiàn)圖像失真現(xiàn)象，這時(shí)可以嘗試使用IE的專有命令：
Img { -ms-interpolation-mode: bicubic }

用::before和::after偽元素 +content 屬性來(lái)動(dòng)態(tài)顯示一些內(nèi)容或者做其它很酷的事情，在 CSS3 中，任何元素都可以使用 content 屬性了，這個(gè)方法就是結(jié)合 css3 的 attr 屬性和 HTML 自定義屬性的功能： HTML 結(jié)構(gòu)：

<img src="image.jpg"
     data-src-600px="image-600px.jpg"
     data-src-800px="image-800px.jpg"
     alt="">

CSS 控制：

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

3. 其他屬性

例如pre，iframe，video等，都需要和img一樣控制好寬度。對(duì)于table，建議不要增加 padding 屬性，低分辨率下使用內(nèi)容居中：

table th, table td { padding: 0 0; text-align: center; }

來(lái)源資料：

http://www.woshipm.com/pd/153425.html

https://www.yisu.com/zixun/118775.html

http://caibaojian.com/356.html

https://juejin.cn/post/6844903814332432397（推薦）

https://www.xiaoxili.com/blog/posts/fusion-web-design

在線咨詢

上一篇：jenkins 集成 fastlane 打包 iOS
下一篇：nginx實(shí)現(xiàn)url重寫實(shí)例參考

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商