在My Blog中已經有了文章管理功能，可以發布和修改文章，但是對於文章內容來說，這里缺少最重要的排版功能，如果沒有排版的博客很大程度上是無法閱讀的，由於文章是通過瀏覽器查看的，所以文章的排版其實與網頁的排版一致，是通過HTML+CSS實現的，但是在一個輸入框中寫文章內容還有HTML+CSS是不現實的，所以本文將使用ueditor編輯器來實現排版功能，並通過該功能為引介紹ASP.NET MVC中的模型綁定。
本章主要內容有：
● ueditor的下載與安裝
● 在頁面上使用ueditor
● ASP.NET MVC模型綁定簡介
● ASP.NET MVC不同數據類型的模型綁定
○ 基本類型
○ 自定義類型
○ 數組
○ 簡單對象數組
○ 自定義類型字典
○ 包含數組的自定義類型
○ 多種數據源的數據獲取
○ Bind特性
○ 結論
● 小結
ueditor的下載與安裝
ueditor是一個百度開源的web編輯器，其功能非常強大並且還針對不同語言提供了對應的后台程序用於支持圖片、文件的上傳、網絡圖片抓取等。先下載ueditor，並將其添加到My Blog項目中的Scripts文件夾下：
1、下載：http://ueditor.baidu.com/website/download.html
注：本例使用[1.4.3.3 .Net 版本]
上圖就是ueditor的目錄結構：
● net目錄保存了使用.net實現了后台文件處理的相關代碼實現。
● ueditor.all.js是ueditor的主文件，在使用編輯器時要引入該文件。
● ueditor.config是編輯器的js配置文件，使用時也需要引入該文件。
上圖是net目錄下的文件信息：
● App_Code存放了相關功能的邏輯處理代碼。
● config.json是后端程序的配置信息，編輯器初始化時首先會讀取該配置。
● controller.ashx編輯器與后台交互的接口，包括配置信息的讀取、圖片文件的上傳等。
注：ueditor提供了一個可以獨立部署的.Net程序，如果要獨立部署可參考文檔http://fex.baidu.com/ueditor/#server-net
另外如果ueditor提供的后台處理程序不能滿足需求時可參照其源碼自己實現即可，本例使用默認提供的代碼來完成。
2、完成ueditor圖片上傳等相關后台功能配置：
在默認的imageUrlPrefix的簽名加上“/scripts/”，因為上傳功能是以controller.ashx所在路徑在拼接上imagePathFormat配置的路徑確定的文件上傳路徑和文件名稱，所以在訪問圖片時需要加入controller.ashx所在路徑。
同理由於ueditor提供了網絡圖片抓取、視頻、文件等上傳功能，所以需要繼續修改相關配置。
在頁面上使用ueditor
1、在添加和更新文章頁面加入js引用及初始化代碼：
2、另外需要在PostMaintainViewModel的Content屬性上加入AllowHtml特性，因為內容中包含HTML代碼，驗證會拋異常
下圖是添加文章用的Insert方法：
注：ASP.NET 提供了請求驗證的功能，它用於驗證HTTP請求中是否包含危險內容，如HTML、JS等，所以如果要提交帶有html的內容需要在相應的模型字段上使用AllowHtml特性或者在action上使用ValidateInput(false)特性來關閉請求驗證，更多內容參考：https://msdn.microsoft.com/en-us/library/hh882339(v=vs.110).aspx
3、運行結果：
添加頁面：直接復制一篇博客園的文章，粘貼到編輯器中。
查看頁面：從圖中可以看到該編輯器可以將原有的樣式以及圖片都復制過來，雖然樣式上有一些小問題。
ASP.NET MVC模型綁定簡介
ASP.NET MVC的模型綁定功能的作用是將Http請求中的數據映射到MVC的Action方法的參數上，上面介紹的內容就是利用MVC的模型綁定功能，將在HTML表單中填寫的數據映射到Insert方法的PostMaintainViewModel類型參數上。
Action的參數一般為.Net的基本類型(int、float、char等)或者是自定義類型，除此之外還有基於這兩種類型的數組、字典等。
而在ASP.NET MVC中一般通過queryString、FormData、RouteData等將數據提交到服務器，然后再根據一些特殊的規則完成數據的識別與綁定。下面將通過一系列的Demo來介紹不同數據源以及不同參數類型是如何綁定的。
ASP.NET MVC模型綁定方式
基本類型
1、 Query String：通過queryString的變量名稱與action的變量名稱匹配：
url：http://localhost:52356/ModelBinderTest/demo1?field=test111
執行結果：
2、FormData：在Html的Form中包含與action參數名匹配的的input標簽：
url：http://localhost:52356/ModelBinderTest/demo2
頁面代碼和效果：
執行結果(點擊提交按鈕)：
3、RouteData ：在路由相關章節中介紹過，通過路由模板可以定義一些變量，當匹配到這些變量后會將其存放在RouteData中：
url：http://localhost:52356/ModelBinderTest/demo3/hello
路由配置：
執行結果：
ASP.NET MVC基本類型的綁定無論是從Query String、FormData還是RouteData，都是根據名稱來匹配的，如果上面的demo修改了參數名稱，那么將無法獲得數據。除了基類類型其它的自定義類型、數組等都是以名稱匹配為主要手段，並且它們都是以Query String、Form Data以及Route Data為主要數據源，下面對自定義及數組等類型分析時將只通過Query String來作為數據源。
自定義類型
下圖是該自定義類型的定義，只有兩個字符串類型的屬性：
1、通過屬性名匹配對象字段名稱：
url：http://localhost:52356/ModelBinderTest/Demo4?field1=test123&field2=111111
執行結果：
2、通過以參數名稱為前綴匹配：
url：http://localhost:52356/ModelBinderTest/Demo4?obj.field1=test123&obj.field2=111111
執行結果：
3、通過參數名稱為前綴區分不同對象：
url：http://localhost:52356/ModelBinderTest/Demo4?obj.field1=test123&obj.field2=111111&obj1.field1=hello&obj1.field2=world
執行結果：
對於簡單的自定義類型來說，它可以直接使用參數對象的屬性名稱來匹配，或者通過參數名稱作為前綴來指定，避免有多個參數對象存在屬性同名。
數組
1、通過同名參數來綁定數組，其元素順序按照參數順序來決定：
url：http://localhost:52356/ModelBinderTest/demo5?fields=test111&fields=test222
執行結果：
2、通過添加數組索引來綁定數組，元素順序與索引一致：
url：http://localhost:52356/ModelBinderTest/demo5?fields[1]=test111&fields[0]=test222
執行結果(注：綁定后的元素順序與參數下標一致)：
3、僅通過索引來綁定數組：
url：http://localhost:52356/ModelBinderTest/demo5?[1]=tes333&[0]=test222
執行結果(注：綁定后的元素順序與參數下標一致)：
簡單對象數組
1、通過參數名及數組索引作為前綴來匹配參數中的屬性：
url：http://localhost:52356/ModelBinderTest/Demo6?objs[0].field1=test123&objs[0].field2=111111&objs[1].field1=hello&objs[1].field2=world
執行結果：
2、僅通過索引作為前綴來匹配參數中的屬性：
url：http://localhost:52356/ModelBinderTest/Demo6?[1].field1=test123&[1].field2=111111&[0].field1=hello&[0].field2=world
執行結果(注意順序)：
自定義類型字典
1、通過參數名稱及其索引為前綴，Key、Value來分別關聯字典中相應的值：
url：http://localhost:52356/ModelBinderTest/Demo7?objs[0].Key=1&objs[0].Value.field1=hello&objs[0].Value.field2=world
執行結果：
2、僅使用索引為前綴，Key、Value來分別關聯字典中相應的值：
url：http://localhost:52356/ModelBinderTest/Demo7?[0].Key=1&[0].Value.field1=hello&[0].Value.field2=world&[1].Key=2&[1].Value.field1=hello1&[1].Value.field2=world1
執行結果：
包含數組的自定義類型
通過參數名稱、屬性名稱、索引來完成綁定：
url：http://localhost:52356/ModelBinderTest/Demo8?obj.field1=hello&obj.field2=world&obj.simplyobjects[0].field1=hello1&obj.simplyobjects[0].field2=world1
執行結果：
多種數據源的數據獲取
上面的例子均是以QueryString做為數據源來綁定數據，但是也提到過數據源除此之外還有FormData和RouteData，所以如果一個對象的數據分別位於多個數據源中，是否能夠正常綁定呢？現在以綁定一個簡單自定義對象為例，使用QueryString和RouteData為數據源查看對象的綁定結果：
url：http://localhost:52356/ModelBinderTest/Demo9/1/test123/?field2=111111
路由：
執行結果：
本例通過在路由模板中添加Field1變量信息來獲取對象的Field1字段數據，然后從QueryString中獲取了Field2字段數據，證明一個對象中的數據可以來自於不同的數據源。
但是在實際使用過程中建議只通過一個數據源獲取數據，避免造成代碼混亂難以管理。
Bind特性
它的作用是指明如何綁定模型的細節，比如前綴是什么，需要包含或排除的數據等等，其使用方式如下：
url：http://localhost:52356/ModelBinderTest/Demo10/1/?a.field1=test123&a.field2=111111
執行結果：
結論
1、用於模型綁定的數據源一般為QueryString、FormData和RouteData。
2、綁定基本類型時使用參數名稱進行匹配。
3、綁定自定義類型時使用類型的屬性名稱匹配，可以使用參數名稱作為前綴以區分name相同的變量。
4、綁定基本類型數組時可使用多個重復的參數名稱來組件數組，也可以使用參數名稱作為前綴，通過數組索引的形式指明數組某一位的元素的值是什么，當Action只有一個參數的時候也可以省略參數名稱，直接使用數組索引來指明。
5、同一個參數的不同屬性可以從不同的數據源中綁定。
注：在以上部分例子通過修改路由來滿足調試需求，使用時需要注意。
小結
本文從一個內容添加功能引出了ASP.NET MVC中的模型綁定，並介紹了模型綁定的數據源以及針對不同數據類型的參數的綁定方式，模型綁定作為ASP.NET MVC的一項重要功能除了進行數值的綁定外還具有對綁定的值進行驗證的功能，下一篇文章將對ASP.NET MVC中模型的驗證進行介紹。
參考：
https://docs.microsoft.com/en-us/aspnet/core/mvc/models/model-binding