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 == 0) return null;

            var table = new EmbeddedViewTable();

            foreach (var assembly in assemblies)
            {
                var names = GetNamesOfAssemblyResources(assembly);
                if (names == null || names.Length == 0) 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("/") + 1, virtualPathAppRelative.Length - 1 - 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("/") + 1, virtualPathAppRelative.Length - 1 - 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开发框架