Home / Websites / Rules to Better Website Development - ASP.NET

Rules to Better Website Development - ASP.NET

Hold on a second! How would you like to view this content?
Just the title! A brief blurb! Gimme everything!
  1. Do you know how to create nice URLs using ASP.NET 4?

    There are a lot of reasons to have nice URLs for your website:
    • Easy to remember
    • Easy to navigate 
    • Better for search engines
    Bad example – This URL is impossible to remember for your users, and even search don’t like these URLs
    Figure: Bad example – This URL is impossible to remember for your users, and even search don’t like these URLs
    Good example – Nice clean URL, easy to remember, easy to guess where I am and good for search engines
    Figure: Good example – Nice clean URL, easy to remember, easy to guess where I am and good for search engines

    With ASP.NET 4 it is easy to create this URLs. The ASP.NET team includes routing features, known from the MVC web framework.
    Add a route in Global.asax

    protected void Application_Start(object sender, EventArgs e)
    {
    //RouteTable and PageRouteHandler are in System.Web.Routing
    RouteTable.Routes.Add("ProductRoute",
    new Route("products/{productname}",
    new PageRouteHandler("~/ssw/Products/ProdCategoryList.aspx")));
    }​
    Figure: Example on how to route www.ssw.com.au/products/{everything} to the www.ssw.com.au/ssw/Products/ProdCategoryList.aspx page

    Note: There is no dependency on the MVC framework in order to use this code.
    Note: IIS7 has a module called URL rewrite module that can do this functionality without changing any code. Just a configuration of a "Rule" in the IIS Manager.

  2. Do you know how to filter data?

    It is difficult for users to find their required records in a huge amount of data, so adding the filter data functionalities is very useful. 

    The standard DataGrid of ASP.NET doesn't include this functionality, developers need to implement it by themselves.

    Bad Example - implement data filter manually
    Figure: Bad Example - implement data filter manually

    Fortunately, RadGrid supplies this perfect feature.

    Good Example - add an attribute to filter data
    Figure: Good Example - add an attribute to filter data

    Developer can turn this feature on by setting the AllowFilteringByColumn="True".

  3. Do you use jQuery for making a site come alive?

    To please customers every business knows they need to keep their services and offerings fresh and up-to-date. The same is true for websites. In order to attract new traffic, we should make the website vivid.
    Bad example – there is no response when mouse is over the image
    Figure: Bad example – there is no response when mouse is over the image
    Good example – apply the different style when mouse is over
    Figure: Good example – apply the different style when mouse is over
            
            $("p").hover(function () {
                $(this).css({ "background-color":"yellow", "font-weight":"bolder" }); },
                function () { 
                    var cssObj = { "background-color": "#ddd", 
                    "font-weight": "", 
                    color: "rgb(0,40,244)"
                }
                $(this).css(cssObj);
            }); 
        
    Figure: Mouse hover sample
  4. Do you use jQuery Tooltips to save drilling through?

    It is common when we browse a list page, we have to click the "More..." or "Details" button to view the item detail. This process takes more time because we need to wait for the loading of the detail page.

    To improve the performance, we can use jQuery plus CSS to show tooltips in the list page that can let users determine which item detail they want to see.
    Bad Example - redirect to a new page to view the detail
    Figure: Bad Example - redirect to a new page to view the detail
    Good Example - show tooltip when mouse is over in the list
    Figure: Good Example - show tooltip when mouse is over in the list
  5. Do you use MSAjax for Live Data Binding which saves round trips?

    In old versions of ASP.NET AJAX the UI control couldn't get notification if the source had been changed. Developers had to write the extra code to refresh the value.

    In ASP.NET AJAX version 4.0, there is a new feature called "Live Data Binding", which means when there's any change in the data source, the changes are reflected to the data bound interface instantly and vice versa. 
    Binding Modes:
    • Sys.BindingMode.auto
      This is the default binding mode. Two-way binding on an input control, and one-way binding on a context-type elements such as spans.
      <b>Name: </b><input id="name" type="text" value="{binding name, mode=auto}" />
      <b>Echo: </b><span id="nameDisplay">{binding name, mode=auto}</span>
              
      Figure: When you update either textbox, the other one will be updated with the same value.
    • Sys.BindingMode.twoWay
      This is the default binding mode for input controls.
      <b>Name: </b><input id="name" type="text" value="{binding name, mode=twoWay}" />
      <b>Echo: </b><span id="nameDisplay">{binding name, mode=twoWay}</span>
              
      Figure: When you update either textbox, the other one will be updated with the same value.
    • Sys.BindingMode.oneWay 
      <b>Name: </b><input id="name" type="text" value="{binding name, mode=oneWay}" />
      <b>Echo: </b><span id="nameDisplay">{binding name, mode=twoWay}</span>
              
      Figure: When you update the Name, it won't affect the Echo.
    • Sys.BindingMode.oneWayToSource
      <b>Name: </b><input id="name" type="text" value="{binding name}" />
      <b>Echo: </b><span id="nameDisplay">{binding name, mode=oneWayToSource}</span>
              
      Figure: When you update the Name, it won't affect the Echo. But if you update Echo, it will affect the Name.
    • Sys.BindingMode.oneTime
      <b>Name: </b><input id="name" type="text" value="{binding name, mode=twoWay}" />
      <b>Echo: </b><span id="nameDisplay">{binding name, mode=oneTime}</span>
              
      Figure: When you update the Name in the first time, it will affect the Echo. After the first time, it won't affect the Echo.
    The live-binding syntax is similar to binding syntax in WPF (XAML).
  6. Do you know that or sections in web.config must contain a or a element?

    If web.config contains a <httpHandlers> or <httpModules> section, that section must contain a <remove... /> or a <clear /> element.

    This basically forces developers to explicitly enable inheritance in nested virtual directories. In 99% of cases this developers won't use inheritance on these two sections, however it causes issues when somebody wants to add a module or handler to the parent virtual directory.

    <configuration>
       <system.web>
          <httpHandlers>
             <add verb="*" 
                  path="*.New" 
                  type="MyHandler.New,MyHandler"/>
             <add verb="GET,HEAD" 
                  path="*.MyNewFileExtension" 
                  type="MyHandler.MNFEHandler,MyHandler.dll"/>
         </httpHandlers>
       <system.web>
    </configuration>
    
    Figure: Bad example
    <configuration>
       <system.web>
          <httpHandlers>
             <clear/>
             <add verb="*" 
                  path="*.New" 
                  type="MyHandler.New,MyHandler"/>
             <add verb="GET,HEAD" 
                  path="*.MyNewFileExtension" 
                  type="MyHandler.MNFEHandler,MyHandler.dll"/>
         </httpHandlers>
       <system.web>
    <configuration>
    
    Figure: Good example
  7. Do you keep your website loading time acceptable?

    Nobody Likes a Slow Website. You should optimize the performance of your websites so it loads as quick as possible.

    You should use Pingdom Website Speed Test​​​ to analyze the load speed of your websites and learn how to make them faster.

    Then work to k​eep it under 3 MB:

    • Unacceptable > 3 MB​​
    • OK 1.5 MB to 3 MB (apple.com is 1.5MB)
    • Good < 1.5 MB​
    • Excellent < 1 MB