Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Skowronek 29 posts 105 karma points
    Jan 17, 2014 @ 02:35
    Skowronek
    0

    Customizing Script.cshtml to remove inline loading of contourform.js

    Based on the custom markup, "Customizing for a specific form" example, we'd like to load our own Script.cshtml to allow us to remove the reference the contourform.js and load it at the bottom of our page, above the closing </body> tag (following best practices). As we would prefer to load jquery after all the markup has loaded, the placement of this script breaks our pages where a form is being loaded before jquery is loaded. We're prefer not to overwrite the Script.cshtml, but if required, we may have to.

    Thanks.

  • Comment author was deleted

    Jan 20, 2014 @ 09:39

    Yeah you can customize :) if you send the adjustments I could add it as a default option...

  • Dan Okkels Brendstrup 101 posts 197 karma points
    Mar 12, 2014 @ 15:01
    Dan Okkels Brendstrup
    0

    @Skowronek, did you have any luck with this? I've done the same thing to disable the loading of contourform.js in Script.cshtml and loading it at the bottom of the page after jQuery, which works fine. Except for the inline script chunk with all the PopulateFieldValues-stuff that Contour outputs before the form, and which fails when jQuery hasn't loaded yet. Have you had any luck working around that?

    I hate having built a whole site around best-practices and loading all scripts at the bottom of the page, and then having to throw all of that overboard as soon as Contour is installed.

  • Dan Okkels Brendstrup 101 posts 197 karma points
    Mar 12, 2014 @ 15:04
  • Kris Janssen 210 posts 569 karma points c-trib
    Jul 02, 2014 @ 10:40
    Kris Janssen
    0

    Anyone have an update on this? This thing is biting me in the ass as well...

  • Skowronek 29 posts 105 karma points
    Jul 02, 2014 @ 18:04
    Skowronek
    0

    We were able to accomplish this by using our own Contour user controls that were modified to do what we needed with a bunch of onload overrides and such. Nasty hacks but the only way to do it with .NET controls method.

    Here are the basics, and yes, we had to do all of this to get it to work right with Bootstrap.

    1. Create your own render form control and place it in your Umbraco controls folder (wherever you have it)
    2. Set the control to the Controur form in the back office to use your new control rather than the default one provided by Umbraco
    3. Win!

    ContourRenderForm.ascx

    <%@ control language="C#" autoeventwireup="true" codebehind="ContourRenderForm.ascx.cs" inherits="Web.UserControls.ContourRenderForm" %>
    <%@ register assembly="Umbraco.Forms.Core" namespace="Umbraco.Forms.Core.Controls.Validation" tagprefix="uform" %>
    <asp:placeholder id="ph_noFormWarning" runat="server" visible="false">
        <div style="border: 2px solid red; padding: 10px; text-align: center; color: Red;">
            Umbraco Contour will only work properly if placed inside a &lt;form runat="server"&gt; tag.
        </div>
    </asp:placeholder>
    <asp:placeholder id="ph_styles" runat="server" />
    <asp:placeholder id="placeholder" runat="server" visible="true">
        <asp:literal id="pageCssClass" runat="server" visible="false" />
        <div id="contour" runat="server" clientidmode="static" class="container ">
            <asp:literal id="pageName" runat="server" />
            <asp:validationsummary id="validationsummary" runat="server" enabled="false" cssclass="contourValidationSummary" />
            <asp:repeater id="rpFieldsets" runat="server" clientidmode="Static" onprerender="rpFieldsets_PreRender" onitemdatabound="rpFieldsets_ItemDataBound">
                <itemtemplate>
                    <asp:literal id="cssClass" runat="server" visible="false" />
                    <div id="ClearFix" runat="server" clientidmode="predictable" class="clearfix" visible="false"></div>
                    <fieldset id="contourFieldset" runat="server" clientidmode="predictable" class="contourFieldSet col-xs-12 ">
                        <asp:literal id="legend" runat="server" />
                        <asp:repeater id="rpFields" runat="server" clientidmode="Predictable" onprerender="rpFields_PreRender" onitemdatabound="rpFields_ItemDataBound">
                            <itemtemplate>
                                <asp:literal id="cssClass" runat="server" visible="false" />
                                <div id="contourField" runat="server" clientidmode="predictable" class='form-group contourField {0}'>
                                    <!-- Our label -->
                                    <asp:label id="label" cssclass="fieldLabel control-label" runat="server" />
                                    <!-- The data entry control -->
                                    <asp:placeholder id="placeholder" runat="server" />
                                    <!-- Our Tooltip -->
                                    <asp:literal id="tooltip" runat="server" />
                                    <!-- Validation -->
                                    <uform:requiredvalidator id="mandatory" runat="server" errormessage="mandatory" visible="false" display="Dynamic" cssclass="contourError" />
                                    <uform:regexvalidator id="regex" errormessage="The field could not be validated" runat="server" visible="false" display="Dynamic" cssclass="contourError" />
                                    <br style="clear: both;" />
                                </div>
                            </itemtemplate>
                        </asp:repeater>
                    </fieldset>
                </itemtemplate>
            </asp:repeater>
            <div class="contourNavigation col-xs-12 col-lg-8">
                <div class="form-group">
                    <asp:button id="b_prev" runat="server" onclick="prevPage" cssclass="contourButton contourPrev" text="Previous" />
                    <asp:button id="b_next" runat="server" onclick="nextPage" cssclass="contourButton contourNext" text="Next" />
                </div>
            </div>
        </div>
    </asp:placeholder>
    <asp:placeholder id="ph_messageOnSubmit" runat="server" visible="false">
        <p class="contourMessageOnSubmit">
            <asp:literal id="lt_message" runat="server" />
        </p>
    </asp:placeholder>
    

    ContourRenderForm.ascx.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
    
    namespace Web.UserControls
    {
        public partial class ContourRenderForm : Umbraco.Forms.UI.Usercontrols.RenderForm
        {
            public new bool AllowEditing
            {
                get
                {
                    return base.AllowEditing;
                }
                set
                {
                    base.AllowEditing = value;
                }
            }
    
            public new string FormGuid
            {
                get
                {
                    return base.FormGuid;
                }
                set
                {
                    base.FormGuid = value;
                }
            }
            public new string NextButtonText
            {
                get
                {
                    return base.NextButtonText;
                }
                set
                {
                    base.NextButtonText = value;
                }
            }
            public new string PageNameTag
            {
                get
                {
                    return base.PageNameTag;
                }
                set
                {
                    base.PageNameTag = value;
                }
            }
            public new string PreviousButtonText
            {
                get
                {
                    return base.PreviousButtonText;
                }
                set
                {
                    base.PreviousButtonText = value;
                }
            }
            public new string SubmitButtonText
            {
                get
                {
                    return base.SubmitButtonText;
                }
                set
                {
                    base.SubmitButtonText = value;
                }
            }
    
            protected override void OnInit(EventArgs e)
            {
                Page.Master.ViewStateMode = System.Web.UI.ViewStateMode.Enabled;
                base.OnInit(e);
            }
    
            protected override void OnLoad(EventArgs e)
            {
                base.OnLoad(e);
    
                contour.Attributes["class"] += pageCssClass.Text.Replace("class=\"", "").TrimEnd('"');
            }
    
            protected override void OnPreRender(EventArgs e)
            {
                base.OnPreRender(e);
    
                // append classname on prerender since contour overwrites the static classes set in the ascx control
                b_next.CssClass += " btn btn-default";
                b_prev.CssClass += " btn btn-default";
            }
    
            protected void rpFieldsets_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)
            {
                if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
                {
                }
    
                base.RenderFieldset(sender, e);
            }
    
            protected void rpFields_ItemDataBound(object sender, RepeaterItemEventArgs e)
            {
                if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
                {
                }
    
                base.RenderField(sender, e);
            }
    
            protected void rpFields_PreRender(object sender, EventArgs e)
            {
                // iterate all items and wire up the classes
                Repeater repeater = sender as Repeater;
                foreach (RepeaterItem item in repeater.Items)
                {
                    if (item.ItemType == ListItemType.AlternatingItem || item.ItemType == ListItemType.Item)
                    {
                        // set classes
                        HtmlGenericControl contourField = item.FindControl("contourField") as HtmlGenericControl;
                        Literal cssClass = item.FindControl("cssClass") as Literal;
                        contourField.Attributes["class"] = string.Format(contourField.Attributes["class"], cssClass.Text);
    
                        // placeholder
                        PlaceHolder placeholder = item.FindControl("placeholder") as PlaceHolder;
                        foreach (Control c in placeholder.Controls)
                        {
                            if (c is TextBox || c is FileUpload || c is DropDownList)
                            {
                                (c as WebControl).CssClass += " form-control";
                            }
                            else if (c is HtmlInputButton || c is HtmlSelect)
                            {
                                (c as HtmlControl).Attributes["class"] += " form-control";
                            }
                            else if (c is CheckBoxList)
                            {
                                (c as WebControl).CssClass += " checkbox";
                            }
                        }
                    }
                }
            }
    
            protected void rpFieldsets_PreRender(object sender, EventArgs e)
            {
                // iterate all items and wire up the classes
                Repeater repeater = sender as Repeater;
                foreach (RepeaterItem item in repeater.Items)
                {
                    if (item.ItemType == ListItemType.AlternatingItem || item.ItemType == ListItemType.Item)
                    {
                        HtmlGenericControl contourFieldset = item.FindControl("contourFieldset") as HtmlGenericControl;
                        Literal cssClass = item.FindControl("cssClass") as Literal;
                        if (repeater.Items.Count > 2)
                        {
                            // set classes
                            contourFieldset.Attributes["class"] += cssClass.Text;
                            if (item.ItemIndex < repeater.Items.Count - 1)
                            {
                                contourFieldset.Attributes["class"] += " col-lg-6";
                            }
                        }
                        else
                        {
                            contourFieldset.Attributes["class"] += " col-lg-8";
                        }
    
                        // add clearfix div
                        if (item.ItemIndex > 0 && item.ItemIndex % 2 == 0)
                        {
                            HtmlGenericControl ClearFix = item.FindControl("ClearFix") as HtmlGenericControl;
                            ClearFix.Visible = true;
                        }
                    }
                }
            }
        }
    }
  • Mark 122 posts 255 karma points
    Nov 17, 2014 @ 18:02
    Mark
    1

    In case someone else stumbles across this and thinks there's no solution, there is a way that we've been doing it in MVC

     

    You need to include references to:

    @using Umbraco.Forms.Mvc.Models;
    @using Umbraco.Forms.Mvc.BusinessLogic;

    You then need to create a new instance of FormViewModel:

    FormViewModel footerFormViewModel = new FormViewModel() { FormId = [YourFormGUID], FormStep = 1 };
    footerFormViewModel.Build();

    You can then render your script partial with:

    @Html.Partial(FormViewResolver.GetScriptView(footerFormGuid), footerFormViewModel)

    Wherever you want, either directly on your master page if you form is there, or using an @Section block if it's a chil page.

    Hopefully that will help someone, may even be possible from WebForms, though I'm yet to try and find a way.

    Mark

  • Kevin Curtis 1 post 21 karma points
    Dec 03, 2014 @ 23:23
    Kevin Curtis
    0

    Mark,

    The Script partial worked for me, but how to have the form be written without the script tags in the first place?

    Kevin

  • Mark 122 posts 255 karma points
    Dec 05, 2014 @ 09:56
    Mark
    0

    Hi Kevin,

    Should have put it in my post I suppose :-s

    You need to customis the form that you are generating the view for by editing the form.cshtml file (either the global one or individual form ones [/Umbraco/Plugins/umbracoContour/Views]) and remove/comment out the line that adds the scripts to the page

    @Html.Partial(FormViewResolver.GetScriptView(Model.FormId), Model)

    This will mean that the script partial will only be added where you have put it in your own master/content page.

    Hope that helps..

    Mark

  • Comment author was deleted

    Dec 05, 2014 @ 10:14
  • Mark 122 posts 255 karma points
    Dec 05, 2014 @ 10:25
    Mark
    0

    Even better, thanks Tim. Though it looks like that was only created 2 days ago so couldn't have seen it before lol :-)

Please Sign in or register to post replies

Write your reply to:

Draft