1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / How to deal with multiple ContentPlaceHolders or GenericContentControls inside of other controls

How to deal with multiple ContentPlaceHolders or GenericContentControls inside of other controls

2 posts, 0 answered
  1. Tervis
    Tervis avatar
    3 posts
    Registered:
    18 Nov 2008
    24 May 2010
    Link to this post
    We have a personalization application on our website that needs to be a composite of custom asp.net composite controls. Currently the only way we have found to achieve this is to create a master page that contains the various content areas and references to the custom controls.

    I have included screen shots of the page rendered and in edit mode. I have also included the source code for our master page.

    I know there has to be a better way to do this but I am not sure what it is using sitefinity's API. Thanks for your help.

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Personalize.master.cs"
        Inherits="App_Master_Personalize" %>
     
    <%@ Register TagPrefix="tt" TagName="DocumentHeader" Src="~/Presentation/Controls/Global/DocumentHeader.ascx" %>
    <%@ Register TagPrefix="tt" TagName="Header" Src="~/Presentation/Controls/Global/Header.ascx" %>
    <%@ Register TagPrefix="mf" TagName="LeftNavigation" Src="~/Presentation/Controls/Global/LeftNavigation.ascx" %>
    <%@ Register TagPrefix="tt" TagName="Footer" Src="~/Presentation/Controls/Global/Footer.ascx" %>
    <%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
        TagPrefix="asp" %>
    <%@ Register TagPrefix="fs" TagName="FontStyle" Src="~/Presentation/Controls/Products/Personalize/FontStyle.ascx" %>
    <%@ Register TagPrefix="fc" TagName="FontColor" Src="~/Presentation/Controls/Products/Personalize/FontColor.ascx" %>
    <%@ Register TagPrefix="ft" TagName="FontType" Src="~/Presentation/Controls/Products/Personalize/FontType.ascx" %>
    <%@ Register TagPrefix="ct" TagName="CustomText" Src="~/Presentation/Controls/Products/Personalize/CustomText.ascx" %>
    <%@ Register TagPrefix="ttt" TagName="tht" Src="~/Presentation/Controls/Products/Personalize.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <script type="text/javascript">
     
        var SilverlightControl = null;
        var FontDisplayName = "";
        var FontColor = "";
        var LineOne = "";
        var LineTwo = "";
        var LineThree = "";
        var showFront = true;
     
        function InitialFont_ClientValidate(source, args) {
            if ((LineOne == "") && (LineTwo == "") && (LineThree == "")) {
                args.IsValid = false;
            } else {
                args.IsValid = true;
            }
             
        }
     
        function CustomText_OnKeyDown(e) {
            if ((e.keyCode >= 65 && e.keyCode <= 90) || (e.keyCode == 8) || (e.keyCode == 9) || (e.keyCode == 16) || (e.keyCode == 20) || (e.keyCode == 37) || (e.keyCode == 39) || (e.keyCode == 46)) {
                return true;
            } else {
                alert("Please use characters from A-Z only");
                return false;
            }
        }
     
        function CustomText_OnChange(lineno, obj) {
            switch (lineno) {
                case "1":
                    LineOne = obj.value;
                    break;
                case "2":
                    LineTwo = obj.value;
                    break;
                case "3":
                    LineThree = obj.value;
                    break;
                default:
                    break;
            }
            RefreshPersonalizationDisplay();
        }
     
        function pluginLoaded(sender, args) {
            if (sender != null) {
                SilverlightControl = sender.get_element();
                SilverlightControl.Content.SilverlightApp.ProductID = "<%=this.ProductID%>";
                SilverlightControl.Content.SilverlightApp.VariantID = "<%=this.VariantID%>";
                SilverlightControl.Content.SilverlightApp.ShowFront = "<%=this.IsShowFrontTumbler%>";
                RefreshPersonalizationDisplay();
            }
        }
     
        function setPersonalizationProperty(fontdisplay, fontcolor, lineone, linetwo, linethree, showfront) {
            FontDisplayName = fontdisplay;
            FontColor = fontcolor;
            LineOne = lineone;
            LineTwo = linetwo;
            LineThree = linethree;
            showFront = showfront;
        }
     
        function RefreshPersonalizationDisplay() {
            if (SilverlightControl != null) {
                SilverlightControl.Content.SilverlightApp.FontDisplayName = FontDisplayName;
                SilverlightControl.Content.SilverlightApp.FontColor = FontColor;
                SilverlightControl.Content.SilverlightApp.LineOne = LineOne;
                SilverlightControl.Content.SilverlightApp.LineTwo = LineTwo;
                SilverlightControl.Content.SilverlightApp.LineThree = LineThree;
                SilverlightControl.Content.SilverlightApp.ShowFront = showFront;
                SilverlightControl.Content.SilverlightApp.Refresh();
            }
        }
     
        function ValidateFontTypeSelection(source, args) {
            if (document.getElementById("<%=FontType.FontTypeSelectionClientID %>").value == "") {
                args.IsValid = false;
            } else {
                return true;
            }
        }
     
        function ValidateFontColorSelection(source, args) {
            if (document.getElementById("<%=FontColor.FontColorSelectionClientID %>").value == "") {
                args.IsValid = false;
            } else {
                return true;
            }
        }
     
        function ValidateFontStyleSelection(source, args) {
            if (document.getElementById("<%=FontStyle.FontStyleSelectionClientID %>").value == "") {
                args.IsValid = false;
            } else {
                return true;
            }
        }
     
        function ValidateChecked(oSrc, args) {
            if (document.getElementById("<%=chkPersonalization.ClientID%>").checked == false) {
                args.IsValid = false;
            }
            else
                return true;
        }
     
        function imagerollover(buttonid, hoverimage, clickimage, validateclickid, fontselectedvalue) {
            var imagebutton = document.getElementById(buttonid);
            var fontselected = document.getElementById(fontselectedvalue);
            if (fontselected.value != validateclickid) {
                imagebutton.src = hoverimage;
            } else {
                imagebutton.src = clickimage;
            }
        }
     
        function imageonclick(buttonid, onimage) {
            var imagebutton = document.getElementById(buttonid);
            imagebutton.src = onimage;
        }
     
        function imagerollout(buttonid, clickimage, unclickimage, validateclickid, fontselectedvalue) {
            var imagebutton = document.getElementById(buttonid);
            var fontselected = document.getElementById(fontselectedvalue);
            if (fontselected.value != validateclickid) {
                imagebutton.src = unclickimage;
            } else {
                imagebutton.src = clickimage;
            }
        }
     
    </script>
     
    <style type="text/css">
        .imageBottom
        {
            vertical-align: middle;
        }
    </style>
    <head id="Head2" runat="server">
        <title>Tervis Tumbler</title>
        <tt:DocumentHeader ID="DocumentHeader1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" />
        <div id="pagewidth">
            <tt:Header ID="Header1" runat="server" />
            <div id="main">
                <mf:LeftNavigation ID="LeftNavigation" runat="server" />
                <div id="twocolumn" style="padding-top: 41px;">
                    <div style="padding: 1px 0 0 0">
                        <div class="h3-header">
                            <asp:Literal ID="productHeaderLiteral" runat="server" /></div>
                        <div id='errorLocation' style="font-size: small; color: Gray;">
                        </div>
                        <div style="float: left; width: 300px; margin-left: 1em;">
                            <asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="Personalize"
                                DisplayMode="BulletList" />
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder6" runat="server" />
                            <asp:UpdatePanel runat="server" ID="updSilverlight" UpdateMode="Conditional" OnUnload="updatePanel_Unload">
                                <ContentTemplate>
                                    <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/PersonalizeIt.xap"
                                        Height="600px" Width="300px" OnPluginLoaded="pluginLoaded">
                                        <PluginNotInstalledTemplate>
                                            <a href="http://go.microsoft.com/fwlink/?LinkId=149156" target="_blank" rel="nofollow">
                                                <img src="~/ImageTemp/Personalize/InstallSilverlight.jpg" alt="Get Microsoft Silverlight"
                                                    style="border-style: none" />
                                            </a>
                                        </PluginNotInstalledTemplate>
                                    </asp:Silverlight>
                                </ContentTemplate>
                            </asp:UpdatePanel>
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder7" runat="server" />
                        </div>
                        <div style="float: left; width: 280px;">
                            <asp:UpdatePanel runat="server" ID="PersonalizeUpdatePanel" OnUnload="updatePanel_Unload">
                                <ContentTemplate>
                                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />
                                    <fs:FontStyle ID="FontStyle" runat="server" OnSelectedFontStyle="FontStyle_OnSelectedFontStyle" />
                                    <asp:ContentPlaceHolder ID="ContentPlaceHolder8" runat="server" Visible="true"/>
                                    <ft:FontType ID="FontType" runat="server" OnSelectedFontType="FontType_OnSelectedFontType"
                                        Visible="false" />
                                    <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server" />
                                    <fc:FontColor ID="FontColor" runat="server" OnSelectedFontColor="FontColor_OnSelectedFontColor" />
                                    <asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server" />
                                    <ct:CustomText ID="CustomText" runat="server" />
                                    <asp:ContentPlaceHolder ID="ContentPlaceHolder4" runat="server" />
                                    <asp:CustomValidator ID="val" runat="server" ClientValidationFunction="ValidateChecked"
                                        Text="*" ValidationGroup="Personalize" ErrorMessage="Acceptance Required" Display="Dynamic" />
                                    <asp:CheckBox ID="chkPersonalization" runat="server" Text="Yes, I understand that personalized products are non-refundable. The Personalization I entered is correct."
                                        EnableViewState="false" Checked="false" />
                                    <br />
                                    <br />
                                    <div style="display: inline;">
                                        <asp:RegularExpressionValidator ID="rvQuantity" runat="server" ControlToValidate="txtQuantity"
                                            ErrorMessage="Quantity should be a number" ValidationExpression="^\d+$" ValidationGroup="Personalize"
                                            Display="Dynamic">*</asp:RegularExpressionValidator>
                                        <asp:CompareValidator ID="cmpQuantity" runat="server" ControlToValidate="txtQuantity"
                                            ErrorMessage="Quantity should be greater than 0" Operator="GreaterThan" ValueToCompare="0"
                                            ValidationGroup="Personalize" Display="Dynamic">*</asp:CompareValidator>
                                        <asp:Label ID="lblQuantity" runat="server" CssClass="imageBottom" Text="Quantity: "></asp:Label>
                                        <asp:TextBox ID="txtQuantity" runat="server" CssClass="imageBottom" Width="25px"
                                            Text="0">
                                        </asp:TextBox>
                                             
                                        <asp:ImageButton ID="lnkAddToCart" runat="server" CssClass="imageBottom" OnClick="lnkAddToCart_Click"
                                            ImageUrl="~/ImageTemp/Personalize/addtocart.gif" CausesValidation="true" ValidationGroup="Personalize" />
                                        <asp:LinkButton ID="lnkAddToCart2" runat="server" CssClass="button" OnClick="lnkAddToCart_Click"
                                            CausesValidation="true" ValidationGroup="Personalize" Visible="false"><span>Add to Cart</span></asp:LinkButton>
                                        <asp:LinkButton ID="lnkReturn2" runat="server" CssClass="button" OnClick="lnkReturn_Click"
                                            CausesValidation="true" ValidationGroup="Personalize" Visible="false"><span>Return to Cart</span></asp:LinkButton>
                                        <asp:ImageButton ID="lnkReturn" runat="server" CssClass="imageBottom" OnClick="lnkReturn_Click"
                                            ImageUrl="~/ImageTemp/Personalize/returntocart.gif" CausesValidation="true" ValidationGroup="Personalize"
                                            Visible="false" />
                                        <asp:ImageButton ID="lnkUpdate" runat="server" CssClass="imageBottom" OnClick="lnkReturn_Click"
                                            ImageUrl="~/ImageTemp/Personalize/updatecart.gif" CausesValidation="true" ValidationGroup="Personalize"
                                            Visible="false" />
                                    </div>
                                </ContentTemplate>
                                <Triggers>
                                    <asp:AsyncPostBackTrigger ControlID="FontStyle" EventName="" />
                                    <asp:AsyncPostBackTrigger ControlID="FontType" EventName="" />
                                    <asp:AsyncPostBackTrigger ControlID="FontColor" EventName="" />
                                    <asp:AsyncPostBackTrigger ControlID="lnkAddToCart" EventName="Click" />
                                    <asp:AsyncPostBackTrigger ControlID="lnkReturn" EventName="Click" />
                                </Triggers>
                            </asp:UpdatePanel>
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder5" runat="server" />
                        </div>
                    </div>
                </div>
            </div>
            <tt:Footer ID="Footer1" runat="server" />
        </div>
        <asp:CheckBox ID="IsCollegiateCheckBox" runat="server" Visible="false" />
        <asp:CheckBox ID="Is12OzCupCheckBox" runat="server" Visible="false" />
        <asp:CheckBox ID="IsBucketCheckBox" runat="server" Visible="false" />
        </form>
    </body>
    </html>

  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    25 May 2010
    Link to this post
    Hello Chris,

    You can upload your controls to the CMS. And then add them on the template your pages use - this will allow you to configure them through the CMS. If you decide to do this you might need to re-factor the JavaScript code and put it into the user controls it is working with. This article explains how to wrap a generic content control into another one: How to wrap a Generic Content control.

    Best wishes,
    Radoslav Georgiev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
2 posts, 0 answered