Orchard：生成一个自定义字段类型

在Orchard中定义新的content types时可以使用字段，现在Orchard只内置了一个文本类型字段，在实际应用中，我们肯定会遇到添加自己的字段类型，然后在新的content types上使用。这篇文章将教给大家的是在http://orcharddatetimefield.codeplex.com中的自定义日期时间数据类型。如果对如何生成一个模块不清楚，可以先看看本系列的前几篇文章。

目标

这个练习做完之后，我们将新增一个新的字段类型，使用界面如下图所示：有一个日期和时间编辑器

生成一个模块

codegen module CustomFields /IncludeInSolution:true

现在在Modules目录下有一个新的目录：CustomFields,更改module.txt:

View Code

Name: CustomFields
AntiForgery: enabled
Author: Me
Website: http://orcharddatetimefield.codeplex.com
Version: 0.6.1
OrchardVersion: 0.8.0
Description: A bunch of custom fields for use in your custom content types.
Features:
    CustomFields:
        Description: Custom fields for Orchard.
        Category: Fields
    DateTimeField:
        Description: A date and time field with a friendly UI.
        Category: Fields
        Dependencies: CustomFields, Orchard.jQuery, Common, Settings

这里我们定义了两个features，因为这个模块最后包括多个字段，我们想要区分这个模块的默认功能和日期字段功能，这个也正好可以演示一下分类和依赖的使用。

生成字段

在CustomFields目录下生成目录Fields，添加文件DateTimeField.cs:

View Code

using System;
using System.Globalization;
using Orchard.ContentManagement;
using Orchard.ContentManagement.FieldStorage;
using Orchard.Environment.Extensions;

namespace CustomFields.DateTimeField.Fields
{
    [OrchardFeature("DateTimeField")]
    public class DateTimeField : ContentField
    {

        public DateTime? DateTime
        {
            get
            {
                var value = Storage.Get<string>();
                DateTime parsedDateTime;

                if (System.DateTime.TryParse(value, CultureInfo.InvariantCulture,
                    DateTimeStyles.AdjustToUniversal, out parsedDateTime))
                {

                    return parsedDateTime;
                }

                return null;
            }

            set
            {
                Storage.Set(value == null ?
                    String.Empty :
                    value.Value.ToString(CultureInfo.InvariantCulture));
            }
        }
    }
}

这个自定义字段DateTimeField是从ContentField继承下来的，ContentField提供一些字段值存储等服务。这个字段将存储为strings。

生成一个view model

生成一个或多个view models虽然不是强制的，但是一个好的实践。View model将被用来封装model用于展现而用的模型。在一个新的ViewModels目录下添加文件DateTimeFieldViewModel.cs:

View Code

namespace CustomFields.DateTimeField.ViewModels
{

    public class DateTimeFieldViewModel
    {

        public string Name { get; set; }

        public string Date { get; set; }
        public string Time { get; set; }

        public bool ShowDate { get; set; }
        public bool ShowTime { get; set; }
    }
}

生成字段设置

Create a Settings folder and add the following DateTimeFieldSettings.cs file to it:

View Code

namespace CustomFields.DateTimeField.Settings
{

    public enum DateTimeFieldDisplays
    {
        DateAndTime,
        DateOnly,
        TimeOnly
    }

    public class DateTimeFieldSettings
    {
        public DateTimeFieldDisplays Display { get; set; }
    }
}

这里我们定义了一个设类，这个类是个很简单的类，Display是一个枚举值

写一个driver

在Drivers目录下添加文件DateTimeFieldDriver.cs：

View Code

using System;
using CustomFields.DateTimeField.ViewModels;
using JetBrains.Annotations;
using Orchard;
using Orchard.ContentManagement;
using Orchard.ContentManagement.Drivers;
using CustomFields.DateTimeField.Settings;
using Orchard.Localization;

namespace CustomFields.DateTimeField.Drivers
{
    [UsedImplicitly]
    public class DateTimeFieldDriver : ContentFieldDriver<Fields.DateTimeField>
    {
        public IOrchardServices Services { get; set; }

        // EditorTemplates/Fields/Custom.DateTime.cshtml
        private const string TemplateName = "Fields/Custom.DateTime";

        public DateTimeFieldDriver(IOrchardServices services)
        {
            Services = services;
            T = NullLocalizer.Instance;
        }

        public Localizer T { get; set; }

        private static string GetPrefix(ContentField field, ContentPart part)
        {
            // handles spaces in field names
            return (part.PartDefinition.Name + "." + field.Name)
                   .Replace(" ", "_");
        }

        protected override DriverResult Display(
            ContentPart part, Fields.DateTimeField field,
            string displayType, dynamic shapeHelper)
        {

            var settings = field.PartFieldDefinition.Settings
                                .GetModel<DateTimeFieldSettings>();
            var value = field.DateTime;

            return ContentShape("Fields_Custom_DateTime", // key in Shape Table
                // this is the actual Shape which will be resolved
                // (Fields/Custom.DateTime.cshtml)
                    s =>
                    s.Name(field.Name)
                     .Date(value.HasValue ?
                         value.Value.ToLocalTime().ToShortDateString() :
                         String.Empty)
                     .Time(value.HasValue ?
                         value.Value.ToLocalTime().ToShortTimeString() :
                         String.Empty)
                     .ShowDate(
                         settings.Display == DateTimeFieldDisplays.DateAndTime ||
                         settings.Display == DateTimeFieldDisplays.DateOnly)
                     .ShowTime(
                         settings.Display == DateTimeFieldDisplays.DateAndTime ||
                         settings.Display == DateTimeFieldDisplays.TimeOnly)
                );
        }

        protected override DriverResult Editor(ContentPart part,
                                               Fields.DateTimeField field,
                                               dynamic shapeHelper)
        {

            var settings = field.PartFieldDefinition.Settings
                                .GetModel<DateTimeFieldSettings>();
            var value = field.DateTime;

            if (value.HasValue)
            {
                value = value.Value.ToLocalTime();
            }

            var viewModel = new DateTimeFieldViewModel
            {
                Name = field.Name,
                Date = value.HasValue ?
                       value.Value.ToLocalTime().ToShortDateString() : "",
                Time = value.HasValue ?
                       value.Value.ToLocalTime().ToShortTimeString() : "",
                ShowDate =
                    settings.Display == DateTimeFieldDisplays.DateAndTime ||
                    settings.Display == DateTimeFieldDisplays.DateOnly,
                ShowTime =
                    settings.Display == DateTimeFieldDisplays.DateAndTime ||
                    settings.Display == DateTimeFieldDisplays.TimeOnly

            };

            return ContentShape("Fields_Custom_DateTime_Edit",
                () => shapeHelper.EditorTemplate(
                          TemplateName: TemplateName,
                          Model: viewModel,
                          Prefix: GetPrefix(field, part)));
        }

        protected override DriverResult Editor(ContentPart part,
                                               Fields.DateTimeField field,
                                               IUpdateModel updater,
                                               dynamic shapeHelper)
        {

            var viewModel = new DateTimeFieldViewModel();

            if (updater.TryUpdateModel(viewModel,
                                       GetPrefix(field, part), null, null))
            {
                DateTime value;

                var settings = field.PartFieldDefinition.Settings
                                    .GetModel<DateTimeFieldSettings>();
                if (settings.Display == DateTimeFieldDisplays.DateOnly)
                {
                    viewModel.Time = DateTime.Now.ToShortTimeString();
                }

                if (settings.Display == DateTimeFieldDisplays.TimeOnly)
                {
                    viewModel.Date = DateTime.Now.ToShortDateString();
                }

                if (DateTime.TryParse(
                        viewModel.Date + " " + viewModel.Time, out value))
                {
                    field.DateTime = value.ToUniversalTime();
                }
                else
                {
                    updater.AddModelError(GetPrefix(field, part),
                                          T("{0} is an invalid date and time",
                                          field.Name));
                    field.DateTime = null;
                }
            }

            return Editor(part, field, shapeHelper);
        }
    }
}

DateTimeFieldDriver 从 ContentFieldDriver 继承下来。

一开始通过依赖注入获取localizer 依赖对象，以便我们能够通过代码获取本地化字符。静态的方法GetPrefix是一个用来定义字段类型示例在数据库中唯一列名的前缀。

Display和Editor获取字段的设置和值来构建shapes。

写模板

在Views目录下生成一个Fields和EditorTemplates目录，然后在EditorTemplates下生成一个Fields目录。

在Views/Fields下新增文件Custom.DateTime.cshtml:

View Code

<p class="text-field"><span class="name">@Model.Name:</span> 
    @if(Model.ShowDate) { <text>@Model.Date</text> } 
    @if(Model.ShowTime) { <text>@Model.Time</text> }
</p>

在Views/EditorTemplates/Fields 下生成文件Custom.DateTime.cshtml:

View Code

@model CustomFields.DateTimeField.ViewModels.DateTimeFieldViewModel

@{
Style.Include("datetime.css");
Style.Require("jQueryUI_DatePicker");
Style.Require("jQueryUtils_TimePicker");
Style.Require("jQueryUI_Orchard");

Script.Require("jQuery");
Script.Require("jQueryUtils");
Script.Require("jQueryUI_Core");
Script.Require("jQueryUI_Widget");
Script.Require("jQueryUI_DatePicker");
Script.Require("jQueryUtils_TimePicker");
}

<fieldset>
  <label for="@Html.FieldIdFor(m => Model.Date)">@Model.Name</label>

  @if ( Model.ShowDate ) {
  <label class="forpicker"
    for="@Html.FieldIdFor(m => Model.Date)">@T("Date")</label>
  <span class="date">@Html.EditorFor(m => m.Date)</span>
  }

  @if ( Model.ShowTime ) {
  <label class="forpicker"
    for="@Html.FieldIdFor(m => Model.Time)">@T("Time")</label>
  <span class="time">@Html.EditorFor(m => m.Time)</span>
  }
  @if(Model.ShowDate) { <text>@Html.ValidationMessageFor(m=>m.Date)</text> }
  @if(Model.ShowTime) { <text>@Html.ValidationMessageFor(m=>m.Time)</text> }
</fieldset>

@using(Script.Foot()) {
<script type="text/javascript">
    $(function () {
        $("#@Html.FieldIdFor(m => Model.Date)").datepicker();
        $("#@Html.FieldIdFor(m => Model.Time)").timepickr();
    });
</script>
}

为了指定显示顺序和位置，在项目根目录下增加文件Placement.info:

View Code

<Placement>
  <Place Fields_Custom_DateTime_Edit="Content:2.5"/>
  <Place Fields_Custom_DateTime="Content:2.5"/>
</Placement>

管理字段设置

到现在还没有完全做完，我们还需要关心如何管理和持久化字段的设置，在Settings目录下增加文件DateTimeFieldEditorEvents.cs:

View Code

using System.Collections.Generic;
using Orchard.ContentManagement;
using Orchard.ContentManagement.MetaData;
using Orchard.ContentManagement.MetaData.Builders;
using Orchard.ContentManagement.MetaData.Models;
using Orchard.ContentManagement.ViewModels;

namespace CustomFields.DateTimeField.Settings
{
    public class DateTimeFieldEditorEvents : ContentDefinitionEditorEventsBase
    {

        public override IEnumerable<TemplateViewModel>
          PartFieldEditor(ContentPartFieldDefinition definition)
        {
            if (definition.FieldDefinition.Name == "DateTimeField")
            {
                var model = definition.Settings.GetModel<DateTimeFieldSettings>();
                yield return DefinitionTemplate(model);
            }
        }

        public override IEnumerable<TemplateViewModel> PartFieldEditorUpdate(
          ContentPartFieldDefinitionBuilder builder, IUpdateModel updateModel)
        {
            var model = new DateTimeFieldSettings();
            if (updateModel.TryUpdateModel(
              model, "DateTimeFieldSettings", null, null))
            {
                builder.WithSetting("DateTimeFieldSettings.Display",
                                    model.Display.ToString());
            }

            yield return DefinitionTemplate(model);
        }
    }
}

这个类似与一个driver，但是是field settings。第一个方法获得设置并且决定展现的模板，第二个方法从提交窗口中更新模型值。

生成目录Views\DefinitionTemplates,添加字段的编辑摸板文件DateTimeFieldSettings.cshtml：

View Code

@model CustomFields.DateTimeField.Settings.DateTimeFieldSettings
@using CustomFields.DateTimeField.Settings;

<fieldset>
    <label for="@Html.FieldIdFor(m => m.Display)"
      class="forcheckbox">@T("Display options")</label>  
    <select id="@Html.FieldIdFor(m => m.Display)"
      name="@Html.FieldNameFor(m => m.Display)">
        @Html.SelectOption(DateTimeFieldDisplays.DateAndTime, 
          Model.Display == DateTimeFieldDisplays.DateAndTime,
          T("Date and time").ToString())
        @Html.SelectOption(DateTimeFieldDisplays.DateOnly,
          Model.Display == DateTimeFieldDisplays.DateOnly,
          T("Date only").ToString())
        @Html.SelectOption(DateTimeFieldDisplays.TimeOnly,
          Model.Display == DateTimeFieldDisplays.TimeOnly,
          T("Time only").ToString())
    </select> 

    @Html.ValidationMessageFor(m => m.Display)
        
</fieldset>

更新项目文件

打开项目文件CustomFields.csproj:

View Code

<Compile Include="Drivers\DateTimeFieldDriver.cs" />

<Compile Include="Fields\DateTimeField.cs" />

<Compile Include="Settings\DateTimeFieldEditorEvents.cs" />

<Compile Include="Settings\DateTimeFieldSettings.cs" />

<Compile Include="ViewModels\DateTimeFieldViewModel.cs" />

添加样式

Create a Styles directory and create the following datetime.css:

View Code

html.dyn label.forpicker {
    display:none;
}

html.dyn input.hinted {
    color:#ccc;
    font-style:italic;
}
.date input{
    width:10em;
}
.time input {
    width:6em;
}