是否可以用数据填充 Episerver.Forms 字段

Question

我将 Episerver 10 与 Episerver.Forms 插件一起使用。我创建了一个包含多个字段的表单。我想知道是否有一个选项可以用数据预填充这些字段。

示例：电子邮件地址字段。如果用户已登录，我希望此字段将来自用户个人资料的电子邮件设置为一个值。

我为电子邮件创建了自己的自定义字段，并尝试使用 SetDefaultValues 方法，但显然它的用途不同。

编辑：

我的自定义表单域：

public class PostalCodeFormField : TextboxElementBlock
{
    public override void SetDefaultValues(ContentType contentType)
    {
        base.SetDefaultValues(contentType);
        base.PredefinedValue = "Hello world";
    }
}

该字段的模板：

@model My.Valid.Namespace.PostalCodeFormField
<div class="Form__Element FormTextbox" data-epiforms-element-name="@Model.FormElement.ElementName">
    <label for="@Model.FormElement.Guid">
        My label
    </label>
    <p>@Model.PredefinedValue</p>
    <input type="text" name="@Model.FormElement.ElementName" class="FormTextbox__Input" id="@Model.FormElement.Guid" value="@Model.PredefinedValue" />
    <span data-epiforms-linked-name="@Model.FormElement.ElementName" class="Form__Element__ValidationError" style="display: none;">*</span>
</div>

事情是 @Model.PredefinedValue 是空的，就像 SetDefaultValues 从未被调用过

Answer 1

是的，但不是开箱即用的。我们通常通过创建自定义元素来解决这个问题。

David Knipe 就此写了一篇精彩的博客，https://www.david-tec.com/2016/01/building-out-a-custom-form-element-with-the-new-episerver-forms/

检查表单模型

public override void SetDefaultValues(ContentType contentType)
{
    base.SetDefaultValues(contentType);

    // override
    base.PredefinedValue = "Hello world";
}

Answer 2

如果您不想创建自定义元素（但我认为这是最好的解决方案），您可以更改元素的视图。它应该位于：\modules\_protected\EPiServer.Forms\Views\ElementBlocks

对于您的电子邮件示例，我会将 TextboxElementBlock.ascx 更改为如下内容：

<%@ import namespace="System.Web.Mvc" %>
<%@ import namespace="EPiServer.Web.Mvc.Html" %>
<%@ import namespace="EPiServer.Forms.Core.Models" %>
<%@ import namespace="EPiServer.Forms.Helpers" %>
<%@ import namespace="EPiServer.Forms.Implementation.Elements" %>
<%@ Import Namespace="EPiServer.Personalization" %>
<%@ control language="C#" inherits="ViewUserControl<TextboxElementBlock>" %>

<%
    var formElement = Model.FormElement;
    var labelText = Model.Label;
    var isEmailField = formElement.Validators.Any(x => x is EPiServer.Forms.Implementation.Validation.EmailValidator);
    var defaultValue = Model.GetDefaultValue();
    if (isEmailField)
    {
        defaultValue = EPiServerProfile.Current.Email;
    }
%>

<div class="Form__Element FormTextbox <%: Model.GetValidationCssClasses() %>" data-epiforms-element-name="<%: formElement.ElementName %>">
    <label for="<%: formElement.Guid %>" class="Form__Element__Caption"><%: labelText %></label>
    <input name="<%: formElement.ElementName %>" id="<%: formElement.Guid %>" type="text" class="FormTextbox__Input"
        placeholder="<%: Model.PlaceHolder %>" value="<%: defaultValue %>" <%: Html.Raw(Model.AttributesString) %> />

    <span data-epiforms-linked-name="<%: formElement.ElementName %>" class="Form__Element__ValidationError" style="display: none;">*</span>
    <%= Model.RenderDataList() %>
</div>

编辑：

没看到你编辑问题。从 SetDefaultValues 中的 base.PredefinedValue 中删除 "base"，它应该可以工作。

public class PostalCodeFormField : TextboxElementBlock
{
    public override void SetDefaultValues(ContentType contentType)
    {
        base.SetDefaultValues(contentType);
        PredefinedValue = "Hello world";
    }
}

要设置“动态值，您可以将新的属性添加到 class（在此处获取当前用户的电子邮件地址）：

  public virtual string UserEmail => EPiServerProfile.Current != null ? EPiServerProfile.Current.Email : string.Empty;

并更新视图中的输入：

<input type="text" name="@Model.FormElement.ElementName" class="FormTextbox__Input" id="@Model.FormElement.Guid" value="@Model.UserEmail" />

Answer 3

新的 Episerver Forms Autofill API 可以帮助您完成这项工作。

是否可以用数据填充 Episerver.Forms 字段

Is it possible to populate Episerver.Forms field with data

episerver

episerver-forms