控件封裝的部分說明
可能有人覺得應該前後端分離,我也承認這是應該的方向,我們也在考慮使用ng2等簡化前端。但是,我們封裝控件還是因為如下原因綜合考慮的:
其實呢,mvc也提供了html.textfor等寫法,其中有的也封裝了js的,甚至校驗也是封裝的js。本節內容進階二,是直接使用cshtml,部分做到了前後端分離。當然了,如果有更好的建議和做法,歡迎提出來。
看本篇之前,建議先看一下上一篇9.2.1 .net framework下的MVC 控件的封裝(上)。
進階一:For類型控件的做法
我們在上一篇的最開始樣例中,寫了MVC控件的三種寫法。
1 @model UserInfo
2
3
4 <input type="text" id="t2" value="t2Value" /> <!—第一種寫法 -->
5
6 @Html.TextBox("t1", "t1value"); <!—第二種寫法 -->
7
8 @Html.TextBoxFor(user => user.EMail) <!—第三種寫法 -->
第一種是html的原始寫法,控件的封裝不會用這種方法(.net core的taghelper就可以寫成這樣了)。在上一篇的介紹中,我們講解了按照第二種樣子來做控件的封裝。但是當我們的控件要綁定cshtml頁面的model屬性時,要寫成第三種方式,也就是寫成類似@Html.TextboxFor(user => user.Email)的For寫法。
這裡的user是指的UserInfo,這個寫法就是在頁面中生成Id為Email的input元素,值也自動填充UserInfo的實例的電子郵件地址EMail,並且如果UserInfo類的Email屬性上有校驗、顯示名等Attribute時,可以自動生成校驗腳本和標簽。例如下面就是對UserName和Age兩個屬性增加顯示名稱和校驗。
1 [Display(Name="用戶名")]
2 [Required(ErrorMessage = "*姓名必填")]
3 public string UserName { get; set; }
4
5 [Display(Name = "年齡")]
6 [Required(ErrorMessage = "*年齡必填")]
7 public int Age { get; set; }
這種寫法,會在最終生成的html代碼中,自動添加用戶名和年齡的標簽和校驗腳本。
既然這種寫法可以自動綁定model,也可以自動生成標簽和校驗等,我們該如何實現For的寫法呢?下面我們仍舊以下拉多選控件為例,進行說明。
同樣的,我們需要寫一個MultiSelectFor的控件,這個For控件是個泛型類
1 public class MultiSelectFor<TModel, TProperty> : MvcControlForBase<TModel, TProperty>
2 {
3 /// <summary>
4 /// 初始化
5 /// </summary>
6 /// <param name="htmlHelper"></param>
7 /// <param name="expression"></param>
8 /// <param name="htmlAttributes"></param>
9 public MultiSelectFor(HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes)
10 : base(htmlHelper, expression, htmlAttributes)
11 {
12 this.DataSource = new Dictionary<string, string>();
13 }
14 ……
15 }
繼承泛型的控件基類MvcControlForBase<TModel, TProperty>,一樣的也要有一個泛型的基控件構造類
public abstract class MvcControlForBuilderBase<TModel, TProperty, TMvcControl, TBuilder>
where TMvcControl : MvcControlForBase<TModel, TProperty>
where TBuilder : MvcControlForBuilderBase<TModel, TProperty, TMvcControl, TBuilder>
這兩個類的實現與上一篇很類似。我們不再仔細介紹了,唯一需要注意的是控件基類MvcControlForBase<TModel, TProperty>中的Name和Id是從表達式中獲取的,而不是通過構造函數的參數傳入的。因此構造函數傳入的是Expression<Func<TModel, TProperty>>。控件的Name可以自動從Expression中獲得,因此可以直接改為只讀屬性。
1 protected string Name
2 {
3 get
4 {
5 if (Attributes.ContainsKey("name"))
6 {
7 return Attributes["name"].ToString();
8 }
9 else
10 {
11 return ExpressionHelper.GetExpressionText(Expression);
12 }
13 }
14 }
MultiSelectFor因為能夠自動生成Id、Name、Value、Label等,因此構造函數中也就不再傳入Label、value等參數,而是傳入表達式Expression,這些數據應該直接從for的表達式中獲取。為了實現獲取value,我們需要在render方法中,增加下面的內容
ModelMetadata metadata = ModelMetadata.FromLambdaExpression<TModel, TProperty>(this.Expression, this.Helper.ViewData);
List<string> value = metadata.Model as List<string>;
以及生成select控件時,寫法也更簡單了,直接從表達式生成
divTag.InnerHtml = Helper.DropDownListFor(Expression, selectList, HtmlAttributes).ToHtmlString();
同樣的,按照上一篇的做法,如果在cshtml頁面中按照如下的方式使用multiselect控件(控件的含義是:選擇一個人的多個職責,Duty是職責,一個人可能有多個職責,例如項目經理、高級開發工程師)
@model UserInfo
@HtmlHelper.MultiSelectFor(p => p.Duty).SetDataSource(…).Render()
HtmlHelper擴展方法也需要增加一個:
1 public static MultiSelectForBuilder<TModel, TProperty> MultiSelectFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes = null)
2 {
3 return new MultiSelectForBuilder<TModel, TProperty>(new MultiSelectFor<TModel, TProperty>(helper, expression, htmlAttributes));
4 }
進階二:資源性視圖的應用
為了更簡化WriteHtml和WriteScript的寫法,我們將腳本和html元素都寫到一個cshtml中,這樣代碼看起來更簡潔,也更易讀,也可以實現前後端的分離。我們以日期選擇控件DatePicker為例,DataPicker.cshtml內容如下:
1 @{
2 string id = this.ViewData.GetString("Id");
3 string name = this.ViewData.GetString("Name");
4 string dateFormat = this.ViewData.GetString("DateFormat");
5 bool readOnly = this.ViewData.GetBool("ReadOnly");
6 }
7 @if (!readOnly)
8 {
9 <script>
10 require(['jquery', 'jquery.ui', 'ready!'], function ($) {
11 var options = {
12 changeYear: true,
13 changeMonth: true,
14 dateFormat: "@(dateFormat.ToLower().Replace("yyyy", "yy"))"
15 };
16 $("#@(id)").datepicker(options);
17 });
18 </script>
19 }
寫成這樣的好處就是不要在WriteHtml和WriteScript中寫一大堆的腳本、html標簽的拼接程序。
再回到DataPicker控件來,這樣datapicker不需要再寫WriteScript方法,僅僅重寫WriteHtml方法,這個方法主要工作也簡化為:傳入ViewData,然後調用部分視圖DataPicker.cshtml:
1 ViewDataDictionary vdata = new ViewDataDictionary();
2
3 vdata["Id"] = this.Id;
4 vdata["Name"] = this.Name;
5 vdata["DateFormat"] = this.DateFormat;
6 vdata["ReadOnly"] = (this.DisplayStatus == FieldDisplayStatus.ReadOnly);
7
8 writer.Write(Helper.Partial("MicroLibrary.Presentation.Web.Controls.CommControls.DatePicker.Views.DatePicker", vdata));
這裡需要注意的就是Helper.Partial方法,我們這裡調用的是這個重載方法
1 // 2 // 摘要: 3 // 以 HTML 編碼字符串的形式呈現指定的分部視圖。 4 // 5 // 參數: 6 // htmlHelper: 7 // 此方法擴展的 HTML 幫助器實例。 8 // 9 // partialViewName: 10 // 要呈現的分部視圖的名稱。 11 // 12 // viewData: 13 // 用於分部視圖的視圖數據字典。 14 // 15 // 返回結果: 16 // 以 HTML 編碼字符串形式呈現的分部視圖。 17 public static MvcHtmlString Partial(this HtmlHelper htmlHelper, string partialViewName, ViewDataDictionary viewData);
Helper.Partial的參數是分部視圖名稱,但是為什麼是MicroLibrary.Presentation.Web.Controls.CommControls.DatePicker.Views.DatePicker這樣的寫法呢?
我們前面提到,我們又更近一步做了封裝,將這些控件都放到一個項目中,打包成應用程序集給各個項目使用。控件使用的cshtml也會被打包進應用程序集中,做法就是將cshtml文件屬性設置為嵌入的資源,編譯時就會以資源的方式直接打包在dll中。當然了,也可以將控件的cshtml復制到Web項目中,但是這種做法確實有些土,我們用的是更高大上的做法J

打包進應用程序集的文件的寫法就是這樣的,類名的全名稱,例如這裡的DataPicker.cshtml就是MicroLibrary.Presentation.Web.Controls.CommControls.DatePicker.Views.DatePicker。
但是怎麼通過MicroLibrary.Presentation.Web.Controls.CommControls.DatePicker.Views.DatePicker來定位DataPicker.cshtml呢?這涉及到頁面查找的問題,說來話長了。
一般情況下,Razor視圖引擎的基類是RazorViewEngine,繼承於抽象類型BuildManagerViewEngine,再繼承自VirtualPathProviderViewEngine。ViewEngine中的方法FindView和FindPartialView是按照如下的目錄進行搜索的:
我們可以繼承VirtualPathProviderViewEngine,重寫FindView和FindPartialView修改上面列表,以適應自己系統的目錄搜索要求。
這種方式對於文件系統方式下的目錄搜索是可以的,但是如果視圖文件存放在數據庫、Dll的資源中,這種方式就不好使了。這時候,應該是使用更底層的VirtualPathProvider。MSDN中的說明是這樣的:VirtualPathProvider提供了一組可讓 Web 應用程序從虛擬文件系統中檢索資源的方法。我們這裡就是通過修改它來完成從Dll的資源中獲取視圖文件。
在Global.asax中的寫法如下:
1 var embeddedViewResolver = new EmbeddedViewResolver(); 2 var viewTable = embeddedViewResolver.GetEmbeddedViews(); 3 var embeddedProvider = new EmbeddedViewVirtualPathProvider(viewTable); 4 HostingEnvironment.RegisterVirtualPathProvider(embeddedProvider);
第一行,創建資源性視圖的解析類,這個類初始化時,先找到控件所在的程序集。
1 public class EmbeddedViewResolver : IEmbeddedViewResolver
2 {
3 private IList<Assembly> assemblies;
4
5 public EmbeddedViewResolver() {
6 this.assemblies = new List<Assembly>() { Assembly.GetAssembly(typeof(MvcControlBase)) };
7 }
8 }
第二行,解析類從控件所在程序集中找到所有的資源行視圖,存放到EmbeddedViewTable中。EmbeddedViewTable相當與一個Dictionary,存放了ViewName和ViewMetaData的鍵值對。EmbeddedViewTable和ViewMetaData相對比較簡單,不做介紹了。
1 public EmbeddedViewTable GetEmbeddedViews()
2 {
3 if (assemblies == null || assemblies.Count == 0) return null;
4
5 var table = new EmbeddedViewTable();
6
7 foreach (var assembly in assemblies)
8 {
9 var names = GetNamesOfAssemblyResources(assembly);
10 if (names == null || names.Length == 0) continue;
11
12 foreach (var name in names)
13 {
14 var key = name.ToLowerInvariant();
15
16 if (!key.Contains(".views.")) continue; //要求所有的資源性視圖都應該在views目錄下
17
18 table.AddView(name, assembly.FullName);
19 }
20 }
21
22 return table;
23 }
24
25 private string[] GetNamesOfAssemblyResources(Assembly assembly)
26 {
27 try
28 {
29 return assembly.GetManifestResourceNames();
30 }
31 catch
32 {
33 return new string[] { };
34 }
35 }
第三行,進入正題了,創建繼承於VirtualPathProvider的資源性視圖提供器EmbeddedViewVirtualPathProvider。重寫GetFile,如果是資源性視圖,去EmbeddedViewTable中獲取視圖,否則調用Previous.GetFile(virtualPath)繼續系統缺省方式。同時也重寫FileExists和GetCacheDependency方法。
1 public class EmbeddedViewVirtualPathProvider : VirtualPathProvider
2 {
3 private readonly EmbeddedViewTable _embeddedViews;
4
5 public EmbeddedViewVirtualPathProvider(EmbeddedViewTable embeddedViews)
6 {
7 MicroLibraryExceptionHelper.IsNull(embeddedViews, this.GetType().FullName, TraceLogType.Error, "embeddedViews為空");
8
9 this._embeddedViews = embeddedViews;
10 }
11
12 private bool IsEmbeddedView(string virtualPath)
13 {
14 if (string.IsNullOrEmpty(virtualPath))
15 return false;
16
17 string virtualPathAppRelative = VirtualPathUtility.ToAppRelative(virtualPath);
18 if (!virtualPathAppRelative.StartsWith("~/Views/", StringComparison.InvariantCultureIgnoreCase))
19 return false;
20
21 var fullyQualifiedViewName = virtualPathAppRelative.Substring(virtualPathAppRelative.LastIndexOf("/") + 1, virtualPathAppRelative.Length - 1 - virtualPathAppRelative.LastIndexOf("/"));
22
23 bool isEmbedded = _embeddedViews.ContainsEmbeddedView(fullyQualifiedViewName);
24 return isEmbedded;
25 }
26
27 public override bool FileExists(string virtualPath)
28 {
29 return (IsEmbeddedView(virtualPath) ||
30 Previous.FileExists(virtualPath));
31 }
32
33 public override VirtualFile GetFile(string virtualPath)
34 {
35 if (IsEmbeddedView(virtualPath))
36 {
37 string virtualPathAppRelative = VirtualPathUtility.ToAppRelative(virtualPath);
38 var fullyQualifiedViewName = virtualPathAppRelative.Substring(virtualPathAppRelative.LastIndexOf("/") + 1, virtualPathAppRelative.Length - 1 - virtualPathAppRelative.LastIndexOf("/"));
39
40 var embeddedViewMetadata = _embeddedViews.FindEmbeddedView(fullyQualifiedViewName);
41 return new EmbeddedResourceVirtualFile(embeddedViewMetadata, virtualPath);
42 }
43
44 return Previous.GetFile(virtualPath);
45 }
46
47 public override CacheDependency GetCacheDependency(
48 string virtualPath,
49 IEnumerable virtualPathDependencies,
50 DateTime utcStart)
51 {
52 return IsEmbeddedView(virtualPath)
53 ? null : Previous.GetCacheDependency(virtualPath, virtualPathDependencies, utcStart);
54 }
55 }
大家可能注意到GetFile返回的是EmbeddedResourceVirtualFile這個類,這個類繼承自VirtualFile,主要的方法是Open,就是從應用程序集的資源中返回當前資源性視圖的stream。
1 public class EmbeddedResourceVirtualFile : VirtualFile
2 {
3 private readonly EmbeddedViewMetadata _embeddedViewMetadata;
4
5 public EmbeddedResourceVirtualFile(EmbeddedViewMetadata embeddedViewMetadata, string virtualPath)
6 : base(virtualPath)
7 {
8 MicroLibraryExceptionHelper.IsNull(embeddedViewMetadata, this.GetType().FullName, TraceLogType.Error, "embeddedViewMetadata 為空");
9
10 this._embeddedViewMetadata = embeddedViewMetadata;
11 }
12
13 public override Stream Open()
14 {
15 Assembly assembly = GetResourceAssembly();
16 return assembly == null ? null : assembly.GetManifestResourceStream(_embeddedViewMetadata.Name);
17 }
18
19 private Assembly GetResourceAssembly()
20 {
21 return AppDomain.CurrentDomain.GetAssemblies()
22 .Where(assembly => string.Equals(assembly.FullName, _embeddedViewMetadata.AssemblyFullName, StringComparison.InvariantCultureIgnoreCase))
23 .FirstOrDefault();
24 }
25 }
第四行,在系統中注冊我們的EmbeddedViewVirtualPathProvider。
通過上面的四個步驟,就可以完成資源性視圖的解析工作了,通過MicroLibrary.Presentation.Web.Controls.CommControls.DatePicker.Views.DatePicker來定位cshtml也得以實現。
面向雲的.net core開發框架