9.2.2 .net framework下的MVC 控件的封装（下）

控件封装的部分说明

可能有人觉得应该前后端分离，我也承认这是应该的方向，我们也在考虑使用ng2等简化前端。但是，我们封装控件还是因为如下原因综合考虑的：

• 我们这是个框架，上面支撑了许多个应用，包含几百个页面，每个页面都去写一堆的js\css\html标签可能对开发人员来说非常麻烦，且每个人写的都可能不一样。为了更简化中、低级开发人员的工作才提供的这种封装，个人认为这样才是简化和标准化开发的做法
• 像我们这里有datatable、文件上传等的控件，datatable就包含分页、超链、排序、格式化等等，js非常复杂，附件上传更复杂，这个不做封装实在不方便使用
• 我们后面有自定义表单、自定义数据查询等功能，控件都是通过拖拽生成的，必须使用封装方式

其实呢，mvc也提供了html.textfor等写法，其中有的也封装了js的，甚至校验也是封装的js。本节内容进阶二，是直接使用cshtml，部分做到了前后端分离。当然了，如果有更好的建议和做法，欢迎提出来。

看本篇之前，建议先看一下上一篇9.2.1 .net framework下的MVC 控件的封装（上）。

进阶一：For类型控件的做法

我们在上一篇的最开始样例中，写了MVC控件的三种写法。

 @model UserInfo

 <input type="text" id="t2" value="t2Value" /> <!—第一种写法 -->

 @Html.TextBox("t1", "t1value"); <!—第二种写法 -->

 @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两个属性增加显示名称和校验。

 [Display(Name="用户名")]
 [Required(ErrorMessage = "*姓名必填")]
 public string UserName { get; set; }

 [Display(Name = "年龄")]
 [Required(ErrorMessage = "*年龄必填")]
 public int Age { get; set; }

这种写法，会在最终生成的html代码中，自动添加用户名和年龄的标签和校验脚本。

既然这种写法可以自动绑定model，也可以自动生成标签和校验等，我们该如何实现For的写法呢？下面我们仍旧以下拉多选控件为例，进行说明。

同样的，我们需要写一个MultiSelectFor的控件，这个For控件是个泛型类

     public class MultiSelectFor<TModel, TProperty> : MvcControlForBase<TModel, TProperty>
     {
         /// <summary>
         /// 初始化
         /// </summary>
         /// <param name="htmlHelper"></param>
         /// <param name="expression"></param>
         /// <param name="htmlAttributes"></param>
         public MultiSelectFor(HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes)
             : base(htmlHelper, expression, htmlAttributes)
         {
             this.DataSource = new Dictionary<string, string>();
         }
         ……
     }

继承泛型的控件基类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中获得，因此可以直接改为只读属性。

     protected string Name
     {
         get
         {
             if (Attributes.ContainsKey("name"))
             {
                 return Attributes["name"].ToString();
             }
             else
             {
                 return ExpressionHelper.GetExpressionText(Expression);
             }
         }
     }

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扩展方法也需要增加一个：

     public static MultiSelectForBuilder<TModel, TProperty> MultiSelectFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes = null)
     {
         return new MultiSelectForBuilder<TModel, TProperty>(new MultiSelectFor<TModel, TProperty>(helper, expression, htmlAttributes));
     }

进阶二：资源性视图的应用

为了更简化WriteHtml和WriteScript的写法，我们将脚本和html元素都写到一个cshtml中，这样代码看起来更简洁，也更易读，也可以实现前后端的分离。我们以日期选择控件DatePicker为例，DataPicker.cshtml内容如下：

 @{
     string id = this.ViewData.GetString("Id");
     string name = this.ViewData.GetString("Name");
     string dateFormat = this.ViewData.GetString("DateFormat");
     bool readOnly = this.ViewData.GetBool("ReadOnly");
 }
 @if (!readOnly)
 {
     <script>
         require(['jquery', 'jquery.ui', 'ready!'], function ($) {
             var options = {
                 changeYear: true,
                 changeMonth: true,
                 dateFormat: "@(dateFormat.ToLower().Replace("yyyy", "yy"))"
             };
             $("#@(id)").datepicker(options);
         });
     </script>
 }

写成这样的好处就是不要在WriteHtml和WriteScript中写一大堆的脚本、html标签的拼接程序。

再回到DataPicker控件来，这样datapicker不需要再写WriteScript方法，仅仅重写WriteHtml方法，这个方法主要工作也简化为：传入ViewData，然后调用部分视图DataPicker.cshtml：

 ViewDataDictionary vdata = new ViewDataDictionary();

 vdata["Id"] = this.Id;
 vdata["Name"] = this.Name;
 vdata["DateFormat"] = this.DateFormat;
 vdata["ReadOnly"] = (this.DisplayStatus == FieldDisplayStatus.ReadOnly);

 writer.Write(Helper.Partial("MicroLibrary.Presentation.Web.Controls.CommControls.DatePicker.Views.DatePicker", vdata));

这里需要注意的就是Helper.Partial方法，我们这里调用的是这个重载方法

 //
 // 摘要:
 //     以 HTML 编码字符串的形式呈现指定的分部视图。
 //
 // 参数:
 //   htmlHelper:
 //     此方法扩展的 HTML 帮助器实例。
 //
 //   partialViewName:
 //     要呈现的分部视图的名称。
 //
 //   viewData:
 //     用于分部视图的视图数据字典。
 //
 // 返回结果:
 //     以 HTML 编码字符串形式呈现的分部视图。
 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是按照如下的目录进行搜索的：

• ~/Views/{ControllerName}/{ViewName}.cshtml
• ~/Views/Shared/{ViewName}.cshtml
• ~/Areas/{AreaName}/Views/{ControllerName}/{ViewName}.cshtml
• ~/Areas/{AreaName}/Views/ Shared /{ViewName}.cshtml

我们可以继承VirtualPathProviderViewEngine，重写FindView和FindPartialView修改上面列表，以适应自己系统的目录搜索要求。

这种方式对于文件系统方式下的目录搜索是可以的，但是如果视图文件存放在数据库、Dll的资源中，这种方式就不好使了。这时候，应该是使用更底层的VirtualPathProvider。MSDN中的说明是这样的：VirtualPathProvider提供了一组可让 Web 应用程序从虚拟文件系统中检索资源的方法。我们这里就是通过修改它来完成从Dll的资源中获取视图文件。

在Global.asax中的写法如下：

 var embeddedViewResolver = new EmbeddedViewResolver();
 var viewTable = embeddedViewResolver.GetEmbeddedViews();
 var embeddedProvider = new EmbeddedViewVirtualPathProvider(viewTable);
 HostingEnvironment.RegisterVirtualPathProvider(embeddedProvider);

第一行，创建资源性视图的解析类，这个类初始化时，先找到控件所在的程序集。

     public class EmbeddedViewResolver : IEmbeddedViewResolver
     {
         private IList<Assembly> assemblies;

         public EmbeddedViewResolver() {
             this.assemblies = new List<Assembly>() { Assembly.GetAssembly(typeof(MvcControlBase)) };
         }
     }

第二行，解析类从控件所在程序集中找到所有的资源行视图，存放到EmbeddedViewTable中。EmbeddedViewTable相当与一个Dictionary，存放了ViewName和ViewMetaData的键值对。EmbeddedViewTable和ViewMetaData相对比较简单，不做介绍了。

         public EmbeddedViewTable GetEmbeddedViews()
         {
             if (assemblies == null || assemblies.Count == ) return null;

             var table = new EmbeddedViewTable();

             foreach (var assembly in assemblies)
             {
                 var names = GetNamesOfAssemblyResources(assembly);
                 if (names == null || names.Length == ) continue;

                 foreach (var name in names)
                 {
                     var key = name.ToLowerInvariant();

                     if (!key.Contains(".views.")) continue; //要求所有的资源性视图都应该在views目录下

                     table.AddView(name, assembly.FullName);
                 }
             }

             return table;
         }

         private string[] GetNamesOfAssemblyResources(Assembly assembly)
         {
             try
             {
                 return assembly.GetManifestResourceNames();
             }
             catch
             {
                 return new string[] { };
             }
         }

第三行，进入正题了，创建继承于VirtualPathProvider的资源性视图提供器EmbeddedViewVirtualPathProvider。重写GetFile，如果是资源性视图，去EmbeddedViewTable中获取视图，否则调用Previous.GetFile(virtualPath)继续系统缺省方式。同时也重写FileExists和GetCacheDependency方法。

     public class EmbeddedViewVirtualPathProvider : VirtualPathProvider
     {
         private readonly EmbeddedViewTable _embeddedViews;

         public EmbeddedViewVirtualPathProvider(EmbeddedViewTable embeddedViews)
         {
             MicroLibraryExceptionHelper.IsNull(embeddedViews, this.GetType().FullName, TraceLogType.Error, "embeddedViews为空");

             this._embeddedViews = embeddedViews;
         }

         private bool IsEmbeddedView(string virtualPath)
         {
             if (string.IsNullOrEmpty(virtualPath))
                 return false;

             string virtualPathAppRelative = VirtualPathUtility.ToAppRelative(virtualPath);
             if (!virtualPathAppRelative.StartsWith("~/Views/", StringComparison.InvariantCultureIgnoreCase))
                 return false;

             var fullyQualifiedViewName = virtualPathAppRelative.Substring(virtualPathAppRelative.LastIndexOf("/") + , virtualPathAppRelative.Length -  - virtualPathAppRelative.LastIndexOf("/"));

             bool isEmbedded = _embeddedViews.ContainsEmbeddedView(fullyQualifiedViewName);
             return isEmbedded;
         }

         public override bool FileExists(string virtualPath)
         {
             return (IsEmbeddedView(virtualPath) ||
                     Previous.FileExists(virtualPath));
         }

         public override VirtualFile GetFile(string virtualPath)
         {
             if (IsEmbeddedView(virtualPath))
             {
                 string virtualPathAppRelative = VirtualPathUtility.ToAppRelative(virtualPath);
                 var fullyQualifiedViewName = virtualPathAppRelative.Substring(virtualPathAppRelative.LastIndexOf("/") + , virtualPathAppRelative.Length -  - virtualPathAppRelative.LastIndexOf("/"));

                 var embeddedViewMetadata = _embeddedViews.FindEmbeddedView(fullyQualifiedViewName);
                 return new EmbeddedResourceVirtualFile(embeddedViewMetadata, virtualPath);
             }

             return Previous.GetFile(virtualPath);
         }

         public override CacheDependency GetCacheDependency(
             string virtualPath,
             IEnumerable virtualPathDependencies,
             DateTime utcStart)
         {
             return IsEmbeddedView(virtualPath)
                 ? null : Previous.GetCacheDependency(virtualPath, virtualPathDependencies, utcStart);
         }
     }

大家可能注意到GetFile返回的是EmbeddedResourceVirtualFile这个类，这个类继承自VirtualFile，主要的方法是Open，就是从应用程序集的资源中返回当前资源性视图的stream。

     public class EmbeddedResourceVirtualFile : VirtualFile
     {
         private readonly EmbeddedViewMetadata _embeddedViewMetadata;

         public EmbeddedResourceVirtualFile(EmbeddedViewMetadata embeddedViewMetadata, string virtualPath)
             : base(virtualPath)
         {
             MicroLibraryExceptionHelper.IsNull(embeddedViewMetadata, this.GetType().FullName, TraceLogType.Error, "embeddedViewMetadata 为空");

             this._embeddedViewMetadata = embeddedViewMetadata;
         }

         public override Stream Open()
         {
             Assembly assembly = GetResourceAssembly();
             return assembly == null ? null : assembly.GetManifestResourceStream(_embeddedViewMetadata.Name);
         }

         private Assembly GetResourceAssembly()
         {
             return AppDomain.CurrentDomain.GetAssemblies()
                 .Where(assembly => string.Equals(assembly.FullName, _embeddedViewMetadata.AssemblyFullName, StringComparison.InvariantCultureIgnoreCase))
                 .FirstOrDefault();
         }
     }

第四行，在系统中注册我们的EmbeddedViewVirtualPathProvider。

通过上面的四个步骤，就可以完成资源性视图的解析工作了，通过MicroLibrary.Presentation.Web.Controls.CommControls.DatePicker.Views.DatePicker来定位cshtml也得以实现。

面向云的.net core开发框架