Figure: Bad example – This URL is impossible to remember for your users, and even search don’t like these URLs

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.

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

Figure: Bad Example - implement data filter manually

Fortunately, RadGrid supplies this perfect feature.

Figure: Good Example - add an attribute to filter data

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

Figure: Bad example – there is no response when mouse is over the image

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

Figure: Bad Example - redirect to a new page to view the detail

Figure: Good Example - show tooltip when mouse is over in the list

• 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.