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:

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




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>
}

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;
}

使用字段

为了能够使用心得字段，首先必须打开Orchard.ContentTypes功能，还需要打开DateTimeField 功能。









参考：Writing a content field http://orcharddatetimefield.codeplex.com/

推荐：你可能需要的在线电子书



我的新浪围脖： http://t.sina.com.cn/openexpressapp

欢迎转载，转载请注明：转载自周金根 [ http://zhoujg.cnblogs.com/ ]