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
  8. Do You Know Which NuGet Packages To Add To Your New MVC Project?

    ​​When you create a new MVC project in Visual Studio it is important to include the right NuGet packages from the start. This makes the project more manageable and you become more efficient in producing your final result.

    ​If you add old, obsolete or incorrect NuGet packages, the project will suffer and you might have decreased performance or scope creep as new requirements are discovered. 

    Avoid old technologies such as:

    • ​​MVC Web Forms
    • KnockoutJS
    When you create a project you should be adding the following NuGet Packages:
  9. Do you use the best Web UI libraries?

    ​​Don't waste time evaluating which Web UI libraries to use. Most of the commonly used libraries are very similar in functionality​. ​The recommend​ library is Twitter Bootstrap.

    It's the most popular available framework today, which means more people involved in the project, more tutorials and articles from the community, more real-world examples/websites, more third-party extensions, and better integration with other​ web development products

    zurb.png
    Figure: Bad example - Zurb Foundation is the second most popular, but it uses Sass files and​ has the worst name

    In VS 2013 Zurb Foundation was always out of date on Nuget. So if you use it (which is not recommended) download it direct from ​Github.​​ 

    In VS 2015 these packages were moved from N​uget to Bower. 

    bootstrap.png
    Figure: Good example - leader among frameworks today, Bootstrap toolkit is recommended to build​ successful websites

    The 3 things a developer need to know to get up and running quickly with ASP.NET MVC

     

    Twitter Bootstrap & ASP.NET MVC ​​​​- Intro / Quickstart

     

    ​Other useful frameworks​

    Now that you saved a lot of UI develo​pment time by using Bootstrap, you can play around with other useful frameworks.​

    • KendoUI for enhanced HTML and jQuery controls
    • KnockoutJS for view-model data binding
    • SignalR for real-time web functionality​