locked
Modular themes with masterpages in a pre-compiled site RRS feed

  • Question

  • User-1186634366 posted

    Hello,

    i'm writing an e-commerce engine with asp.net and web forms and i would to employ a system with ability to use dynamic modular themes were anyone could download a new themes and use it when needed.

    I use masterpage and i pre-compile the site before publish. I know in this case the mastepages files have to exsist before pre-compilation for use it after... so i cannot use a master page included in a new theme downloaded by the net because in this case was not pre-compiled.

    At now i know how to change themes on the fly and it run perfectly but only for masterpages already in the project.

    I imagine varius scenarius but i do not have clear ideas, so i would ask you a way or suggestions for obtain my objective, this is the last thing to do for my e-commerce engine before publish as free product.

    Thanks to all!

    Sunday, May 5, 2019 7:09 AM

Answers

  • User283571144 posted

    Hi rava,

    ...could it be a right way ? I've not the need of much theme for now.

    This may be a good solution. You could generate the master page according to customer's requirement. 

    Then you could modify the master page from the page preinit method according to each customer's setting,

    More details, you could refer to below codes:

    protected void Page_preInit(object sender, EventArgs e)
            {
                if (this.Session["master"] != null)
                {
                    this.MasterPageFile = string.Format("~/Cases/{0}.master", (string)this.Session["master"]);
                }
            }
    
    
            protected void Button1_Click(object sender, EventArgs e)
            {
                if (this.Session["master"]!=null)
                {
                    if (this.Session["master"].ToString() == "Master2")
                    {
                        this.Session["master"] = "Master1";
                    }
                    else
                    {
                        this.Session["master"] = "Master2";
                    }
                }
                else
                {
                    this.Session["master"] = "Master2";
                }         
    
                this.Server.Transfer(this.Request.RawUrl);
            }

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 13, 2019 8:24 AM

All replies

  • User283571144 posted

    Hi rava,

    As you said,  we couldn’t modify the master page after published to the IIS. The only way to do this is you should develop an api which could receive some new master page theme, then  you should write codes to rebuild the whole application and update the application, this is very complex.

    I suggest that you can dynamically change your theme page in the front-end . If you just change the style, you can encapsulate the CSS of different themes and call them according to your needs, just like the themes of bootstrap. If you change the layout , you can use jQuery to operate, which will be much easier.

    Best Regards,

    Brando

    Monday, May 6, 2019 9:15 AM
  • User-1186634366 posted

    Hello Brando and thank you for your suggestion.

    If i don't change the masterpage, the layout remain the same... no ? This is because i would to change the masterpage... if i change css i only change the colors, font, styles...but not the layout of the page...

    Is there a way for do this in according to your suggestion ?

    Monday, May 6, 2019 1:40 PM
  • User283571144 posted

    Hi Rava,

    If you want to change the layout of your master page, I suggest that you use placeholders instead of dynamic changes in the master page. For example, you can use a div tag with id, then dynamically design placeholders in different jQuery files, and call the jQuery files currently needed on the master page.

    If you use this way, there is no needto recompile the code. Of course, if you want to modify the master page's code-behind, you need to recompile the codes. 

    If you need to change the layout of the master page, you just need to change the jQuery reference file of the master page.

    More detaisl ,you could refer to below codes:

    // This is my master page.
    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Master1.master.cs" Inherits="CaseProject.Cases.Master1" %>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="JsFiles/jquery1.js" id="jqueryFile"></script>
        <link href="Css/css1.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div id="headContent">
                    <div id="changeplace"></div>//This is the placeholder
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
                <asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
                </asp:ContentPlaceHolder>
                <div id="footContent">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </div>
        </form>
    </body>
    

    Here are two simple jQuery files I created

    Jquery1:

    $(function () {
        $("#changeplace").empty();
        var html = "<div class='change1'>This is the master page of the jquery1 file I quoted.</div>";
        $("#changeplace").append(html);
    });
    

    Jquery2:

    $(function () {
        $("#changeplace").empty();
        var html = "<div class='change2'> This is the master page of the jquery2 file I quoted.</div>";
        $("#changeplace").append(html);
    });
    

    Result:

    Best Regards,

    Brando

    Wednesday, May 8, 2019 3:15 AM
  • User-1186634366 posted

    Hello Brando and thanks for your special suggestion!

    If i understand, you suggest to continue the use of MasterPage (i prefer) but changing dinamically various sections of masterpage including this parts on a DIV tag which will contain correct html code i need.

    The idea is very good but i have somes troubles:

    1) I have to write all section code (head, slider, body, footer) in a jquery file ...it could be not comfortable for large code and i have no idea how to wrote "as a jquery file" because usually i use jquery as a simple script into html code.

    2) I have no idea about how to call one or another Jquery file basing on the selected theme (my first objective is change theme dinamically); could i save this jquery file as a part of asp.net theme ?

    3) I use foundation framework and about this i usually set columns which can adapt on the browser screen (small, medium and large). How can maintain this approach using div as placeholder ?

    4) In most part of html vode i have  asp.net server (<% %>) wich run only if included in aspx,ascx file ... so include it by jquery is not so easy...

    The best result (for me) could be continue using one only masterpage which could dinamycally have different provisions of various page section, basing on the applyed theme...this is my goal, if is possible.

    So i could have a theme with 2 column, one theme with 1 column, another theme with a sidebar into first columns etc etc...

    Sorry for my objections but i would only understand and apply you suggestion in the best way possible... sorry also for my bad english...

    Wednesday, May 8, 2019 7:43 AM
  • User-1186634366 posted

    Sorry for this reply Brando...

    Maybe i found a strategy that could run for me.... but there is a problem... listen...

    i have this code:

    <form id="formMaster" runat="server" enableviewstate="true">
    
    <ajax:ScriptManager ID="ScriptManager" runat="server">
    </ajax:ScriptManager>
    
    <div id="ContainerHead">
    
    <!-- #include virtual="/App_themes/defaulttheme/ThemeHeader.inc" -->
    </div>
    
    <div id="ContainerBody">
    
    <!-- #include virtual="/App_themes/defaulttheme/ThemeBody.inc" -->
    </div>
    
    <div id="ContainerFooter">
    
    <!-- #include virtual="/App_themes/defaulttheme/ThemeFooter.inc" -->
    </div>

    ..using old asp include statement it run... i could include specific files readed from current theme, so putting different include file for every theme (which are not compiled in pre-compilation because are intended as personalized file) which contain correct layout could be run....

    ...consider the included file have some server side variables (<%=%>)...

    ...but the problem is i cannot use a fix path (es:/App_themes/defaulttheme/ThemeBody.inc).... i have to include dynamic path (ES: <%=ConfigurationManager.AppSettings("ThemeCurrent")ThemeBody.inc%>) but server construct are not interpreted correctly...

    Loading the include file with Jquery not run ...

    $('#ContainerHead').empty();
    $('#ContainerHead').load('<%=ConfigurationManager.AppSettings("ThemeCurrent")%>ThemeHeader.inc');

    I think i cannot use Jquery because it will be included after server-side controls... is right ?

    Trying include ASCX file wannot interprete server variables...

    Were i wrong ?

    Wednesday, May 8, 2019 4:27 PM
  • User-1186634366 posted

    Sorry Brando,

    as you can see by my erroneus reply, i'm not able to do what you suggest....

    ...i think to change approach...

    I think to collect a number of masterpage precompilated and load theme directory only if user would use it... so i can continue to use masterpage system...if user load a specific theme directory (css, images etc) which is called as the masterpage i just created and precompilated then it will run...

    ...could it be a right way ? I've not the need of much theme for now.

    If could be right, we could close this topic because i need another type of answer about web.config runtime modification in a precompiled site...but i'm going to create a new topic now...

    Friday, May 10, 2019 4:19 PM
  • User283571144 posted

    Hi rava,

    ...could it be a right way ? I've not the need of much theme for now.

    This may be a good solution. You could generate the master page according to customer's requirement. 

    Then you could modify the master page from the page preinit method according to each customer's setting,

    More details, you could refer to below codes:

    protected void Page_preInit(object sender, EventArgs e)
            {
                if (this.Session["master"] != null)
                {
                    this.MasterPageFile = string.Format("~/Cases/{0}.master", (string)this.Session["master"]);
                }
            }
    
    
            protected void Button1_Click(object sender, EventArgs e)
            {
                if (this.Session["master"]!=null)
                {
                    if (this.Session["master"].ToString() == "Master2")
                    {
                        this.Session["master"] = "Master1";
                    }
                    else
                    {
                        this.Session["master"] = "Master2";
                    }
                }
                else
                {
                    this.Session["master"] = "Master2";
                }         
    
                this.Server.Transfer(this.Request.RawUrl);
            }

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 13, 2019 8:24 AM
  • User-1186634366 posted

    Thank you Brando !

    Tuesday, May 14, 2019 3:49 PM