ASP.NET 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;
}

No related posts.

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")

No related posts.

Get the IP Address and Referer of a visitor

Vihutuo — Fri, 05 Dec 2008 06:24:11 +0000

Here is the code snippet to obtain the IP Address and Referer of a visitor to your website
Dim IPAddress=Request.ServerVariables("REMOTE_ADDR") Dim Referer=Request.ServerVariables("HTTP_REFERER")

Check a demo here

Check my IP

No related posts.

ASP.NET Can Benefit Your Business?

Vihutuo — Sat, 15 Nov 2008 18:09:25 +0000

In Today’s competitive environment, ASP.NET development plays an important role in web application development. Many software and web design companies are using ASP.NET to develop the feature rich and light weight web applications for businesses. Why? Because it’s robust and has powerful functions that allow for even the most challenging projects.

Experienced programmers can use ASP.NET to create dynamic web applications and web site services. This can be anything from the small to large web site application. ASP.NET includes a huge library of classes that contains pre-defined functions for common issues. So if you are developing a website and want to incorporate the newest and exciting technologies to it then these pre-defined functions will save you many hours.

If you are a business owner and you use a web design service to maintain your website, then by using ASP.NET on your website will give you the competitive edge over the others. If you are not too familiar with the language, that’s fine, because it’s easy to learn and there are lots of resources on the Web that can help you. The only thing you need to know now is that it’s a robust and powerful scripting language. I will explain more about how it works below.

You know HTML already, you are ahead of a lot of people. ASP.NET is like HTML; when a user requests the file from the Web, the server load the file and the browser display it – simple as that. With ASP.NET it’s slightly different, when a browser requests an ASP.NET file, the request is sent to the ASP.NET engine and then it interpret the file before sending it to the user’s browser. By the time it reach the user’s machine, it’s just a plain HMTL file, which is why the source code will always be HTML.

The reason that ASP.NET is called dynamic language is because it can be used to deal with the database and pull and store variables in there, which means pages can be generated on the fly and data can be calculated before it leaves the sever. There are many things you can do with ASP.NET. For example, adding a poll to your website; adding a live news section that updates every 2 minutes; to display different content for different type of users; creating a member’s only section for paid customers..etc The list goes on and on. The truth is, if you think of it, you can most likely do it with ASP.NET.

ASP.Net Developer vs. PHP Developer The world of web design and development language is dominated...

Related posts brought to you by Yet Another Related Posts Plugin.

WidgetBucks $25 sign up bonus is back

Vihutuo — Thu, 30 Oct 2008 07:20:43 +0000

If you are looking to monetize your website and haven’t signed up with widgetbucks yet, It’s a good time now, as they are giving out a $25 sign up bonus . Widgetbucks is an ad network which pays in both CPC (per click) and CPM (per 1000 impression) basis. The payout is low at $50 and payment is through paypal. The ads are pretty, well designed and can give your dull blogs a colourful new life besides the handsome CPM rates. However widgetbucks seems best if your website primary targets US visitors, for non US visitors the rates seems to be less than average. However, try it for yourself and take home $25 too. Sign up here

No related posts.

Replace “\n” with “”

Vihutuo — Tue, 28 Oct 2008 18:07:40 +0000

There are lot of times we accept user input in a textarea or a multiline textbox and save it to a database. But while displaying the data from the database, you will find that the line breaks are not displayed properly, infact there will be no line breaks. We will need to convert all the new line characters (”\n” character) to “
” so that they are properly rendered in the browser. There seems to be quite a few ways to do it but the simplest method which always worked for me is as follows. Just pass the string to the the function and it will format the string properly so that the new line characters are replaced with “
” tags
Public Shared Function ConvertToBR(ByVal InputString As String) As String Dim Pattern As String = "\n" Dim Rgx As New Regex(Pattern) Dim OutputString As String=Rgx.Replace(InputString, " ") Return OutputString End Function

No related posts.

Efficient Search Engine Friendly Gridview Paging control

Vihutuo — Thu, 16 Oct 2008 08:51:26 +0000

The Gridview Control in ASP.NET has built in paging support. But here are a few disadvantages of using the built in paging

It fetches all the records from the database even when we need only 10 records per page. This is quite inefficient when your tables have thousands of records
The paging controls uses javascript which makes the pages inaccessible to search engine.

I looked around the net for solutions to these problems. There were a few solutions and some of them even costs upwards of $100 but the best I found was a free paging control by Bidel Akbari at codeproject

Here are the main features of his paging control

Very easy to install and use.
Uses server side paging so that only the required few rows are returned from the database
Search engine friendly paging. The first version was supposed to use query strings for paging which is the way paging should work. However in the latest version 2.8 , it uses javascript for paging and a hidden div with hyperinks so that search engines can find the inner pages.
You can use the paging control with the Repeater and Datalist controls
There are a variety of properties to change the appearance of the control. He has also made two slick skins for the control

Overall a great and extremely useful control . You can see a demo of the control here in my site freedownloadablefonts.net . You can find more info and download the control here

Enable or disable the delete link in the GridView according to the role of the logged in user In some scenarios you may only want users of a...
Format dates in a Gridview column To format a gridview column to display dates properly ,...

Related posts brought to you by Yet Another Related Posts Plugin.

Free ASP.NET Web Hosting Providers

Vihutuo — Sun, 12 Oct 2008 12:25:56 +0000

There seems to be quite a few people asking whether there are any web hosts providing free asp.net hosting . I did a bit of research and came up with a few good free hosting providers. The good thing about all the free web hosts is that they no longer serve forced ads. A few of them even support SQL Server Express 2005 and almost all of them allow FTP access for easy file transfer. But do remember that all them will require that you have a domain name. Domain name can be registered at Godaddy.com or any registrar that you prefer.

Host	Space	Bandwidth	.NET Version	Database	Comments
ChristianASP	250 MB	2,000 MB	3.5	SQL Express 2005	No catch. Free web hosting
ASPSpider	100 MB	2,500 MB	3.5	SQL Express 2005	Limited Numbers
Laneware	30 MB	2,500 MB	3.5	MS Access	Accounts automatically disabled after 4 months
ASPHost4Free	100 MB	Unlimited	ASP	MS Access	Only ASP for now. But .Net Beta hosting is out now
Quantasoft	100 MB	2,000 MB	3.5	SQL Express 2005	Good features

If anyone knows any more good free asp.net web hosting solutions , we may add them to the list.
Also if you are looking for paid asp.net web hosting, you may want to take a look at our sponsors Lunarpages Web Hosting . They are providing one free domain and 3 month of free hosting

No related posts.

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

Replace “n” with “
” There are lot of times we accept user input in...

Related posts brought to you by Yet Another Related Posts Plugin.

Check Page Rank of all pages of a website quickly

Vihutuo — Wed, 08 Oct 2008 12:42:45 +0000

The most recent Google Page Rank (PR) update happened some days ago and most of us might have checked our websites PR using the google toolbar or through the numerous websites which can display PR ( one of my favourites being http://www.digpagerank.com/ ) . Though the PR toolbar and most “check PR” websites can display the PR of individual pages, it is quite cumbersome when you want to know the Page Rank of all the pages in a website . A quick way of finding the PR of all the websites is by using this SEO plugin for firefox . After installing the plugin, and restarting firefox , go to Tools->Add-Ons .. This will list all the add-ons , look for the SEO plugin and click on options. From the options menus for PR select “Automatic” as seen in the screen below

Now go to www.Google.com and in the search box type site:www.yourdomainname
For eg typing site:www.LittleStarDimapur.com gave me the following result

As you can see all the internal pages PR is displayed . The plug-in also has a lot of other options which gives plenty of information like yahoo backlinks, DMOZ listing, etc.

No related posts.