适用于Marketters的Web表单(WFFM)带有占位符属性的Html输入标记

时间:2014-09-08 07:01:56

标签: sitecore sitecore7 web-forms-for-marketers

我要求我实施sitecore WFFM来创建表单。该页面包含带有Placeholder属性的HTML输入标记。我必须将WFFM SingleLineInput框渲染为具有占位符属性的输入标记。我该怎么办?

我知道SingleLineText dll中定义了Sitecore.Form.Web.UI.Controls类。

3 个答案:

答案 0 :(得分:6)

如果您使用的是WFFM的MVC版本,则需要按照批准的答案

中的说明添加以下内容

1-创建课程

 public interface IPlaceholderField
{
    string PlaceHolder { get; set; }
}

[ValidationProperty("Text")]
public class SingleLineText : Sitecore.Form.Web.UI.Controls.SingleLineText, IPlaceholderField
{
    [VisualCategory("Custom Properties")]
    [VisualProperty("Placeholder", 2)]
    [DefaultValue("")]
    public string PlaceHolder { get; set; }

    protected override void OnInit(EventArgs e)
    {
        // Set placeholder text, if present
        if (!string.IsNullOrEmpty(PlaceHolder))
        {
            textbox.Attributes["placeholder"] = PlaceHolder;
        }

        base.OnInit(e);
    }
}



public class ExtendedSingleLineTextField : Sitecore.Forms.Mvc.ViewModels.Fields.SingleLineTextField, IPlaceholderField
{
    [VisualCategory("Custom Properties")]
    [VisualProperty("Placeholder", 2)]
    [DefaultValue("")]
    public string PlaceHolder { get; set; }

}

2-从 / sitecore / system / Modules / Web Forms for Marketers / Settings / Field 类型/简单类型/单行文本复制单行文本到 / sitecore / system /模块/营销人员/设置/字段类型/自定义的Web表单  设置Assembly,Class和MVC Type

enter image description here

3 - 在\ Views \ Form \ EditorTemplates下创建一个新的chtml文件,名称为ExtendedSingleLineTextField.cshtml,它应与类名相同( ExtendedSingleLineTextField

@using Sitecore.Forms.Mvc.Html
@using LendLease.Web.HtmlHelpers
@model  LendLease.Extension.Sc.WFFM.ExtendedSingleLineTextField


@using (Html.BeginField())
{
    @*@Html.TextBoxFor(m => m.Value, new { placeholder = Model.PlaceHolder })*@
    @Html.ExtendedBootstrapEditor("value",Model.PlaceHolder,"",new []{""})

}

添加一个html助手,这样你就可以注入占位符我命名为BootstrapEditorHtmlHelperExtension.cs

  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.Editor(expression, new
        {
            htmlAttributes = new
            {
                @class = (string.Join(" ", classes) + " form-control" + (string.IsNullOrEmpty(str) ? string.Empty : " " + str) + (helper.ViewData.Model is SingleLineTextField ? " dangerousSymbolsCheck" : string.Empty)),
                placeholder = placeholderText,
                style = (inlineStyle ?? string.Empty)
            }
        });
    }
}

答案 1 :(得分:3)

您可以通过使用附加属性扩展SingleLineText来存储占位符的文本值来实现此目的。一旦属性到位,您将需要覆盖OnInit方法并注入占位符属性(如果恰好设置了该属性)。

public interface IPlaceholderField
{
    string PlaceholderText { get; set; }
}

以下是SingleLineText

的自定义实现
[ValidationProperty("Text")]
public class SingleLineText : Sitecore.Form.Web.UI.Controls.SingleLineText, IPlaceholderField
{
    [VisualCategory("Custom Properties")]
    [VisualProperty("Placeholder Text", 2)]
    [DefaultValue("")]
    public string PlaceholderText { get; set; }

    protected override void OnInit(EventArgs e)
    {
        // Set placeholder text, if present
        if (!String.IsNullOrEmpty(PlaceholderText))
        {
            textbox.Attributes["placeholder"] = PlaceholderText;
        }

        base.OnInit(e);
    }
}

最后,您需要在/sitecore/system/Modules/Web Forms for Marketers/Settings/Field Types/Custom/下创建一个新的字段项定义,并将程序集设置为使用上面的类。如果在“表单设计器”中选择了字段,则新的占位符属性应显示在“自定义属性”类别下。

答案 2 :(得分:0)

我使用以下代码创建自定义字段。它工作正常:))

internal class CustomType : SingleLineText
{
    [VisualProperty("Placeholder", 100)]
    [VisualCategory("Appearance")]
    public string placeholderText
    {
        get;
        set;
    }
    protected override void DoRender(System.Web.UI.HtmlTextWriter writer)
    {
        this.textbox.Attributes.Add("placeholder", this.PlaceholderText );

        base.DoRender(writer);
    }

}

然后我在 / sitecore / system / Modules / Web Forms for Marketers / Settings / Field Types / Custom 下创建了一个字段类型项目,并在项目中输入了程序集和类详细信息。

像魅力一样...... !!