sitecore - 如何在 Sitecore Web Form for Marketer 8.1 中创建自定义字段类型

Question

在我的一个 Sitecore 项目中，我必须在 WFFM 中创建一个自定义字段。 字段类型必须有两个文本框，用户可以在每个文本框中输入 5 位数字(例如 xxxxx xxxxx，因为我们在 4 个文本框中输入信用卡详细信息)。

根据引用文档“https://sdn.sitecore.net/upload/sitecore6/64/presentation_component_cookbook-a4.pdf ” 我已将以下代码打包:-

创建一个 .cs 类

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using Sitecore.Form.Web.UI.Controls;
using System.ComponentModel;
using System.ComponentModel.Design;

namespace Web.MySite.Fields
{
    [Designer("System.Windows.Forms.Design.ParentControlDesigner, System.Design", typeof(IDesigner))]
    public class SocialSecurityNumber : SingleLineText
    {

        private static readonly string baseCssClassName = "scfSingleLineTextBorder";

        protected TextBox firstPart;protected TextBox lastPart;

        public SocialSecurityNumber() : this(HtmlTextWriterTag.Div)
        {
            firstPart = new TextBox();
            lastPart = new TextBox();
        }

        public SocialSecurityNumber(HtmlTextWriterTag tag) : base(tag)

        {
            this.CssClass = baseCssClassName;
        }

        protected override void OnInit(EventArgs e)
        {
            SetCssClasses();
            SetTextBoxeWidths();
            SetMaxLengths();
            SetTextBoxModes();
            AddChildControls();

            base.OnInit(e);
        }

        private void SetCssClasses()
        {
            help.CssClass = "scfSingleLineTextUsefulInfo";
            title.CssClass = "scfSingleLineTextLabel";
            generalPanel.CssClass = "scfSingleLineGeneralPanel";
        }

        private void SetTextBoxeWidths()
        {
            firstPart.Style.Add("width", "40px");

            lastPart.Style.Add("width", "50px");
        }

        private void SetMaxLengths()
        {
            firstPart.MaxLength = 3;

            lastPart.MaxLength = 4;
        }

        private void SetTextBoxModes()
        {
            firstPart.TextMode = TextBoxMode.SingleLine;

            lastPart.TextMode = TextBoxMode.SingleLine;
        }

        private void AddChildControls()
        {
            Controls.AddAt(0, generalPanel);
            Controls.AddAt(0, title);

            generalPanel.Controls.Add(firstPart);


            generalPanel.Controls.Add(lastPart);
            generalPanel.Controls.Add(help);
        }


    }

    public class SocialSecurityNumberModel : Sitecore.Forms.Mvc.ViewModels.Fields.SingleLineTextField
    {


    }


}

然后我创建了一个 BootstrapEditorHtmlHelperExtension.CS 并创建了一个 .CSHTML:-

using Sitecore.Forms.Mvc.Interfaces;
using Sitecore.Forms.Mvc.ViewModels.Fields;
using System.Web.Mvc;
using System.Web.Mvc.Html;

namespace Web.MySite.Extensions
{
    public static class BootstrapEditorHtmlHelperExtension
    {
        public static MvcHtmlString ExtendedBootstrapEditor(this HtmlHelper helper, string expression, string placeholderText, string inlineStyle, string[] classes)
        {
            var str = string.Empty;
            var viewModel = helper.ViewData.Model as IViewModel;
            if (viewModel != null)
            {
                var styleSettings = viewModel as IStyleSettings;
                if (styleSettings != null)
                {
                    str = styleSettings.CssClass;
                }
                if (string.IsNullOrEmpty(placeholderText))
                {
                    placeholderText = viewModel.Title;
                }
            }

            return helper.TextBox(expression,null, new
            {

                    @class = (string.Join(" ", classes) + " form-control col-lg-2" + (string.IsNullOrEmpty(str) ? string.Empty : " " + str) + (helper.ViewData.Model is SingleLineTextField ? " dangerousSymbolsCheck" : string.Empty)),
                    placeholder = placeholderText,
                    style = (inlineStyle ?? string.Empty)

            });
        }



    }



}

SocialSecurityNumberModel.CSHTML

@using Sitecore.Forms.Mvc.Html
@using Web.MySite.Extensions

@model  Web.MySite.Fields.SocialSecurityNumberModel

@using (Html.BeginField())
{
 @Html.ExtendedBootstrapEditor("value", " ", "width:50%", new[] { "" }) 
 @Html.ExtendedBootstrapEditor("value", " ", "width:40%", new[] { "" }) 

}

之后，我在 Sitecore 中创建了一个自定义字段并给出了 Below dll ref。在

Assembly 
Sitecore.Forms.Custom.dll

Class
Sitecore.Form.Web.UI.Controls.SingleLineText

MVC Type 
Web.MySite.Fields.SocialSecurityNumberModel,Web.MySite

我得到了两个文本框，但两者的 ID 相同。

ID=wffm1755f6ce241245b7a1183288954ce0e7_Sections_0__Fields_0__value

Answer 1

您不必创建 ASCX 文件来为 WFFM 创建自定义字段 首先，您需要创建一个类型的项目:

/sitecore/templates/Web Forms for Marketers/Field Type

如果您将 WFFM 与 MVC 结合使用，则需要填写 MVC 类型字段。

您可以使用 Dot Peek 查看其他 Sitecore Wffm 字段是如何构建的。

你需要像这个例子一样创建你自己的类:

https://sitecorecorner.com/tag/wffm-custom-field/

http://elenazlateva.blogspot.ro/2012/09/custom-field-type-for-sitecore-web.html

https://divamatrix.wordpress.com/2011/12/20/wffm-custom-field-type-made-easy/