Vítejte na blog.vyvojar.cz Přihlásit | Registrovat | Pomoc
Titulní Blogy Fotky Soubory


Electronic banking system-like application 'from scratch' (Part I)

I work in a company that makes an electronic banking system for one bank (in ASP.NET and C# using MS SQL Server and Oracle as backends). The system is enormously large and the more I work on it the more ideas I have of how to do things better or in other ways (it's normal when you work on anything for some time I'd guess). On the other hand the visual part of the system is quite appealing. E.g. the payment order screen looks like that (the image is blurred intentionally):

So I've decided to take up a completely new project that would do the things in the software better (but would not of course cover the whole system).
My premises are as follows:

    the server side:
  • the clear and maintainable code
  • maximum use of the MS standard features (Membership Provider, Role Provider, Site Map Provider, .NET localization features, standard controls, etc.):
    try not to reinvent the wheel
  • use of MS latest technologies (LINQ, Entity Framework)
  • possible use of F#
  • possible use of VS2010 with .NET 4.0
  • extensive testing (both unit and web)
  • constant refactoring and refinement
    the client side:
  • neat HTML markup
  • minimalization of the server-client traffic
  • use of AJAX requests and JSON and the client-side templating
  • use of the jQuery javascript library
  • using agile programming approach, successive development
However there are some points I know little or nothing about, I'll have to learn much as the development proceeds.

So where to start?

It's been a longer time ago I come across the ScottGu's blog entry Data Tutorial #2: Building our Master Page and Site Navigation Structure and I found a tiny ASP.NET site sample there that looked like this:

You can download the sample DALWalkthrough.

The menu is quite pretty and uses the Site Map Provider that is standard MS technology. The source data is located in the web.sitemap file that looks like this:

The menu markup takes advantage of two nested repeaters producing the html unordered lists:

This access can serve well in this small sample site but there must be a huge makeover if I want to build a more robust solution:
  1. There are Site Map - bound controls like Menu and TreeView control in the ASP.NET - I can try to use on of them.
    Alternatively I can make a simple custom server Site Map - bound control that can ensure this task.
  2. The web.sitemap xml is not very flexible (because of localization, authorization etc.). The data should be located in the database in the future.
  3. There should be some client-side dynamic features (e.g.: the menu should behave like the AJAX accordeon control).

Using the standard Menu control in the sample web site

The output after some small changes in the stylesheets looks very similar to the original sample:

I added 2 lines to the stylesheet.css file:

#navigation li a:link, #navigation li a:visited,
#navigation tr tr a:link, #navigation tr tr a:visited {


#navigation ul ul a:link, #navigation ul ul a:visited,
#navigation tr tr tr tr a:link, #navigation tr tr tr tr a:visited {

the added lines are the lines in italics (the ones with the enormous counts of trs). The Menu control produces the style names of its own, but I chose this way for simplicity :-).
There's a huge bunch of properties that can be customized - you'll spent a lot of sleepless nights if you want to be an expert on the ASP.NET Menu control (It has 80 public properties and 21 publuc methods I've just counted them!). You can read about the Menu control e.g. here.
The worse case is the produced html markup, the markup of the original repeater implementation looks like this (after reformatting):

<div id="navigation">
        <li><a href="default.aspx">Home</a></li>
        <li><a href='/DALWalkthrough_CS/Samples_Basic/BasicSamples.aspx'>Basic Data Samples</a>
                <li><a href='/DALWalkthrough_CS/Samples_Basic/Sample1.aspx'>Samples 1</a></li>
                <li><a href='/DALWalkthrough_CS/Samples_Basic/Sample2.aspx'>Samples 1</a></li>
                <li><a href='/DALWalkthrough_CS/Samples_Basic/Sample3.aspx'>Samples 1</a></li>
                <li><a href='/DALWalkthrough_CS/Samples_Basic/Sample4.aspx'>Samples 1</a></li>
        <li><a href='/DALWalkthrough_CS/Samples_Advanced/AdvancedSamples.aspx'>Advanced Data
                <li><a href='/DALWalkthrough_CS/Samples_Advanced/Sample1.aspx'>Samples 1</a></li>
                <li><a href='/DALWalkthrough_CS/Samples_Advanced/Sample2.aspx'>Samples 1</a></li>
                <li><a href='/DALWalkthrough_CS/Samples_Advanced/Sample3.aspx'>Samples 1</a></li>
        <li><a href='/DALWalkthrough_CS/About.aspx'>About</a>

and has 21 lines. On the other hand the produced html markup of the ASP.NET Menu implementation looks like that (not reformatted):

            <div id="navigation">
                            <a href="#ctl00_Menu1_SkipLink"><img alt="Skip Navigation Links" src="http://blog.vyvojar.cz/DALWalkthrough_CS/WebResource.axd?d=mYeZF_dTQ8VfAzb7ucj3PA2&amp;t=633689156761950666" width="0" height="0" style="border-width:0px;" /></a><table id="ctl00_Menu1" class="ctl00_Menu1_2" cellpadding="0" cellspacing="0" border="0">
    <tr onmouseover="Menu_HoverRoot(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Home" id="ctl00_Menu1n0">
        <td><table cellpadding="0" cellspacing="0" border="0" width="100%">
                <td style="white-space:nowrap;width:100%;"><a class="ctl00_Menu1_1" href="http://blog.vyvojar.cz/DALWalkthrough_CS/Default.aspx">Home</a></td>

        ... to be continued


<div id="navigation">
    <a href="#ctl00_Menu1_SkipLink">
        <img alt="Skip Navigation Links" src="http://blog.vyvojar.cz/DALWalkthrough_CS/WebResource.axd?d=mYeZF_dTQ8VfAzb7ucj3PA2&amp;t=633689156761950666" width="0" height="0" style="border-width: 0px;" /></a>
            <table id="ctl00_Menu1" class="ctl00_Menu1_2" cellpadding="0" cellspacing="0" border="0">
                <tr onmouseover="Menu_HoverRoot(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)"
                    title="Home" id="ctl00_Menu1n0">
                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                <td style="white-space: nowrap; width: 100%;">
                                    <a class="ctl00_Menu1_1" href="http://blog.vyvojar.cz/DALWalkthrough_CS/Default.aspx">Home</a>
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr onmouseover="Menu_HoverRoot(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)"
                                title="Basic Data Samples" id="ctl00_Menu1n1">

       ... to be continued

and has 165 lines of code - what a difference! Moreover the nested list implementation is much more flexible than the table implementation.

There is a solution: adaptive rendering!

A longer time ago MS launched so called CSS friendly control adapters (now it can be found on Codeplex). The last update of it is more than 2 years old. The idea behind it is that the ASP.NET controls should be rendered for various devices in different ways so you can easily change the rendering for the standard browsers as well. Menu Control Adapter: ASP.NET 2.0 CSS Friendly Control Adapters 1.0  describes the rendering of the menu control. So I can easily take advantage of the MS CSS friendly control adapters by downloading and referencing the CSSFriendly.dll file and downloading the CSSFriendlyAdapters.browser file and putting it into the ASP.NET App_browsers folder. The resulting html output looks like this:

<div id="navigation">
    <div class="AspNet-Menu-Vertical" id="ctl00_Menu1">
        <ul class="AspNet-Menu">
            <li class="AspNet-Menu-WithChildren  AspNet-Menu-Selected"><a href="http://blog.vyvojar.cz/DALWalkthrough_CS/Default.aspx"
                class="AspNet-Menu-Link  AspNet-Menu-Selected" title="Home">Home</a>
                    <li class="AspNet-Menu-WithChildren  AspNet-Menu-ParentSelected"><a href="http://blog.vyvojar.cz/DALWalkthrough_CS/Samples_Basic/BasicSamples.aspx"
                        class="AspNet-Menu-Link  AspNet-Menu-ParentSelected" title="Basic Data Samples">
                        Basic Data Samples</a>
                            <li class="AspNet-Menu-Leaf  AspNet-Menu-ParentSelected"><a href="http://blog.vyvojar.cz/DALWalkthrough_CS/Samples_Basic/Sample1.aspx"
                                class="AspNet-Menu-Link  AspNet-Menu-ParentSelected" title="Samples 1">Samples 1</a>
                            <li class="AspNet-Menu-Leaf  AspNet-Menu-ParentSelected"><a href="http://blog.vyvojar.cz/DALWalkthrough_CS/Samples_Basic/Sample2.aspx"
                                class="AspNet-Menu-Link  AspNet-Menu-ParentSelected" title="Samples 2">Samples 1</a>
                            <li class="AspNet-Menu-Leaf  AspNet-Menu-ParentSelected"><a href="http://blog.vyvojar.cz/DALWalkthrough_CS/Samples_Basic/Sample3.aspx"
                                class="AspNet-Menu-Link  AspNet-Menu-ParentSelected" title="Samples 3">Samples 1</a>

       ... to be continued

the change is evident and the output is by no means not bad but there is a strange style definition that address no styles in the rendered menu at the beginning of the page:

<style type="text/css">
    .ctl00_Menu1_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
    .ctl00_Menu1_1 { text-decoration:none; }
    .ctl00_Menu1_2 {  }


the problem is described in this forum entry, but the worse thing is that the MenuAdapter beside two javascript files
adds two extra stylesheets to the page that override the styles from the original stylesheet and don't take into account that the menu was defined as static. The menu then looks like this:


It's of course possible to re-style it, but there's too much styles there don't you think?

The next thing we can do is to add the CSS Friendly Control adapters sources to our project and play a bit with them. The first attempt is much better than expected:

The redundant styles in the header are still there as well as javascripts but the stylesheets vanished so the menu can easily be styled. That means that the CSSFriendly.dll version is differnet than the latest sources. The html output is at the first look probalby the same. By applying the hack described in CSS Friendly Control Adapters: Item # 2714 we can even get rid of the boring redundant styles in the header!

...to be contineud

Zveřejněno 16. července 2009 10:14 by janmeis
Vedeno pod:


Žádné komentáře
Neregistrovaní uživatele nemužou přidávat komentáře.
Powered by Community Server (Personal Edition), by Telligent Systems
Vyvojar.cz na prodej!