如何Sitecore的Web窗体创建自定义字段类型的营销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的/模板/ Web窗体对于营销/字段类型

如果使用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/