C++ C++ C# C# ASP.NET Security ASP.NET Security ASM ASM Скачать Скачать Поиск Поиск Хостинг Хостинг  
  Программа для работы с LPT портом...
Язык: .NET — ©Alexey...
  "ASP.NET Atlas" – AJAX в исполнении Micro...
Язык: .NET — ©legigor@mail.ru...
  "Невытесняющая" Многопоточность...
Язык: C/C++ — ©...
  Update World C++: Сборник GPL QT исходников
  Весь сайт целиком можно загрузить по ссылкам из раздела Скачать
Дебетовая карта Home Credit [CPS] RU

 A .NET server control to help you construct your web page / Custom Controls / ASP. NET


When working with multi-page web applications, it is usually required that all pages within the application have the same look and feel. This is because consistency makes the application easier to use and sometimes easier to develop. At my company, the Internet Division has over 60 people working on various web applications, we use a lot of different tools (J2EE, .NET, ASP, etc.). We pay much more attention to functionality than to cool visual effects. One day, the upper management decided that our applications were not interesting or attractive for our customers. They hired some outside consultants to redesign our main website and demanded that all new and existing applications shall have the same look and feel.

This was a monumental task considering the number of pages we had to work on. The outside consultants only wrote some static HTML pages, we were supposed to make all of our dynamic pages in various applications look like the new static pages. The most difficult part was, the new static HTML pages we were trying to imitate were not final (the consultants were actively working on them at the time).

For .NET applications, we first tried to build a custom user control to solve the problem. This approach worked fine for one or two applications. As we went further, we discovered that our approach lacked flexibility. Some of our applications were too complicated to use the same user control. We ended up building different versions of the user control for different applications. If there is a significant change in our main website, we will have to update the user control in each project and regression test all of them.

I studied the structures of the new HTML pages produced by the consultants and found a much better and simpler approach to this problem. I redesigned several .NET applications using the new method. The new way drastically reduced development and testing time, and the best part is, it will be a lot easier to make minor adjustments or major changes in the future.

The main part of my work was building a .NET server control library. This library can be used in all of our .NET applications. I also made a COM component with similar features so that our old ASP applications can have the new look and feel without going through major reconstruction. I have worked on a generic version of my library, which is the subject of this article.

The .NET Server Control Library

When using a .NET user control, you have to compile the source code of the user control into your project. With .NET server controls, all you need to do is reference the binary code (the DLL) of the server control library in your project. My server control library is implemented in file WebLookFeel.dll, it has a utility class GlobalData and two server controls: one is LFTopLeft, the other LFBottomRight. The two controls must be used together on the same web page. You can customize the toolbox in Visual Studio .NET so that these two controls can be dragged/dropped onto any web form in your ASP.NET application.

The basic idea is, many areas on a web page, such as the top navigation bar, the navigation tabs, the foot note, and the sidebar, do not change or change very little from page to page. My server controls cut the web page into nine different areas using a nested table structure. When designing a web page with this component, you insert the LFTopLeft control into the web form first, then insert the LFBottomRight control. All other content of the page should be located between these two controls.

The picture on the left illustrates the basic idea. The Top area of the page can contain some flashy graphics or fancy navigation objects. The Bottom area typically has the copyright notice and link to the home page of the website. The Left and the Right areas are for sidebars, clicking each item on the sidebar will dropdown a list, display a menu, or lead you to a different page in this or some other application. The InnerTop, InnerBottom, InnerLeft, and InnerRight areas can be utilized similarly. As you will see later, all of these areas are optional on a web page (none of them is required).

The central area is specific to the current page. This is the part that goes between the LFTopLeft control and the LFBottomRight control on your web form.

Now you may ask, what if my page looks differently than this? For example, I don't need any sidebar on the left and no foot note on the bottom. Let me first explain where the contents of various areas on the web page come from. As I said earlier, the content of the central area comes from the current web form, which is whatever you put between the LFTopLeft control and the LFBottomRight control.

The contents of the other eight areas come from text files. Yes, you heard it right, text files. Here are the names of the eight text files:

  • WebTop.txt
  • WebBottom.txt
  • WebLeft.txt
  • WebRight.txt
  • WebInnerTop.txt
  • WebInnerBottom.txt
  • WebInnerLeft.txt
  • WebInnerRight.txt

These files are shared by all pages in the application and they can be shared among different applications. The contents of these files can be any HTML text and script that you can put inside a table cell (i.e. between <td> and </td> tags). Yes, each of these areas on the web page is just a plain table cell! Here is a simple example of the text file for the Top area (WebTop.txt):

<h2>HelloWorldHelper®, A Guide To Build A "Hello, World" Application</h2>

Now, back to the original question, if you don't need one of the areas on the page, all you have to do is delete or rename the text file for the corresponding area. Please note that there will be no visible borders between various areas on the page, the borders in the above picture are just for your convenience.

What I did with the redesign of my projects is simply copy various HTML text and script into the corresponding text files. My server controls will read these text files and construct the web page at run-time according to the partition in the above picture. Since these text files are shared, all of my pages will look exactly the same. When the required look and feel for the page changes, most of the time, I need only to modify one of the text files, no recompiling and only minimum testing is needed.

Code Samples

But you won't be convinced that this is a good approach without me demonstrating how little effort you have to make to achieve the result. After all, text files are too simple and too boring to be associated with a good solution. Here is what you need to do to use the server control library:

  1. Add WebLookFeel.dll to your toolbox. Just right-click the toolbox in Visual Studio .NET and select the "Customize" menu, then browse and open the DLL file. From now on, the LFTopLeft and LFBottomRight controls will appear on the toolbox. This step needs to be done only once for each development machine.
  2. Reference the above DLL in each project that uses the library. Otherwise, you won't be able to execute code in the DLL.
  3. Create some of the eight text files and place them into your project directory. You need only to create files corresponding to the areas you want. Make sure you use the correct file names.
  4. Drag LFTopLeft and LFBottomRight controls onto each web form in your application.
  5. Add the following line of code to the Application_Start handler in Global.asax.

That's it. Now, all your web pages will look identical.

Please note that the above line of code will only be executed once during the life of the web application. It loads the content of each text file into a string and stores the string in a global hashtable for later use. For debugging purposes, you can put this line of code in the Page_Load handler of each web page so that you don't have to restart IIS after changing one of the eight text files.

One thing you have to watch out for is that the contents of the eight text files should be valid HTML or script elements, there must not be any dangling </td>, </tr>, and </table> tags, otherwise, it will mess up the table structure and your page will not look right.

LoadGlobalData is a public static method of the utility class GlobalData. The input string of this method is the full path of the folder where the text files are stored. Therefore, these text files do not have to be in the application directory, they can be, for example, in a directory that is shared with other applications.

More Features

Is it possible to have dynamical content in one of the eight areas on the web page? Yes. When these two server controls are inserted into your web form, you will have two server variables declared in your web page class. One of the variables, say oTopLeft, is of type LFTopLeft, the other, say oBottomRight, is of type LFBottomRight. You can call the method SetTopLeft of oTopLeft or the method SetBottomRight of oBottomRight to dynamically change the contents of the eight areas on your web page. Here is the signature of SetTopLeft.

public void SetTopLeft(string sTop, string sLeft, 
    string sInnerTop, string sInnerLeft);

The above method is responsible for changing four areas (the top left areas) on the web page, as you can guess from the parameter names. When calling this method, if null is passed for some parameters, then the corresponding areas on the web page won't be changed.

Let's say, for one of the pages, you want the left sidebar to be determined by HTML text in a different file (other than the default file WebLeft.txt). You need to add the following code in your Page_Load handler.

oTopLeft.SetTopLeft(null, WebLookFeel.GlobalData.LoadFile("c:\MyDir\MyLeft.txt"), 
                                                                  null, null);

LoadFile in the above code is another public static method in utility class GlobalData, it reads the content of the file with given path into a string. Note that we passed null for other parameters to indicate that we do not wish to change the other three areas.

To change the other four areas (the bottom right areas) on the web page, you need to call the SetBottomRight method of the class LFBottomRight. Here is the signature:

public void SetBottomRight(string sBottom, string sRight, 
                      string sInnerBottom, string sInnerRight);

Suppose you want the InnerBottom area to be a link to another page, say Accout.aspx, and you also want to add a query parameter AccountID to that link dynamically. Here is the sample code in the Page_Load handler to do this.

string sID = GetAccountID(sUserName);
string sLink = "<a href=%22Account.aspx?AccountID=@ID/">Go to my account";
sLink = sLink.Replace("@ID", HttpUtility.UrlEncode(sID));
oBottomRight.SetBottomRight(null, null, sLink, null);

When the current web page is displayed, the link to Account.aspx will have the current user's account ID attached so that the code for the Account.aspx page can accurately access the user's account data.

How do I change sizes for the various areas on my page? When resizing your page, the sizes of the nine areas on the page will change accordingly. What if you want to have a fixed size for the left sidebar or a fixed height for the foot note? That is easy, you just put the content of the area inside a table of the desired size and save it into the corresponding text file.

Can I have Unicode characters in the eight text files? Yes. These text files can be either ASCII or Unicode files. For Unicode files, the first character is the byte order mark, 0xFEFF for small-endian (PC) and 0xFFFE for big-endian (MAC). UTF-8 is not supported at this time.

Is there a size limitation on the text files? Yes and no. The GlobalData class has a public static member m_nMaxFileSize with default value 64k (bytes). If one of the eight text files is bigger than 64k bytes, you need to increase the value of this variable.

How do I partition the web page differently? You can modify the server control library to add other controls that partition the web page exactly the way you want. For example, you can divide the web page into 5 or 20 different areas instead of 9. But in many cases, it might be simpler to manipulate the HTML in the text files to get what you want.


This is a simple component based on a simple idea. It is not going to meet all people needs, of course. However, it has served me well in the past.

There is one limitation with this approach. You cannot have other .NET server controls on your web page except in the central area. This is because the contents of other areas are read from text files and spit out at runtime by the LFTopLeft and LFBottomRight controls. This is the most significant limitation I know, I am sure the readers will find other limitations or solutions.

Thank you for reading my article.

Дебетовая карта Home Credit [CPS] RU