Hello - I created a site with multiple pages, many of them having unique style-sheets attached, and some javascript in the head tag. I want to group all of those under one masterpage, but I don't know how to retain the stylesheets or scripts, since the <html/><head/><body/><form/> tags are all deleted when using a masterpage. How can I keep all of that but still use the masterpage to easily navigate through the site?

create a new content zone in the head section of the masterpage and populate it on pages that use this masterpage with the stylesheets and scripts specific to that page.

Another solution is to create custom functionality to add js of css files on a page basis, since it's not always possible to add a contentplaceholder to the head section.

You could add a css property and a js property to your pages, by using a basepage for example. In your contentpage you assign the appropriate value for the js and css file to be loaded to the custom properties.

Then, in the unload, you create a htmlgenericcontrol in your onload, like so:

          if (!string.IsNullOrEmpty(JsFile))
                {
                    HtmlGenericControl jsTag = new HtmlGenericControl("script");
                    jsTag.Attributes.Add("type", "text/javascript");
                    jsTag.Attributes.Add("src", JsFile);
                    jsTag.Attributes.Add("defer", "defer");
                }
          }

.. and then you add the tag(s) to your htmlhead object.

A great way to manage your JavaScript is through the Page.ClientScript (ClientScriptManager) or the ASP.NET AJAX asp:ScriptManager, ContentPlaceHolders in the document's HEAD is a great way to manage CSS. 

Hi,

Base on your description, do you want to add the css for individual  page, right?

You can implement it in the content page codebehind, like below:

 HtmlLink link = new HtmlLink();
        link.Href = "App_Themes/Theme1/StyleSheet.css";
        link.Attributes.Add("type", "text/css");
        link.Attributes.Add("rel", "Stylesheet");

        link.Attributes.Add("media", "all");
        this.Header.Controls.Add(link);

 

Hope it helps

Amanda Wang - MSFT:

Hi,

Base on your description, do you want to add the css for individual  page, right?

You can implement it in the content page codebehind, like below:

 HtmlLink link = new HtmlLink();
        link.href="App_Themes/Theme1/StyleSheet.css";
        link.Attributes.Add("type", "text/css");
        link.Attributes.Add("rel", "Stylesheet");

        link.Attributes.Add("media", "all");
        this.Header.Controls.Add(link);

 

Hope it helps

Thanks, this worked great. How would I go about adding the <script/> tag I had inside the <head/> tag to the page?

Also, in some pages I have that same javascript to show a confirm box in case the user clicks on a button that deletes a database record:

 

<script type="text/javascript" language="javascript">
   function confirm_delete()
   {
     var temp = confirm("Are you sure you want to delete??");
     document.getElementById('<%= hiddenField1.ClientID %>').value = temp;
     return temp;
   }
</script>

 When I use the above solution to link a css page, I get the following runtime error:

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

And its pointing to the line that reads 

  

this.Header.Controls.Add(link);

 

What can I do to repair this? Thanks! 

Hi,

This error happens when asp.net encounters code blocks like <%= %>, or <%# %>, in a User Control and the code-behind the User Control is trying to modify the controls collection of the page (usually a LoadControl statement).

Try to refer these article:

http://blogs.snapsis.com/PermaLink,guid,381f9036-432e-468c-bc2e-b52ab86f12ea.aspx

 http://west-wind.com/WebLog/posts/5758.aspx

 

Hope it helps.