Adding styles dynamically to ASP.NET page header

2

Recently when I was working on the ASP.NET web site I wanted to modify the page styles dynamically. I googled and found that there are various technique out there for this. In this Article, I wish to share those techniques with.

Following are some of the techniques out there to accomplish this.

1. By using Page.header.Controls.Add()

Page.Header property gets the document header of the page if the head element is defend with “runat=server”  tag in the page declaration.The Header property gets a reference to an HtmlHead object that you can use to set document header information for the page. The HtmlHeadallows you to add information such as style sheets, style rules, a title, and metadata to the head element.

http://msdn.microsoft.com/en-us/library/system.web.ui.page.header.aspx

By using a literal control you can include the CSS file or even a style set.

Literal cssFile = new Literal()
{
    Text = @"<link href=""" + Page.ResolveUrl(styleFilePath) + @""" type=""text/css"" rel=""stylesheet""/>"
};
Page.Header.Controls.Add(cssFile);
Page.Header.Controls.Add(
new LiteralControl(
@"<style type='text/css'>
        .myCssClass
        {
background: black;
border: 1px solid;
        }
</style>
    "
));

Or HtmlGenericControl can use to add the styles file

//// Insert css file to header
HtmlGenericControl oCSS = oCSS = newHtmlGenericControl();
oCSS.TagName = "link";
oCSS.Attributes.Add("href", "css/mystyle.css");
oCSS.Attributes.Add("rel", "stylesheet");
oCSS.Attributes.Add("type", "text/css");
this.Page.Header.Controls.Add(oCSS);

2.  Page.Header.Stylesheet

More elegant technique is use of the Page.Header.Stylesheet Instead of using the string to defend styles (like above with Literal) you can use the style properties to create this.

//// Create dynamic style rule which applies to the css class selector (“.MyCssClass”)
Style dynamicClassStyle = new Style();
dynamicClassStyle.BorderStyle = BorderStyle.Solid;
dynamicClassStyle.BorderColor = System.Drawing.Color.Black;
dynamicClassStyle.BorderWidth = new Unit(1);
dynamicClassStyle.BackColor = System.Drawing.Color.White;
Page.Header.StyleSheet.CreateStyleRule(dynamicClassStyle, null, ".MyCssClass");
//// Create dynamic style rule which applies to type selector ("DIV")
Style dynamicTypeStyle = new Style();
dynamicTypeStyle.BorderStyle = BorderStyle.Solid;
dynamicTypeStyle.BorderColor = System.Drawing.Color.Black;
dynamicTypeStyle.BorderWidth = new Unit(1);
dynamicTypeStyle.BackColor = System.Drawing.Color.White;
Page.Header.StyleSheet.CreateStyleRule(dynamicTypeStyle, null, "DIV");

For more information please refer
http://msdn.microsoft.com/en-us/library/system.web.ui.istylesheet.createstylerule.aspx

With whatever the technique you follow please remember the following hints also,

Adding styles programmatically using the methods of the IStyleSheet interface during asynchronous postbacks is not supported. When you add AJAX capabilities to a Web page, asynchronous postbacks update regions of the page without updating the whole page.

Web service and Script service

0

Most of you are familiar about writing a web service using c#. Visual Studio provides the project template which easily creates a web service for you.

Visual Studio Project Template

Hello world web service

I’m sure you may know how to call this web service using c#. But do you know how to call the web service using client side scripts such as JavaScript? There are various ways to do this. I will demonstrate this using jQuery$.ajax() function.

        function callSvc() {
            $.ajax({
                type: "POST",
                url: "Service1.asmx/HelloWorld",
                data: "",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(data, status) { alert(data); },
                error: function(request, status, error) { alert(request); alert(status); alert(error); }
            });
        }
    

When you call the HelloWorld() service, by default you will get “500 – Internal server error” error message.

JavaScript debug mode

This error raised because you haven’t configured this service to access using client side scripts. When you Check the responseText, you will notice that it says “Only Web services with a [ScriptService] attribute on the class definition can be called from script.

To resolve this you have to configure your web service with [ScriptService] attribute.

[System.Web.Script.Services.ScriptService]
public class Service1 : System.Web.Services.WebService

When adding [ScriptService] attribute to the web service, it gets automatically handled by the ScriptHandlerFactory and creates a JavaScript proxy class for the web service. That means, you will be able to call the web service from the client side script same way as you call it from the code behind. You can view the generated proxy class by using the following command.

http://<URL>/SimpleWebService.asmx/js
http://<URL>/SimpleWebService.asmx/jsdebug

Compare the generated proxy class with the service description (http://<URL>/Service1.asmx?WSDL) and let me know what you noticed.

Download Demo Project

Configure Entity Tags (ETags)

2

If you have ever used the YSlow (http://developer.yahoo.com/yslow/) to analyze the web page to improve the performance, you may have experienced with “Configure ETags” alert.

YSlow Analyse

What is Entity Tags (ETags)

Entity tags (ETags) are a mechanism web servers and the browser use to determine whether a component in the browser’s cache matches one on the origin server. Since ETags are typically constructed using attributes that make them unique to a specific server hosting a site, the tags will not match when a browser gets the original component from one server and later tries to validate that component on a different server. (http://developer.yahoo.com/performance/rules.html#etags)

“Configure ETags” is a recommended best practices for speeding up the web site. If you are an ASP.NET developer, you can configure this by adding following code to the web.config file.

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <clear/>
      <add name="ETag" value=" "/>
    </customHeaders>
  </httpProtocol>
</system.webServer>

Exclude crystal report embedding when building the ASP.Net web site

0

If you have worked with ASP.Net web applications which include number of crystal reports as part of that, you might have experienced it takes a long time to build the web site. This happens, because by default crystal reports are set to be embedded as a resource.In default your “web.config” displays as follows.

Web config default configuration for crystal report

To resolve this, you can simply modify the embedRptInResource=”false” as follows.

<businessObjects>
    <crystalReports>
        <rptBuildProvider>
            <add embedRptInResource="false"/>
        </rptBuildProvider>
    </crystalReports>
</businessObjects>