Upgrading Page Layouts

« Return to Notes Listing

Author:Aaron
Last Updated:December 29, 2022 9:54 AM

Page layouts in v7.0 must be migrated from .ascx to .cshtml files. Each .ascx file will be updated to a new .cshtml file. It is also import to create a sql file to updated the paths when v7.0 is installed.

  1. Create a new razor file for each .ascx file. The new file should have the same name as the old .ascx with the updated .cshtml extension.
  2. Start by adding using statement to the razor file:
    Note: SocialMediaBookmarks is optional 
    @using NorthwoodsSoftwareDevelopment.Cms.Display
@using [clientid].Titan.Public.UISupport
@using sm = NWS.Titan.Blocks.SocialMediaBookmarks.UISupport
@model PageLayoutViewModel
  3. Add variable section, the specific variables you will need will be found when pasting the old html from the .ascx in step 4. 
    @{
    /* Nav Areas */
    var bottomNav = Html.RenderCmsComponent(new DisplayNavigation { ID = "bottomNav", Zone = "Bottom", ViewPath = "NavBottom.xsl", MaximumTreeLevels = 8 });
    var topNav = Html.RenderCmsComponent(new DisplayNavigation { ID = "topNav", Zone = "Top", ViewPath = "NavTop.xsl", MaximumTreeLevels = 8 });
    var utilityNav = Html.RenderCmsComponent(new DisplayNavigation { ID = "utility", Zone = "Utility", ViewPath = "NavUtility.xsl", MaximumTreeLevels = 8 });
    var mobileUtilityNav = Html.RenderCmsComponent(new DisplayNavigation { ID = "utilityNav1", Zone = "Utility", ViewPath = "PhoneUtility.xsl", MaximumTreeLevels = 8 });
    var mobileUtility = Html.RenderCmsComponent(new DisplayNavigation { ID = "mobileUtility", Zone = "Utility", ViewPath = "NavUtility.xsl", MaximumTreeLevels = 8 });
    /* Search Bars */
    var searchBar = Html.RenderCmsComponent(new SearchBar { ID = "searchBar", HintText = "Search", ViewPath = "SearchBar/SearchBar.xsl" });
    var mobileSearchBar = Html.RenderCmsComponent(new SearchBar { ID = "searchBar1", ViewPath = "SearchBar/SearchBar_mobile.xsl" });
    /* Content Zones */
    var centerContent = Html.RenderCmsComponent(new CenterContent { ID = "centerContent", Zone = "Center" });
    var topContent = Html.RenderCmsComponent(new CenterContent { ID = "topContent", Zone = "Top" });
    /* Static Content */
    var commentsAndRatings = Html.RenderCmsComponent(new CommentsAndRatings { ID = "ratings", ViewPath = "Default.xsl", Display = CommentsAndRatings.ShowCondition.CommentForm | CommentsAndRatings.ShowCondition.StandardComments | CommentsAndRatings.ShowCondition.FeaturedComments });
    var globalVar = Html.RenderCmsComponent(new GlobalVarDisplay { ID = "globalVar", SiteVar = "ContentFooterText" });
    var languageSwitcher = Html.RenderCmsComponent(new StaticContent { ID = "langauageSelector", SiteParam = "ChooseLanguage" });
    var languageSwitcher2 = Html.RenderCmsComponent(new StaticContent { ID = "langauageSelector2", SiteParam = "ChooseLanguage" });
    var logoControl = Html.RenderCmsComponent(new Logo { ID = "logoControl" });
    var socialFooter = Html.RenderCmsComponent(new StaticContent { ID = "socialFooter1", SiteParam = "SocialMedia" });
    var socialFooter2 = Html.RenderCmsComponent(new StaticContent { ID = "socialFooter", SiteParam = "SocialMedia" });
    var upperFooter = Html.RenderCmsComponent(new StaticContent { ID = "upperFooter", SiteParam = "FooterUpper" });
}
  4. Copy and paste the legacy html from the .ascx file in the razor file. There will be user controls that will be replace with variables from the variables sections: 
    <div id="nav"><cms:StaticConent id="topNav" runat="server" /></div>
  5. Each user control will be replaced with a variable. 
    <div id="nav">@topNav</div>
  6. The below provides examples of commonly used variables that you can reuse for page layouts. Be sure to compare the old id and view path and update appropriately. If there is a user control in the old file that doesn't appear in the examples below, you will need to create a new variable.  
    /* Nav Areas */ 
/* Often most page layouts will have a topNav, bottomNav, and utilityNav. This may include mobileNavs too. If anything the old user control may have a unique ID and 
   XSLT value. The ID from the old user control is added to the Id of the variable, and the XSLT value in the user control is added to the ViewPath of the variable */
var bottomNav = Html.RenderCmsComponent(new DisplayNavigation { ID = "bottomNav", Zone = "Bottom", ViewPath = "[somepath]\NavBottom.xsl", MaximumTreeLevels = 8 }); 
var topNav = Html.RenderCmsComponent(new DisplayNavigation { ID = "topNav", Zone = "Top", ViewPath = "[somepath]\NavTop.xsl", MaximumTreeLevels = 8 }); 
var utilityNav = Html.RenderCmsComponent(new DisplayNavigation { ID = "utility", Zone = "Utility", ViewPath = "[somepath]\NavUtility.xsl", MaximumTreeLevels = 8 }); 
var mobileUtilityNav = Html.RenderCmsComponent(new DisplayNavigation { ID = "utilityNav1", Zone = "Utility", ViewPath = "[somepath]\PhoneUtility.xsl", MaximumTreeLevels = 8 }); 
var mobileUtility = Html.RenderCmsComponent(new DisplayNavigation { ID = "mobileUtility", Zone = "Utility", ViewPath = "[somepath]\NavUtility.xsl", MaximumTreeLevels = 8 });

/* Search Bars */
/* Search bars are similar to nav areas. Make sure to check for the HintText and add the appropriate value. If a user control does not have hint text, then remove the 
   parameter */ 
var searchBar = Html.RenderCmsComponent(new SearchBar { ID = "searchBar", HintText = "Search", ViewPath = "[somepath]/SearchBar.xsl" }); 
var mobileSearchBar = Html.RenderCmsComponent(new SearchBar { ID = "searchBar1", ViewPath = "[somepath]/SearchBar_mobile.xsl" });

/* Content Zones */
/* Content Zones are similar to nav areas and search bars. Make sure to check for the Zone and add the appropriate value. */ 
var centerContent = Html.RenderCmsComponent(new CenterContent { ID = "centerContent", Zone = "Center" }); 
var topContent = Html.RenderCmsComponent(new CenterContent { ID = "topContent", Zone = "Top" });

/* Static Content */
/* Static Content can be difficult to migrate due to the unique value different static content types can have. 
   CommentsAndRatings have unique display values using boolean values in the form CommentsAndRatings.ShowCondition.[value]. The below example indicates that CommentForm,
   StandardComments, and FeaturedComments will be shown in this instance. Equivalent values can be found on the user control. 
   SocialMediaBookmarks are similar and require a using statement. SocialMediaBookmarks also have unique display values using boolen values. The below examples indicates 
   that ShowsIcons, ShowGooglePlus, ShowTwitter, ShowFacebook, and ShowLinkedIn will be shown in this instance. Equailvalen values can be found on the user control. 
   Some values like Logo only have an ID and are a specific control.
   GlobalVars, have an ID and SiteVar parameter corresponding to the value on the user control.
   Some values with a SiteParam have an ID and a site param corresponding to the value on the user control. */ 
var commentsAndRatings = Html.RenderCmsComponent(new CommentsAndRatings { ID = "ratings", ViewPath = "Default.xsl", Display = 
CommentsAndRatings.ShowCondition.CommentForm | CommentsAndRatings.ShowCondition.StandardComments | CommentsAndRatings.ShowCondition.FeaturedComments }); 
var globalVar = Html.RenderCmsComponent(new GlobalVarDisplay { ID = "globalVar", SiteVar = "ContentFooterText" }); 
var languageSwitcher = Html.RenderCmsComponent(new StaticContent { ID = "langauageSelector", SiteParam = "ChooseLanguage" }); 
var languageSwitcher2 = Html.RenderCmsComponent(new StaticContent { ID = "langauageSelector2", SiteParam = "ChooseLanguage" }); 
var logoControl = Html.RenderCmsComponent(new Logo { ID = "logoControl" });
var socialMediaBookmarks = Html.RenderCmsComponent(new sm.SocialMediaBookmarks { ID = "pageToolsNav", Display = 
sm.SocialMediaBookmarks.ShowCondition.ShowIcons | sm.SocialMediaBookmarks.ShowCondition.ShowGooglePlus | sm.SocialMediaBookmarks.ShowCondition.ShowTwitter | 
sm.SocialMediaBookmarks.ShowCondition.ShowFacebook | sm.SocialMediaBookmarks.ShowCondition.ShowLinkedIn, ViewPath = "[somepath]/PageTools.xsl" }); 
var socialFooter = Html.RenderCmsComponent(new StaticContent { ID = "socialFooter1", SiteParam = "SocialMedia" }); 
var socialFooter2 = Html.RenderCmsComponent(new StaticContent { ID = "socialFooter", SiteParam = "SocialMedia" }); 
var upperFooter = Html.RenderCmsComponent(new StaticContent { ID = "upperFooter", SiteParam = "FooterUpper" });
  7. Under the {client].Titan.Public.Database project, there should be a folder named DatabaseScripts\Upgrade. In that folder should be the file 7.0.0-Cms-Post.sql. If one is not there, go get one from the master client SDK.This script takes care of renaming the page layout files. You will need to edit this file to fit your specific instance.
     
  8. Remove the old ASCX files from your WKST project.
    1. Exclude them from your project
    2. Browse to the folder containing the ASCX files and FORGET the files from the Repo (using Mercurial)

 

RAZOR EXAMPLES
 

In the ACX file, this line: <cms:StaticContent id="BrandSwitcherTop" SiteParam="BrandSwitcherTop" runat="server" />

becomes: @BrandSwitcherTop with this declaration at the top:

var BrandSwitcherTop = Html.RenderCmsComponent(new StaticContent { ID = "BrandSwitcherTop", SiteParam = "BrandSwitcherTop" }); 

 

This: <cms:displaynavigation id="utilityNav" zone="Utility" runat="server" Xslt="DropDownNavTop.xsl" MaximumTreeLevels="8" />

becomes @utilityNav with this declaration at the top:

var utilityNav = Html.RenderCmsComponent(new DisplayNavigation { ID = "utilityNav", Zone = "Utility", ViewPath = "DropDownNavTop.xsl", MaximumTreeLevels = 8 });

Note that the Xslt value becomes the ViewPath value. Also make the MaximumTreeLevels match.

 

TIPS

  • The variable (var) name does not matter. But as a matter of convention, we highly recommend making the VAR name equal to the ID of the original control
  • Make the Var name and ID name match wherever possible
  • Carefully note the ZONE and Xslt values in the original control and make sure your var declaration matches. This is a common error and easy to overlook.

 

SCRIPT EXAMPLES

You will certainly need to create a 7.0.0-Cms-Post.sql file and, most importantly, hook it into your SDK.config.json file

First, you are certainly going to need to rename .ascx extentions to .cshtml like this

    /* Update existing page layout extensions */
    UPDATE ThemeTemplateLayout
    SET DisplayPageDotNet = REPLACE(DisplayPageDotNet, '.ascx', '.cshtml')
    WHERE DisplayPageDotNet like '%.ascx'

    UPDATE ThemeInstalledLayout
    SET DisplayPageDotNet = REPLACE(DisplayPageDotNet, '.ascx', '.cshtml')
    WHERE DisplayPageDotNet like '%.ascx'

You also may need to reset file paths, especially if you have properly relocated files into {clientID}/{InstanceID} folders (e.g.Holista/Public/).  Here is a good example of some additional scripting:

 

    /* Update page layout paths if not already updated*/
    IF EXISTS(
            SELECT 1
            FROM ThemeInstalledLayout til
                JOIN ThemeInstalled ti
                                ON ti.ThemeInstalledID = til.ThemeInstalledID
            WHERE til.DisplayPageDotNet not like 'Holista/Public/%' and ti.ThemeInstalledID > 1
            )
    BEGIN
        PRINT(N'Some required page layouts are not updated. Updating now.');

        UPDATE ThemeInstalledLayout
        SET DisplayPageDotNet = CONCAT('Holista/Public/', DisplayPageDotNet)
        FROM ThemeInstalled ti
            JOIN ThemeInstalledLayout til
                ON ti.ThemeInstalledID = til.ThemeInstalledID
        WHERE til.DisplayPageDotNet not like 'Holista/Public/%' and ti.ThemeInstalledID > 1;

        UPDATE ThemeInstalledLayout
        SET PageStyleCSS = CONCAT('Holista/Public/', PageStyleCSS)
        FROM ThemeInstalled ti
            JOIN ThemeInstalledLayout til
                ON ti.ThemeInstalledID = til.ThemeInstalledID
        WHERE til.PageStyleCSS not like 'Holista/Public/%' and ti.ThemeInstalledID > 1 and til.PageStyleCSS <> '';

        UPDATE ThemeInstalledLayout
        SET PageLayoutCSS = CONCAT('Holista/Public/', PageLayoutCSS)
        FROM ThemeInstalled ti
            JOIN ThemeInstalledLayout til
                ON ti.ThemeInstalledID = til.ThemeInstalledID
        WHERE til.PageLayoutCSS not like 'Holista/Public/%' and ti.ThemeInstalledID > 1 and til.PageLayoutCSS <> '';

        UPDATE ThemeInstalled
        SET ThemeStyleCSS = CONCAT('Holista/Public/', ThemeStyleCSS)
        FROM ThemeInstalled ti
            JOIN ThemeInstalledLayout til
                ON ti.ThemeInstalledID = til.ThemeInstalledID
        WHERE ti.ThemeStyleCSS not like 'Holista/Public/%' and ti.ThemeInstalledID > 1 and ti.ThemeStyleCSS <> '';

        UPDATE ThemeInstalled
        SET ThemeLayoutCSS = CONCAT('Holista/Public/', ThemeLayoutCSS)
        FROM ThemeInstalled ti
            JOIN ThemeInstalledLayout til
                ON ti.ThemeInstalledID = til.ThemeInstalledID
        WHERE ti.ThemeLayoutCSS not like 'Holista/Public/%' and ti.ThemeInstalledID > 1 and ti.ThemeLayoutCSS <> '';

        UPDATE [CssFileUsage]
        SET CssFileName = REPLACE(CssFileName, '/ClientCSS', '/ClientCSS/Holista/Public')
        FROM [CssFileUsage] ti
            JOIN ThemeInstalledLayout til
                ON ti.ThemeInstalledID = til.ThemeInstalledID
        WHERE ti.CssFileName not like 'Holista/Public/%' and ti.ThemeInstalledID > 1 and ti.CssFileName <> '';

    END

    -- /CommonScripts/Skygen_Master.j
    UPDATE [Site]
    SET Snippets = CAST(REPLACE(CAST(Snippets as nvarchar(max)), '/CommonScripts/Skygen_Master.js', '/CommonScripts/Holista/Public/Skygen_Master.js') AS XML)
    WHERE SiteType = N'Content'
    AND CAST(Snippets as NVARCHAR(MAX)) LIKE '%/CommonScripts/Skygen_Master.js%'
         
        -- /CommonScripts/jquery.bxslider.js
    UPDATE [Site]
    SET Snippets = CAST(REPLACE(CAST(Snippets as nvarchar(max)), '/CommonScripts/jquery.bxslider.js', '/CommonScripts/Holista/Public/jquery.bxslider.js') AS XML)
    WHERE SiteType = N'Content'
    AND CAST(Snippets as NVARCHAR(MAX)) LIKE '%/CommonScripts/jquery.bxslider.js%'

    -- /ClientCSS/Holista.css
    UPDATE [Site]
    SET Snippets = CAST(REPLACE(CAST(Snippets as nvarchar(max)), '/ClientCSS/Holista.css', '/ClientCSS/Holista/Public/Holista.css') AS XML)
    WHERE SiteType = N'Content'
    AND CAST(Snippets as NVARCHAR(MAX)) LIKE '%/ClientCSS/Holista.css%'

    -- /CommonScripts/Skygen_2018_Site.js
    UPDATE [Site]
    SET Snippets = CAST(REPLACE(CAST(Snippets as nvarchar(max)), '/CommonScripts/Skygen_2018_Site.js', '/CommonScripts/Holista/Public/Skygen_2018_Site.js') AS XML)
    WHERE SiteType = N'Content'
    AND CAST(Snippets as NVARCHAR(MAX)) LIKE '%/CommonScripts/Skygen_2018_Site.js%'

    -- /CommonScripts/Holista.js
    UPDATE [Site]
    SET Snippets = CAST(REPLACE(CAST(Snippets as nvarchar(max)), '/CommonScripts/Holista.js', '/CommonScripts/Holista/Public/Holista.js') AS XML)
    WHERE SiteType = N'Content'
    AND CAST(Snippets as NVARCHAR(MAX)) LIKE '%/CommonScripts/Holista.js%'
top