如何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/