Question

我正在使用WFFM和Sitecore-8.2-Update 4版本。所以我需要更改WFFM webforms的HTML结构。

让我分享一下我的案例。

我们有名字部分，其中包含名字和姓氏。

IN WFFM表格设计师我创建了如下

然后由WFFM生成如下的Html。

＆＃13;

<div class="required-field  form-group">
    <input id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_0__Id" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[0].Id" type="hidden" value="{6DAF46AC-CEE6-4CB2-9391-40ACC39CCE74}" />
    <label class="control-label" for="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_0__Value">LastName</label>
    <input class=" form-control text-box single-line" data-val="true" data-val-length="The LastName field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256" data-val-required="This field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_0__Value" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[0].Value" placeholder="" style="" type="text" value="" /><span class="field-validation-valid help-block" data-valmsg-for="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[0].Value" data-valmsg-replace="true">
</span>
</div>
<div class="required-field  form-group">
    <input id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_1__Id" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[1].Id" type="hidden" value="{FF409749-4574-4D8C-971D-1A2D66B82FDA}" />
    <label class="control-label" for="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_1__Value">FirstName</label>
    <input class=" form-control text-box single-line" data-val="true" data-val-length="The FirstName field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256" data-val-required="This field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_1__Value" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[1].Value" placeholder="" style="" type="text" value="" /><span class="field-validation-valid help-block" data-valmsg-for="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[1].Value" data-valmsg-replace="true">
</span>
</div>

＆＃13;

但我需要一个像下面一样的Html

＆＃13;

<div class="required-field  form-group has-feedback">
  <span>
    <input class=" form-control text-box single-line" data-val="true" data-val-length="The First field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256" data-val-required="This field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_1__Value" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[1].Value" placeholder="" style="" type="text" value="">
    <input id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_1__Id" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[1].Id" type="hidden" value="{FF409749-4574-4D8C-971D-1A2D66B82FDA}">
    <label class="control-label" for="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_1__Value">First</label>
    <span class="field-validation-valid help-block" data-valmsg-for="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[1].Value" data-valmsg-replace="true">
    </span>
  </span>
  <span>
    <input class=" form-control text-box single-line" data-val="true" data-val-length="The Last field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256" data-val-required="This field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_0__Value" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[0].Value" placeholder="" style="" type="text" value="">
    <input id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_0__Id" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[0].Id" type="hidden" value="{6DAF46AC-CEE6-4CB2-9391-40ACC39CCE74}">
    <label class="control-label" for="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_0__Value">Last</label>
    <span class="field-validation-valid help-block" data-valmsg-for="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[0].Value" data-valmsg-replace="true">
    </span>
  </span>
</div>

＆＃13;

我遵循的步骤更改了WFFM的html结构。

WFFM使用Sitecore.Forms.Mvc.Controllers.FormController及其使用默认索引操作。通过它，它在根网站上使用〜\ Views \ Forms \ Index.cshtml。

它基本上使用Editor for template。

所以在我的情况下，我需要找出名称部分，需要更改我的HTML结构。根据我的发现，SectionViewModel.cshtml负责渲染所有部分。

我创建了一种方法来检查当前部分是否需要自定义。

@if （Renderer.IsCustomisedSection（型号））

在我的完整SectionViewModel视图文件下面。（〜\视图\表格\ EditorTemplates \ SectionViewModel.cshtml）

＆＃13;

@using Sitecore.Forms.Mvc.Html
@using AAA.Foundation.HtmlHelper.WffmRenderer;
@model Sitecore.Forms.Mvc.ViewModels.SectionViewModel

<!--Render customised action-->
@if (Renderer.IsCustomisedSection(Model))
{
    var customisedFieldHtml = Html.EditorFor(x => Model.Fields);
    @Html.Raw(Renderer.RenderCustomisedFieldSection(customisedFieldHtml))
}
else
    <!--Render customised action Ends-->
if (Model.ShowTitle && !string.IsNullOrEmpty(Model.Title))
{
    <fieldset class="@Model.CssClass">
        <legend>@Html.BootstrapText("Title")</legend>
        @if (Model.ShowInformation && !string.IsNullOrEmpty(Model.Information))
        {
            <p>@Html.BootstrapText("Information")</p>
        }

        <div class="row">
            <div class="col-md-12">
                @Html.EditorFor(x => Model.Fields)
            </div>
        </div>
    </fieldset>
}

else
{
    @Html.EditorFor(x => Model.Fields)
}

＆＃13;

这是我可以按模型标题捕获名称部分的方法。我的渲染器类文件

    public static bool IsCustomisedSection(Sitecore.Forms.Mvc.ViewModels.SectionViewModel model) {
        bool result = false;

        // Check the model needs to customised                 
        if (model.Title == "Name") { // For Ex:
            result = true;
        }

        return result;
    }

然后我将调用各自的自定义html部分，如下所示。

var customisedFieldHtml = Html.EditorFor（x =＆gt; Model.Fields）; @ Html.Raw（Renderer.RenderCustomisedFieldSection（customisedFieldHtml））

使用＆＃34; Html.EditorFor（x =＆gt; Model.Fields）＆＃34;这个我可以获得默认生成的HTML。然后我将它传递给我的自定义渲染方法。这将确定哪些网站和哪些部分需要应用。

    public static HtmlString RenderCustomisedFieldSection(HtmlString 
    customisedSectionHtml)         
    {
    string caseValue = "SiteName-SectionName";        
    HtmlString result = new HtmlString(string.Empty);        
    switch (caseValue)          {

    case "SiteName-SectionName":
    result = SiteName_Renderer.NameSection(customisedSectionHtml);
    break;
    }    
    return result;    
    }

我的最终自定义html渲染方法如下所示。我正在使用html agility pack重新构建htmls。

 public static HtmlString NameSection(HtmlString rawHtml)
    {

        HtmlNode customisedRoot = null;
        HtmlDocument doc = new HtmlDocument();
        doc.LoadHtml(rawHtml.ToString());

        // Find each form group elements
        var groupHtml = doc.DocumentNode
            .Descendants("div")
            .Where(d =>
               d.Attributes.Contains("class")
               &&
               d.Attributes["class"].Value.Contains("form-group")
            );

        if (groupHtml.Count() > 0)
        {
            // Initialise root
            customisedRoot = groupHtml.First().Clone();
            customisedRoot.RemoveAllChildren();

            // Customised the html
            foreach (HtmlNode htmlNode in groupHtml)
            {
                HtmlDocument innerRootDoc = new HtmlDocument();
                HtmlNode innerRoot = innerRootDoc.CreateElement("span");


                var helpBlock = htmlNode.Descendants("span").Where(d =>
                  d.Attributes.Contains("class")
                  &&
                  d.Attributes["class"].Value.Contains("help-block")
               );
                innerRoot.PrependChild(helpBlock.FirstOrDefault());


                var label = htmlNode.Descendants("label");
                innerRoot.PrependChild(label.FirstOrDefault());


                var inputs = htmlNode.Descendants("input");
                foreach (HtmlNode inputsNode in inputs)
                {
                    innerRoot.PrependChild(inputsNode);

                }

                customisedRoot.PrependChild(innerRoot);
            }
        }

 return (customisedRoot!=null)?new HtmlString(customisedRoot.OuterHtml):          new HtmlString(String.Empty);
 }

通过这种方法，我可以自定义WFFM Web表单html。

以下是我在html更改后测试过的。

验证是否在网站上有效。
如果我提交表格，将在表格报告部分提供。下载excel是否存在提交的价值。

所有上述情况或通过。

我的查询在上面的方法将破坏任何其他功能。

Sitecore WFFM-Webforms定制html结构

0 个答案: