ASP.NET Tutorials » Tutorials

Build a 3 column layout using CSS, Master Pages and Themes

Vihutuo — Tue, 18 Aug 2009 17:25:41 +0000

Using ASP.Net Mater pages and themes makes it very easy to give a consistent layout and feel for the entire site. The 3 column fixed layout is a common design for most sites. I reuse the following code most of the time to create a 3 column layout which works in most browsers including FF2, FF3, IE6 and IE7. All the code for design and layout are placed in a css file under the Themes folder

3 column layout

Here is the code for the master page. It is simple . It contains 3 columns with a center content area and a footer at the bottom.

Code for Master Page

<body>
<form id="form1" runat="server">
    <div id="body_area">
        <div id="left">
              <div class="InnerText">
                  <div id="logo">
                  div>
                  <div class="Nav">
                        <ul class="Nav">
                              <li><a href="">Link1a>li>
                              <li><a href="">Link1a>li>
                              <li><a href="">Link1a>li>
                              <li><a href="">Link1a>li>
                         ul>
                  div>
              div>
         div>
           <div id="mid">
              <div id="banner">
              div>
               <div class="InnerText">
                <asp:contentplaceholder id="Content1" runat="server">
                asp:contentplaceholder>
               div>
            div>
       <div id="right">
           <div class="InnerText">
                Right
            div>
      div>
   <div id="footer">
     <div class="InnerText">
           footer
     div>
   div>
  div>
form>
body>

Here is the CSS file which will go under the themes folder

Code for CSS file

body
{
    margin:0;
     padding-top:0px;
    padding-right:0;
    padding-bottom:0;
     padding-left:0;
     font-family:Arial, Helvetica, sans-serif;
    background-color:#D5CDAC;
}
div, h1, h2, h3, h4, p, form, label, input, textarea, img, span{

      margin:0; padding:0;
}

ul{
     margin:0; 
     padding:0; 
     list-style-type:none;
     font-size:12px;
     line-height:150%;
}

.spacer{
      clear:both; 
      font-size:0; 
      line-height:0;
}

/*-------------------body_area--------------------*/
#body_area{

      width:1004px;
      margin-top:10px;
      margin-right:auto;
       margin-bottom:0;
      margin-left:auto;
      font-family:Tahoma;
      font-size: 12px;
      font-style:normal;
      line-height:normal;
      font-weight:bold;
      font-variant:normal;
      text-transform:none;
      text-decoration:none;
      padding: 0px;
      float: none;
 }
#logo
{
  width:170px;
  height:100px;

}

#left {
      margin: 0px;
      float: left;  
      width: 185px;
       height: 500px;
      padding-top:4px;
      padding-right:0px;
      padding-bottom:0px;
      padding-left:0px;
      background-color:#EDE8D3;
      margin-bottom:12px;
}

#left div.InnerText
{
      padding-left:12px;
}

div.Nav
{
    width:140px;
    margin-right:auto;
    margin-left:auto;
    background-color:#E3DCBD;
    padding-bottom:20px;

}

ul.Nav
{
      padding: 8px 0px 0 22px;
      background-color:#E3DCBD;
      color:#000;
      margin:0 0 0 2px;
}
   
ul.Nav li
{
   background:url('images/nav_div2.gif') repeat-x left bottom;
   font-size:0;
   line-height:0
}

ul.Nav li a
{
      display:block;
      background:inherit url('images/arrow.gif')no-repeat 2px 6px;
      color:#787159;
      text-decoration:none;
      font-weight:bolder; font-style:normal; font-variant:normal;
      line-height:17px; 
      font-size:11px; font-family:Arial, Helvetica, sans-serif;
      padding-left:8px; padding-right:0; padding-top:0; padding-bottom:0;
      background-color:inherit
}

ul.Nav li a:hover{
      color:#A73F00;
      background-color:#EFECC8;
}

#banner
{
      width:620px;
      height:100px;
      margin-left:auto;
      margin-right:auto;
      text-align:center ;
      background-color:Gray ;
}

#mid {
      margin: 0px;
      padding: 0px;
      float: left;
      width: 628px;
      color:black;
      line-height:150%;
      font-weight:normal ;
      font-size:12px;
      background-color:#E3DCBD;
      padding-bottom:20px;
      margin-bottom:12px;
}

#mid div.InnerText
{
      margin-left:12px;
      margin-right:12px;
      margin-top:20px;
      padding:0;
      color:black;     
}

#mid a
{
      color:#A73F00;
      text-decoration:none;
      font-weight:bolder ;    
}

#right{

      margin: 0px;
      float: right;
      width: 185px;
      padding-top:2px;
      padding-right:0px;
      padding-bottom:0px;
      padding-left:0px;
      margin-bottom:12px;
}

#right div.InnerText
{
            padding-left:10px;
}

/*-----------------------fotter--------------------*/

#footer
{
  clear:both;
  border:solid 1px black;
}

#footer div.InnerText
{
        padding:10px;
}

How to encrypt a query string ?

Vihutuo — Fri, 05 Dec 2008 07:40:14 +0000

Few months back I had used a nice component from TSHAK to encrypt query strings. it requires just one line of code to encrypt a query string. Right now I am unable to find the exact page at TSHAK where I got the control. Due to a site re organization at TSHAK , they might have moved it to some other place. You can download the component here and place it in your bin folder.

To encrypt a query string we will need to pass it an encryption key which is a byte array
Dim qs As TSHAK.Components.SecureQueryString qs = New TSHAK.Components.SecureQueryString(New Byte() {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 8})
To add the query string values
qs("Myname")="John" qs("MyAge")=5 Response.Redirect("Page2.aspx?data=" + HttpUtility.UrlEncode(qs.ToString()))

Now to decrypt and use the values in Page2.aspx
Dim qs As TSHAK.Components.SecureQueryString qs= New TSHAK.Components.SecureQueryString(New Byte() {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 8}, Request("data")) Dim myName=qs("MyName") Dim age=qs("MyAge")

Loading and previewing fonts from files in ASP.NET

Vihutuo — Sat, 11 Oct 2008 08:10:44 +0000

Few weeks back I created a free fonts preview and download site www.freedownloadablefonts.net. There are around 6000 fonts in .ttf files and I needed to display a preview of the fonts. All the fonts were copied to a folder “~/Fonts”. Then I created a http handler “GetFontImage.ashx” to which the font path and text to display was passed as query strings . It created an image using the font specified. The code for “GetFontImage.ashx” is as follows

<%@ WebHandler Language="VB" Class="GetFontImage" %> Imports System Imports System.Web Public Class GetFontImage : Implements IHttpHandler Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest context.Response.ContentType = "image/png" Dim fontpath As String = context.Request.QueryString("fontpath") Dim Text As String = context.Request.QueryString("Text") Dim FontImage As System.Drawing.Bitmap = clsUtility.GetFontPic(fontpath, Text) Dim ms As IO.MemoryStream = New IO.MemoryStream() FontImage.Save(ms, System.Drawing.Imaging.ImageFormat.Png) Dim FontImageBytes() As Byte = ms.GetBuffer() FontImage.Dispose() ms.Close() context.Response.BinaryWrite(FontImageBytes) context.Response.End() End Sub End Class
GetFontImage.ashx calls another function clsUtility.GetFontPic(fontpath, Text) whose code is as follows. clsUtility.GetFontPic(fontpath, Text) uses the privatefontcollection class to load the font from file
Imports Microsoft.VisualBasic Imports System.IO Imports System.Drawing Imports System.Drawing.Text Imports System.Drawing.Imaging Imports System.Drawing.Drawing2D Public Class clsUtility Public Shared Function GetFontPic(ByVal Fontpath As String, ByVal Text As String) As System.Drawing.Bitmap Dim width As Integer = 620 Dim height As Integer = 30 Dim FontImage As New System.Drawing.Bitmap(width, height, PixelFormat.Format24bppRgb) Dim g As Graphics = Graphics.FromImage(FontImage) g.Clear(Color.White) g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias g.SmoothingMode = SmoothingMode.AntiAlias Dim pointF As New PointF(10,0) Dim FontSize As Integer = 24 Dim solidBrush As New SolidBrush(Color.Black) Dim privateFontCollection As New PrivateFontCollection() privateFontCollection.AddFontFile(Fontpath) ' load font from file Dim thisFont As FontFamily = privateFontCollection.Families(0) Dim regFont As New Font(thisFont, FontSize, FontStyle.Regular, GraphicsUnit.Pixel) ' Create a new font g.DrawString(Text, regFont, solidBrush, pointF) ' Using the font write the text using the font style Return FontImage End Function
All the font information were stored in a database in a table with the following columns
1. FontID
2. FontName
3. Path
4. AddedDate
A script can be easily created to add all the font information to the table using the privatefontcolection class as above
The home page displays the 10 latest fonts in a gridview. The code is as folows
Default.aspx
SelectCommand="SELECT TOP 10 * FROM [Fonts_Fonts] ORDER BY [AddedDate] DESC">
The code is pretty straight forward with a Gridview bound to an SQLDatasource. The code for GetImageURL() is as follows
Default.aspx.vb
Public Function GetImageURL(ByVal Path As String, ByVal FontName As String) Return "GetFontImage.ashx?FontPath=" & Server.MapPath(Path) & "&Text=" & FontName End Function

Fixing postbacks while using URLRewriter.net

Vihutuo — Wed, 01 Oct 2008 13:10:10 +0000

Last week I had done a post on how to rewrite URLs using the URLRewriter.Net component. You can read it here . Another issue that comes up while using URL rewriting in ASP.NET is the problem of postbacks. Whenever a postback occurs in the page, you find that after the postback the URL in the address bar of the browser shows your ugly URL again which you were trying so hard to hide . You can test it out here in my website Christian-Jokes.net (I’ll be fixing it soon though ). Go to any joke and check the URL in your browser . You will see the friendly URL. Now write down a short comment for the joke and submit the comment. After the comment is submitted, you see that the URL in the browser has changed to something like this “ShowJoke.aspx?JokeID=123″ .

Thankfully, again the the guys at URLrewriter.Net has a simple solution for us, though it took me some time to find it . Add the following code at the top of your page
<%@ Register TagPrefix="url" Namespace="Intelligencia.UrlRewriter" Assembly="Intelligencia.UrlRewriter" %>
and then change your form tag from to

If you are using master pages, you will most probably add the above lines in your master page file

Check your webpage and postbacks and URL rewriting should be working fine now !

Caching a dataset for improving performance in ASP.NET

Vihutuo — Sat, 20 Sep 2008 13:24:43 +0000

In a website that I recently completed www.Christian-Jokes.net the left navigation bar listed the categories of jokes from the database. So on every page load I was querying the database to load the categories. Obviously this was a bad idea. I needed to cache the categories in memory without querying the database on every page load. The categories were placed in the master page. In the master page page load event I wrote the following code to cache the categories of jokes

Dim JokeCategories As Data.DataSet JokeCategories = Cache("JokeCategories") If JokeCategories Is Nothing Then JokeCategories = GetJokeCategories()'This fn returns the categories Cache.Insert("JokeCategories", JokeCategories, Nothing, DateAdd(DateInterval.Minute, 180, Now()), Web.Caching.Cache.NoSlidingExpiration) End If RepeaterJokecategories.datasource=Jokecategories RepeaterJokeCategories.Databind()

Just 5 lines of code and a great boost in performance !

Now the categories are loaded from the database only if they are not present in the cache. Once loaded the categories are placed in the cache for 180 minutes

URL Rewriting in ASP.NET using URLRewriter.Net

Vihutuo — Fri, 05 Sep 2008 05:23:21 +0000

Friendly URLs have become necessary to obtain better rankings in Search engines. The improvement in rankings may not be huge but because of the burgeoning of websites in almost every niche we need to use every single advantage that we can get. Friendly URLs are URLS without a query sting or without the “?” character. Friendly URLs have a URL structure which look like static pages instead of dynamic pages.

Unfriendly URL : “www.MyShop.com/ShowProduct.aspx?ProductID=1
Friendly URL : “www.MyShop.com/Monitors/Samsung-Syncmaster.aspx

The absence of a good, built in URL rewriting solution in ASP.NET makes it difficut to implement friendly URLs in dynamic pages. The only type of URL rewriting available in ASP.NET can be used only for small websites with a few pages since we need to have a rule for each page. The following is an example of URL rewriting which can be done in the web.config file
url="~/Clubs/Computer Club.aspx" mappedUrl="~/ShowPage.aspx?PageID=1" /> url="~/Clubs/Eco Club.aspx" mappedUrl="~/ShowPage.aspx?PageID=2" />
You can easily see that a website with even a fairly large number of pages can become difficult to maintain. Adding or deleting of pages will also require the web.cong file to be modified. This is a tedious solution and certainly not suitable for medium to large dynamic sites.

The guys at URLRewriter.NET have made a very useful URL Rewriting component . The best thing about it is that it is very simple to implement and it works in a shared hosting environment. All you have to do is download the dll file and copy it to your bin directory. Add a few lines in your web.config file as follows.


requirePermission="false"

type="Intelligencia.UrlRewriter.Configuration.RewriterConfigurationSectionHandler, Intelligencia.UrlRewriter" />

Now you will have to define the rules in your web.config file

An example of a rule is as follows

According to the the first rule “~/Products/Monitors.aspx” will be rewritten as “~/ListProducts.aspx?Category=Monitors”
According to the second rule “~/Products/Monitors/3-Samsung940BW.aspx” will be rewritten as “~/ShowProduct.aspx?ProductName=Samsung940BW&ProductID=3”

Thus now you can use the friendly URLS instead of the URLs with query strings. It’s simple as that !

After using URLRewrite.NET , I had noticed a major bug. The bug is not in the component but with ASP.NET URL rewriting itself. All the pages using URL Rewriting do not get indexed by Google, this happens for both the built in URL rewriting and URLRewriter.NET component. Google bots cannot crawl pages which use Rewriting. It gives an error “Network unreachable” . This is a major problem for websites which depend on search engine traffic and almost all websites do.

After searching around a lot , I found a solution . The solution is to create a file name “genericmozilla5.browser” under the “App_Browsers” Directory in your root directory. Type in the following in the file

This solved the problem for me.

Update :
Also check my post on fixing postbacks while using URLRewriter.net

Basic SEO tips

Vihutuo — Mon, 25 Aug 2008 19:22:18 +0000

Here are a few basic tips for on page search engine optimisation that i try to implement in all my websites.

1. The page title gets top priority. It should be short. Only your main keywords should be in the title. Eliminated all unwanted words. Replace the word “and” with | so that you can save some characters. For example ” Read funny jokes here ” can be replaced with just “Funny jokes”. Stuffing too many keywords in the title can be counter productive. Keep only your main keywords there.

2. After the title , in the page content , the first line should be the heading of the page enclosed in

tags. Be sure to put one keyword in your heading too. Next you can have a sub heading

where you can place another keyword. In the content of the page you can bold and italicize some of the keywords that you are aiming for. Do not overdo it however.

3. Have an alt attribute for all your image tags. You can put another keyword in the alt attribute of the image too. Again keep the alt text short.

4. At last in the footer of your page, end it with another keyword !
Copyright © Funny Jokes everyday.

5. Use Meta tags . the META description is important as the META description appears just below the link to your website when someone does a Google search. If you do not include a META description Google selects some text frm your content and displays it which most of the time is not satisfactory . People are going to read the description and decide whether to click the link to your website or not. So make sure your description contains useful info which will encourage the users to click on your link. The length of the META description should be around 120 -180 characters.

Using MySQL in ASP.NET

Vihutuo — Mon, 25 Aug 2008 18:57:08 +0000

Most web hosts provide more mySQL databases than SQl Server 2005 database. To keep your hosting costs low , you might need to use MySQL in your projects.

To connect to MySQL database
First download the drivers here
Then copy MySql.Data .dll and MySql.Web.dll to your bin directory

The connection string is as follows
providerName="MySql.Data.MySqlClient" />

The MySQl Connector 5.2 has built in support for membership provider too. So from inside Visual Studio you can use the ASP.NET configuration to automatically generate the membership schema