source code bean » Web http://sourcecodebean.com giving you tricks and tips of good coding Sun, 06 Jun 2010 16:40:09 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 First steps toward EPiServer and ASP.NET MVC http://sourcecodebean.com/archives/first-steps-toward-episerver-and-asp-net-mvc/595 http://sourcecodebean.com/archives/first-steps-toward-episerver-and-asp-net-mvc/595#comments Mon, 19 Apr 2010 20:33:38 +0000 Peter http://sourcecodebean.com/?p=595 Recently I started a new assignment at a customer where we are going to build their new public web site and their intranet, both of them based on EPiServer CMS 6. The person leading the project is very found of ASP.NET MVC, so my first task was to experiment with EPiServer and ASP.NET MVC, to try to get a running prototype up.

I did some research online to see what others had done. I found two great posts by Joel Abrahamsson and one from Fabio Fabrizio, who based his solution on Joels experiments.

Joels first attempt was to create a base class from which all Controllers inherited. However, this made the controller do more than it should and made it very hard to test. His second attempt was to create a custom model binder and make every action receive currentPage as a parameter. This approach makes it much easier to create unit tests for the code, since it is now possible to moc the currentPage parameter.

Fabio took a different approach and decided to implement a custom MVC handler and a controller factory. This approach fits very well with MVC and felt like the right way to go, so I decided to create a prototype based on Fabios code. Fabios code was based on EPiServer CMS 5 and ASP.NET MVC 1.0, but I wanted to use EPiServer 6 and ASP.NET MVC 2.0, so I started porting the solution.

Porting the solution to EPiServer 6 and ASP.NET MVC 2.0 required some changes to both code and configuration, which not all of them was trivial. At the moment I have a prototype up running, and it works remarkably well! I will continue my experiments and post my results.

]]> http://sourcecodebean.com/archives/first-steps-toward-episerver-and-asp-net-mvc/595/feed 3 EPiServer friendly URLs for paginated pages (and why the asp:LinkButton must die) http://sourcecodebean.com/archives/episerver-friendly-urls-for-paginated-pages-and-why-the-asplinkbutton-must-die/510 http://sourcecodebean.com/archives/episerver-friendly-urls-for-paginated-pages-and-why-the-asplinkbutton-must-die/510#comments Mon, 15 Mar 2010 06:05:37 +0000 Peter http://sourcecodebean.com/?p=510 Recently I got a request from a customer to perform some search engine optimizing for an old EPiServer site we are maintaining. One of the optimizations was to fix the paging on their product page. The products are fetched from an external data source and are not stored as pages in EPiServer, thus normal EPiServer paging controls can not be used. Image a normal paging control like this:

Prev 1, 2 , 3, …, 99 Next

A fairly normal approach to this would have been to use a query parameter for handling the paging. Like this:

  1. <a href="/products/?page=4">4</a>

By using this approach each page would have a unique entry point, using query strings is however not optimal for SEO, but even worse is using asp:LinkButtons. Whoever created the site had decided to use asp:LinkButtons. LinkButtons are very convenient to work with in ASP.NET, but the HTML code they generate is not very SEO friendly. This is the HTML that was generated:

  1.  
  2. <div id="ctl00_MainContent_pnlPaging">
  3.  
  4.   <a id="ctl00_MainContent_rptPages_ctl00_lbPage"
  5.        href="javascript:__doPostBack(‘ctl00$MainContent$rptPages$ctl00$lbPage’,”)">1</a>
  6.  
  7.   <a id="ctl00_MainContent_rptPages_ctl01_lbPage"
  8.        href="javascript:__doPostBack(‘ctl00$MainContent$rptPages$ctl01$lbPage’,”)">2</a>
  9.  
  10.   <a id="ctl00_MainContent_rptPages_ctl02_lbPage"
  11.        href="javascript:__doPostBack(‘ctl00$MainContent$rptPages$ctl02$lbPage’,”)">3</a>
  12.  
  13.   <a id="ctl00_MainContent_lbNext"
  14.        href="javascript:__doPostBack(‘ctl00$MainContent$lbNext’,”)">Next</a>
  15. </div>
  16.  

We can see that:

  • LinkButtons generates a javascript that is run when the link is clicked, instead of using a normal link
  • Paging is handled using a postback, the pages will no longer have unique entry points.

This is disastrous from a SEO perspective.

So lets fix it. First step is to replace the LinkButtons with normal links (asp:Hyperlink) – and then we are going to do some URL rewrite magic to create SEO-friendly URLs. The code behind was changed to assign links like /products/?page=4.

Now, to get URLs like /products/page/4, we can create a custom url rewrite module in EPiServer. First we create a new class, Rewrite, that inherits from EPiServer.Web.FriendlyUrlRewriteProvider. In this class we override three methods (don’t ask we why they have such confusing names, someone at EPiServer must have been under the influsene of something when nameing them):

  • ConvertToInternalInternal - Used to convert from /product/page/4/ to an internal EPiServer page with the page id as a query parameter
  • ConvertToExternalInternal - Used to convert from an internal EPiServer URL (/PageType.aspx?lotsofqueryparameters=values) to an external (/products/page/4/)
  • ConvertToInternal - Needed to work around URL rewrite caching behaviour in EPiServer, will get into more detail on this later.

This is the class:

  1. namespace Utils
  2. {
  3. public class Rewrite : FriendlyUrlRewriteProvider {
  4.   // The regexp to match a paged url
  5.   string _regexpPaging = @"(.+)/page/([0-9]+)/$";
  6.  
  7.   protected override bool ConvertToInternalInternal(
  8.     UrlBuilder url, ref object internalObject){…}
  9.  
  10.   protected override bool ConvertToExternalInternal(
  11.     UrlBuilder url, object internalObject, Encoding toEncoding){…}
  12.  
  13.   public override bool ConvertToInternal(
  14.     UrlBuilder url, out object internalObject) {…}
  15. }


The first method we implement is the ConvertToInternalInternal which will convert the URL to an internal EPiServer URL.

  1. protected override bool ConvertToInternalInternal(UrlBuilder url, ref object internalObject)
  2. {
  3.   if (url == null)
  4.   {
  5.     return false;
  6.   }
  7.   // Regexp to match if the URL ends with /page/{Id}/
  8.   Match match = Regex.Match(url.Path, _regexpPaging);
  9.  
  10.   // If we have a match, remove the /page/{Id}/ from the end of the URL
  11.   // and add a querystring to the internal URL that is dqcPagingId
  12.   // (should have a unique name to not clash with some other querystring)
  13.   if (match.Length > 0)
  14.   {
  15.     url.Path = match.Groups[1].Value + "/";
  16.     url.QueryCollection["dqcPagingId"] = match.Groups[2].Value;
  17.     base.ConvertToInternalInternal(url, ref internalObject);
  18.     return true;
  19.   }
  20.  
  21.   // Now when the /page/{Id}/ is removed from the URL, and the querystring is added, we can let EPiServer do its normal URL-rewriting.
  22.   return base.ConvertToInternalInternal(url, ref internalObject);
  23. }


While not nessesary, we should override the ConvertToExternalInternal as well. This will let EPiServer automatically convert internal urls containing the dqcPagingId querystring to a external url ending with /page/{Id}/.

  1. protected override bool ConvertToExternalInternal(UrlBuilder url, object internalObject, Encoding toEncoding)
  2. {
  3.    // First let EPiServer convert the internal URL to an external. This will give us a URL like:
  4.    // /Products/?dqcPagingId=5 (if it is a paged page)
  5.    bool isRewritten = base.ConvertToExternalInternal(url, internalObject, toEncoding);
  6.  
  7.     // Check if the URLs query string contains dqcPagingId
  8.     // If it does we add /page/{Id} to the URL and removes the query string
  9.     if (url.Query.Contains("dqcPagingId"))
  10.     {
  11.       url.Path = string.Concat(url.Path, "page/", url.QueryCollection["dqcPagingId"], "/");
  12.       url.QueryCollection.Remove("dqcPagingId");
  13.     }
  14.  
  15.     return isRewritten;
  16. }


Now one can think we would be done, but there is one more method we need to implement. EPiServer uses a cache to cache URL rewrites from external URLs to internal URLs, but it will only cache the querystrings used by EPiServer, not the dqcPagingId we added. This gives a rather unexpected result. The first time the page is loaded everything loads fine, from code behind we can access the dqcPagingId and show the requested page. If you wait 10 senconds (default cache time) or more and reloads the page, it works fine. But if you reload the page sooner, the dqcPagingId will not be set when the page loads. This is because the querystring dqcPagingId is not cached by EPiServer. This took me quite some time to figure out.

The solution to the problem is to override ConvertToInternal to bypass the default caching:

  1. public override bool ConvertToInternal(UrlBuilder url, out object internalObject)
  2. {
  3.  
  4.   // If the URL end on /page/{id}/, bypass cache by calling ConvertToInternalInternal
  5.   // A more optimal solution would be to perform some kind of caching here
  6.   if (Regex.IsMatch(url.Path, _regexpPaging))
  7.   {
  8.     internalObject = null;
  9.     ConvertToInternalInternal(url, ref internalObject);
  10.     return true;
  11.   }
  12.  
  13.   // Else, it is ok to use the cached result
  14.   return base.ConvertToInternal(url, out internalObject);
  15. }
  16.  


The last step is to add our Rewrite module to the web.config:

  1.  
  2.   <providers>
  3.     <add
  4.        name="MyUrlRewriter"
  5.        enableSimpleAddress="true"
  6.        friendlyUrlCacheAbsoluteExpiration="0:0:10"
  7.        type="Utils.Rewrite, Utils"
  8.        description="URL rewriter for paging" />
  9.   </providers>
  10. </urlRewrite>
  11.  


Now we should be all done! Enjoy!

]]> http://sourcecodebean.com/archives/episerver-friendly-urls-for-paginated-pages-and-why-the-asplinkbutton-must-die/510/feed 1 Creating a JSON-RPC service using Zend Json Server http://sourcecodebean.com/archives/creating-a-json-rpc-service-using-zend-json-server/422 http://sourcecodebean.com/archives/creating-a-json-rpc-service-using-zend-json-server/422#comments Thu, 07 Jan 2010 08:11:15 +0000 Peter http://sourcecodebean.com/?p=422 In this post I am going to show how easy it is to create a JSON-RPC web service using the built in support in Zend Framework.

First we need to create the php-file that will handle the incoming RPC calls. It is not advised to put this inside the MVC structure of a Zend web application, since that will lead to unessesary complexity and overhead. The Zend people recommend that we create the JSON-RPC under /public/api/vX/, so lets create the file /public/api/v1/jsonrpc.php (if you haven’t setup your Zend MVC structure, read my blog post Getting started with the zend framework to get started).

We will have to do the regular bootstrapping to get our application up and running:

  1.  
  2. // Define path to application directory
  3. defined(‘APPLICATION_PATH’)
  4.     || define(‘APPLICATION_PATH’, realpath(dirname(__FILE__) . ‘/../../../application’));
  5.  
  6. // Define application environment
  7. defined(‘APPLICATION_ENV’)
  8.     || define(‘APPLICATION_ENV’, (getenv(‘APPLICATION_ENV’) ? getenv(‘APPLICATION_ENV’) : ‘production’));
  9.  
  10. // Ensure library/ is on include_path
  11. set_include_path(implode(PATH_SEPARATOR, array(
  12.     realpath(‘../../../library’),
  13.     get_include_path(),
  14. )));
  15.  
  16. /** Zend_Application */
  17. require_once ‘Zend/Application.php’;
  18.  
  19. // Create application, bootstrap, and run
  20. $application = new Zend_Application(
  21.     APPLICATION_ENV,
  22.     APPLICATION_PATH . ‘/configs/application.ini’
  23. );
  24.  
  25. $application->bootstrap();
  26.  

The next step is to create the class that will be exposed through the service. I will create a very simple class that will simply perform an addition of two ints. It is very important to describe the input parameters using the @param directive in the comment. This information is used by the Json Server when creating the SMD (Service Mapping Description).

  1.  
  2. /**
  3.  * Simple – sample class to expose via JSON-RPC
  4.  */
  5. class Simple
  6. {
  7.     /**
  8.      * Return sum of two variables
  9.      *
  10.      * @param  int $x
  11.      * @param  int $y
  12.      * @return array
  13.      */
  14.     public function add($x, $y)
  15.     {
  16.         return array(‘result’ => $x + $y);
  17.     }
  18. }
  19.  

The last step to get the JSON-RPC server running:

  1.  
  2. // Instantiate server, etc.
  3. $server = new Zend_Json_Server();
  4. $server->setClass(‘Simple’);
  5.  
  6.  
  7. if (‘GET’ == $_SERVER[‘REQUEST_METHOD’]) {
  8.     // Indicate the URL endpoint, and the JSON-RPC version used:
  9.     $server->setTarget(‘/api/v1/jsonrpc.php’)
  10.            ->setEnvelope(Zend_Json_Server_Smd::ENV_JSONRPC_2);
  11.  
  12.     // Grab the SMD
  13.     $smd = $server->getServiceMap();
  14.  
  15.     // Return the SMD to the client
  16.     header(‘Content-Type: application/json’);
  17.     echo $smd;
  18.     return;
  19. }
  20.  
  21. $server->handle();
  22.  

Now your JSON-RPC Server should be up running. Browsing http://{your web server}/api/v1/jsonrpc.php should result in the following SMD:

  1.  
  2. {
  3.   "transport":"POST",
  4.   "envelope":"JSON-RPC-2.0",
  5.   "contentType":"application\/json",
  6.   "SMDVersion":"2.0",
  7.   "target":"\/api\/v1\/jsonrpc.php",
  8.   "services": {
  9.       "add":{
  10.           "envelope":"JSON-RPC-2.0",
  11.           "transport":"POST",
  12.           "parameters":[
  13.               {"type":"integer","name":"x","optional":false},
  14.               {"type":"integer","name":"y","optional":false}],
  15.           "returns":"array"
  16.        }
  17.     },
  18.    "methods":{
  19.        "add":{
  20.            "envelope":"JSON-RPC-2.0",
  21.            "transport":"POST",
  22.            "parameters":[
  23.                {"type":"integer","name":"x","optional":false},
  24.                {"type":"integer","name":"y","optional":false}],
  25.            "returns":"array"}
  26.        }
  27. }
  28.  

jQuery does not support calling JSON-RPC services out of the box, but fourtenly there is plenty of plugins for jquery that fixes this. One is the JSON-RPC client found here. Download the client and put the javascript files into your /js folder. Then create a new file test.html and add the following html:

  1.  
  2. <html>
  3. <head>
  4.         <script LANGUAGE="javascript" SRC="js/jquery-1.3.min.js"></script>
  5.         <script LANGUAGE="javascript" SRC="js/json2.js"></script>
  6.         <script LANGUAGE="javascript" SRC="js/jquery.zend.jsonrpc.js"></script>
  7.         <script>
  8.                 $(document).ready(function(){
  9.                         test = jQuery.Zend.jsonrpc({url: ‘/api/v1/jsonrpc.php’});
  10.                         alert(test.add(1,1)['result']);
  11.                 });
  12.         </script>
  13. </head>
  14. <body>
  15. </body>
  16. </html>
  17.  

We are all done! Browsing test.html should result in an alert box containg the result.
result

Congratulations! You have created a JSON-RPC service!



Read more about the Zend Framework:

]]> http://sourcecodebean.com/archives/creating-a-json-rpc-service-using-zend-json-server/422/feed 2 Upgrading from Zend Framework 1.7 to 1.9 – The autoloader http://sourcecodebean.com/archives/upgrading-from-zend-framework-1-7-to-1-9-the-autoloader/414 http://sourcecodebean.com/archives/upgrading-from-zend-framework-1-7-to-1-9-the-autoloader/414#comments Wed, 30 Dec 2009 16:54:56 +0000 Peter http://sourcecodebean.com/?p=414 Today I upgraded a project we started working on last year from Zend Framework 1.7 to Zend Framework 1.9. I excepted to run into several API incompatibilities, but the only problem I got was the autoloader.

In Zend 1.7, and earlier versions, the autoloader was registered like this:

  1.  
  2. require_once "Zend/Loader.php";
  3. Zend_Loader::registerAutoload();
  4.  

In Zend Framwork 1.9 this has changed slightly, you now have to register the namespaces you want to autoload:

  1.  
  2. require_once ‘Zend/Loader/Autoloader.php’;
  3. $loader = Zend_Loader_Autoloader::getInstance();
  4. $loader->registerNamespace(‘Dqc_’);
  5.  

This was the only change we needed to do to upgrade from 1.7 to 1.9, quite impressive!

]]> http://sourcecodebean.com/archives/upgrading-from-zend-framework-1-7-to-1-9-the-autoloader/414/feed 0 Getting started with the Zend Framework http://sourcecodebean.com/archives/getting-started-with-the-zend-framework/374 http://sourcecodebean.com/archives/getting-started-with-the-zend-framework/374#comments Sun, 13 Dec 2009 21:53:00 +0000 Peter http://sourcecodebean.com/?p=374 It used to be a bit tricky to get started with the Zend Framework. The Zend Framework is very flexible and allows you to set it up in almost any way that fits your needs. This means for example that the directory structure and location of files is up to you, however – there is a recommended layout. When I first started using Zend I had to figure out this by looking at examples and reading the (at that time) rather poor documentation available. In Zend Framework 1.9 a tool, zf.sh, was introduced. It simplifies creating a new site a lot. In this blogpost I will guide you though the process of setting up a Zend development environment in OS X. The only part that is OS X specific is MAMP. Zend Framework runs just fine under Windows and Linux as well.

Step 1 – Getting a *AMP setup (LAMP, MAMP, WAMP)
The AMP (Apache, Mysql, PHP) stack is available for almost all modern operating systems. I am writing this on my Macbook, so in this tutorial I will use MAMP. When I develop PHP in Windows I usually use WAMPServer and in Linux you can install the LAMP-stack using the packaging system in most distributions.

Setting up MAMP is pretty straightforward, download the MAMP .dmg-file and drag the MAMP folder to your Applications folder.
mamp

Start the application and press the “Open start page” button to make sure everything works. On the start page you will find information about your site, phpInfo, phpMyAdmin and SqLiteManager. We will get back to configuring the http root directory later.

Step 2 – Download and install Zend Framework
Go to the framwork download page and download the minimal distribution. In this tutorial I am using 1.9.6, but the instructions will probably apply to all 1.9 versions.

Extract the downloaded file and move the folder to a shared location, for example /usr/local/. Next step is to create an alias for the zf.sh tool. Edit your ~/.bash_profile and add the following line (change the path to where you moved the extracted files):

zf=/usr/local/ZendFramework1.9/bin/zf.sh

This will allow you execute the zf tool without using the full path. Try it out by executing zf show version, it should return the version number of the file you downloaded.


$ zf show version
Zend Framework Version: 1.9.6

Step 3 – Create your project
Go to the folder where you want to create your new project, in my case ~/Development/. Run zf create project zf-tutorial. This will setup the default directory structure and create the necessary files.

Zend Framework directory structure

The application/ folder is where the source code for your website lives. It contains separate folder for models, views and controllers. The public/ folder is the folder that is going to be your document root.

Now you need to copy the Zend library (in my case /usr/local/ZendFramework1.9/library/Zend) or create a symlink for it so your site can find the Zend files. I prefer using a symlink:


$ cd ~/Development/zf-tutorial/library
$ ln -s /usr/local/ZendFramework1.9/library/Zend/ Zend

Step 4 – Run the project
The last step before we will have running site up is to configure the step that we skipped in Step 1, configuring the Apache document root.
sitesettings

Open up MAMP and click the preferences button, under the apache tab you will find the document root. Click select and navigate to the “public” folder in your zend project. Apply the settings and restart the server.

Now open your browser and direct it to http://localhost and you should see the default welcomescreen:
zenddefault

Now open your application/controllers/IndexController.php and start hacking your code!



If you want to learn more about the Zend Framework i have some posts on some more advanced topics:

]]> http://sourcecodebean.com/archives/getting-started-with-the-zend-framework/374/feed 0 Book review: ASP.NET MVC 1.0 – Test Driven Development http://sourcecodebean.com/archives/book-review-asp-net-mvc-1-0-test-driven-development/354 http://sourcecodebean.com/archives/book-review-asp-net-mvc-1-0-test-driven-development/354#comments Wed, 09 Dec 2009 09:28:25 +0000 Peter http://sourcecodebean.com/?p=354 About a month ago I finished reading the book ASP.NET MVC 1.0 – Test Driven Development by Emad Ibrahim. The book weighs in only at about 300 pages, making it easily something you can read in a couple of nights. The book is written in tutorial fashion and is is probably best read with a laptop running Visual Studio on your lap, so you can follow the examples in the book. The paradigm of the book is Problem, Design, Solution. Emand gudies the reader though the full process of creating a web application in a Test Driven manner.

Besides from only presenting MVC and TTD Emand presents several very useful libraries for Test Driven Development:

  • Moq – A mocking library for .NET that uses the power of LINQ to create mocks.
  • Ninject – Dependency injection library for .NET
  • MBunit – An alternative to VSTest

I think the book gives a good kickstart in ASP.NET MVC and TTD. My favorite part of the book was actually not reading about MVC itself, it was reading about testing it – Emad shows the strengths of MVC by showing how it makes testing easier.

]]> http://sourcecodebean.com/archives/book-review-asp-net-mvc-1-0-test-driven-development/354/feed 0 Microsoft Web Platform Installer http://sourcecodebean.com/archives/microsoft-web-platform-installer/296 http://sourcecodebean.com/archives/microsoft-web-platform-installer/296#comments Sat, 03 Oct 2009 09:51:40 +0000 Peter http://sourcecodebean.com/?p=296 I recently needed to setup a new ASP.NET development environment and deiced to give Microsofts Web Platform Installer 2.0 a chance. I had actually never heard about this product before, but what it does is installing .NET, the needed development libraries, and the express versions of Visual Studio and SQL Server. It required three reboots, but in total it saved me a lot of time!

]]> http://sourcecodebean.com/archives/microsoft-web-platform-installer/296/feed 0 Playing with WSGI in Python (part 1) http://sourcecodebean.com/archives/playing-with-wsgi-in-python-part-1/280 http://sourcecodebean.com/archives/playing-with-wsgi-in-python-part-1/280#comments Mon, 10 Aug 2009 09:00:13 +0000 Peter http://sourcecodebean.com/?p=280 For the last month I have been playing around with WSGI in Python. WSGI is an interface between the web server and the web application, it is meant to simplify writing your own web framework in Python. My intention is not to write an fully fledged web framework, but rather just play around with some ideas I have and try it out.

In WSGI an application is just a callable object (remember that in Python functions are objects too!) that takes two parameters, environ and start_response. A very simple application could look like this:

  1.  
  2. def application(environ, start_response):
  3.    start_response(‘200 OK’, [(‘content-type’, ‘text/html’)])
  4.    return [‘Hello world!’]
  5.  

Not very exiting but it shows us the very basics of WSGI. The function start_response is a function that, as the name implies, starts sending out the response. This is where you give status and headers. Lastly the application returns an iterator with the body response (usually a list of strings or a list containing one string that is the entire body). As you can see WSGI lets code pass around web request in a fairly formal way.

To run this application you can either install Apache and configure it with modwsgi, this might however be slightly overkill just in order to test the application. Instead I recommend installing Python Paste (pythonpaste.com), which is kind of a framework for web frameworks. It includes a lot of functionality that can be reused, but more importantly right now, it includes a simple web server that can serve WSGI applications. In Ubuntu 9.04 (the operating system I am currently running) Paste can be installed using apt:

  1. apt-get install python-paste

To run the application, add the folowing lines to the end of your source file:

  1.  
  2. if __name__ == ‘__main__’:
  3.   from paste import httpserver
  4.   httpserver.serve(application, host=‘127.0.0.1′, port=‘8000′)
  5.  

Now it should be possible to run the application:

  1.  
  2. $ python appserver.py
  3. serving on http://127.0.0.1:8000
  4.  

Your web application is now up running! In the next part i will introduce you to a slightly more exiting application.

]]> http://sourcecodebean.com/archives/playing-with-wsgi-in-python-part-1/280/feed 0 Friendly URLs in ASP.NET using URLRewriter.NET http://sourcecodebean.com/archives/friendly-urls-in-aspnet-using-urlrewriternet/243 http://sourcecodebean.com/archives/friendly-urls-in-aspnet-using-urlrewriternet/243#comments Mon, 22 Jun 2009 11:28:23 +0000 Peter http://sourcecodebean.com/?p=243 I was having a chat the other day with Danish Peter (yes, another one) about URL rewrites in ASP.NET. In a previous post I wrote about how to use friendly URLs in the Zend framework, in this post, which is based on our discussion, I will discuss how to do this in ASP.NET.

Friendly URLs are achieved by a technique called URL-rewrite. A friendly URL is a URL that is easy to read and understand. Let me give you an example (from a site my girlfriend loves) of what is NOT a friendly URL:

http://www.bebe.com/bebe-Jersey-Knit-Apron-Dress/dp/B001UX1NBQ?ie=UTF8&asinSearchPageIndex=13&pf_rd_r=1C6TS27BZZ1CAD6WY81S&navAsinList=B001UNM3XS%2CB001OPYKKQ%2CB001UNNQ52%2CB001RPD88I%
2CB001R4NHHQ%2CB0026BM39W%2CB001QOU6TY%2CB001UX1NNY%2CB001UAA4WI
%2CB0024QP6KM%2CB0026RRN4G%2CB0027DCI6W%2CB001UX3QL6%2CB001UX1NBQ
%2CB001VROPT8%2CB00265NBKS%2CB001RPM80C%2CB001UBWNTO%2CB001RPIC1G
%2CB001PA2NMW&node=675941011&pf_rd_s=search-results&field_browse=675941011&searchSize=20&navAsinListIndex=0&pf_rd_t=101&field_availability=0&id=bebe%20Jersey%20Knit%20Apron%20Dress&searchBinNameList=null&store=core&pf_rd_p=476815091&ref=search_results_14&searchNodeID=675941011&pf_rd_i=675941011&field_launch-date=-1y&searchRank=-custom-rank&searchPage=1&pf_rd_m=A2FMOXN01TSNYY

This might be an extreme example, but there are plenty of sites which are as bad. If the above URL was transformed into a friendly URL it might look something like:

http://www.bebe.com/Apparel/Dresses/Jersey-Knit-Apron-Dress.html

The second address is easier to read. URL rewrite techniques have been around for a long time and the first time I used it was back in the early Apache 1.3 days. Today good sites use friendly URLs and if you have not adopted it yet, you need to start using it.

There are several benefits from using a friendly url scheme, the most prominent are:

  1. 1. The clear structure makes it easier for humans to read and understand the addres
  2. 2. It is easier for search engines to understand what the address is and crawler the site. URL structure that goes more than three directories deep is not always read by a spider.
  3. 3. If search engines understand the URL, it is also easier for them to help people finding what they want, giving better search results. Hence using keywords and proper titles makes life easier.

What options are there for ASP.NET?
There is no built in support for having friendly URLs in ASP.NET, but you could spend your time writing your own URL-rewrite module. Writing your own module is basically spending time reinventing the wheel. If you have the time, go ahead, but if not there are already several good ones out there (free and open source). One that I have found very useful is the URLRewriter.NET (http://urlrewriter.net/). URLRewriter.NET provides similar rewrite capabilities as the mod_rewrite does for Apache.

Using URLRewriter.NET
It is possible to use the URLRewriter.NET module without making any changes to the IIS configuration, this will however limit the functionallity the URLRewriter.NET rewriting capabilities. To use its full power, IIS should be configured to map all requests to the ASP.NET runtime (how to do this is covered in the manual). We will only be touching the surface of URLRewriter.NET so we will not have to do any modifications to the IIS configuration.

To add URLRewriter.NET to your project start out by opening Visual Studio or Visual Web Developer. Open your project and then right click the project in the solution explorer and click on Add Reference, go browse and find the folder you downloaded and unzipped. You will find the binary (.dll) file in “Loation”\urlrewriternet20rc1b6\UrlRewriterV2\bin\Release.

Before we can use the module we need to make some changes to the web.config. Add the following in the configSections:

  1. <configSections>
  2.   <section
  3.     name="rewriter"
  4.     requirePermission="false"
  5.     type="Intelligencia.UrlRewriter.Configuration.RewriterConfigurationSectionHandler, Intelligencia.UrlRewriter" />
  6. </configSections>

This will allow the URL writer to read the rewrite rules we will define later. Now we need to add this module to the httpModules section:

  1. <system.web>
  2.   <httpModules>
  3.     <add
  4.       type="Intelligencia.UrlRewriter.RewriterHttpModule, Intelligencia.UrlRewriter"
  5.       name="UrlRewriter" />
  6.     </httpModules>
  7.  </system.web>

By adding the rewriter as a httpModule we allow it to intercept web requests and route the requests to the actual aspx file serving the page. Now we need to define the rewrite rules:

  1. <rewriter>
  2.   <rewrite url="~/(.+)/(.+)/(.+)/(.+).shtml" to="~/Default.aspx?Year=$1&amp;Month=$2&amp;Date=$3&amp;Title=$4"/>
  3.   <rewrite url="~/Article/(.+).shtml" to="~/Articles.aspx?ID=$1"/>
  4. </rewriter>

The rewrite rules are defined using regular expressions. Regular expressions are very powerful and is something every programmer should know. The syntax might be hard to remember but there are several great tools to help build advanced regular expressions, for example the RegexDesigner.NET (http://www.sellsbrothers.com/tools/#regexd) that Chris Sells has created.

The above rewrite rules are simple. The first rewrite rule will rewrite URLs like

sourcecodebean.com/2009/04/01/1.shtml

to

sourcecodebean.com/Default.aspx?Year=2009&Month=04&Date=01&Id=1



And the second rewrite rule will match requests starting with ~/Article/ so it will rewrite URLs like

sourcecodebean.com/Article/1.shtml

to

sourcecodebean.com/Articles.aspx?ID=1

Finishing up
By now you hopefully have a functioning site that uses friendly URLs. One of the common problems you might run into is broken links. To avoid this you should make sure that you reference all your pages from the root level (~) and that all your links has the runat=server tag.

Thanks for your input Peter! You can check out his Danish Peter blog over at Magic Mouse.

]]> http://sourcecodebean.com/archives/friendly-urls-in-aspnet-using-urlrewriternet/243/feed 7 The importance of web standards (and why you should not design for browsers) http://sourcecodebean.com/archives/the-importance-of-web-standards-and-why-you-should-not-design-for-browsers/227 http://sourcecodebean.com/archives/the-importance-of-web-standards-and-why-you-should-not-design-for-browsers/227#comments Mon, 15 Jun 2009 12:05:08 +0000 Peter http://sourcecodebean.com/?p=227 For the last three months I have been working with one of Sweden’s largest companies. When I arrived the first day I noticed that it was not possible to log in to the intranet using Firefox. The explanation I received:

“our sites are built for Internet Explorer, you have to use it”

In my head a warning bell rang. I fired up Internet Explorer to find that the whole site was a horrible mix of broken HTML, badly written Javascript, lot of frames and almost no use of CSS. It surly could not work in anything else other than Internet Explorer 6 and 7.

My job was not the development of the intranet (which I am glad for), so I just told the customer what I thought and that they should do a better job of following web standards so the users could use the browser of their choice. The kind of stupid response I got was something in style with:

“we concentrate on Microsoft technologies, so the only requirement we have is that it should work in Internet Explorer”

The fun started during my last week at the company, when Microsoft started to push out Internet Explorer 8 to all Windows Update users. IE8 is actually very strict when it comes to following web standards. Lo and behold, none of the users who had their systems upgraded could use the intranet. IE8, now strict on standards, vomited back the bad intranet and the company basically came to standstill. Chaos!

I observed the chaos (smiling) for an hour before I decided to save the day by telling them about “EmulateIE7″. By default, IE8 uses the new IE8 rendering engine. The big difference from before is that if a site is broken IE8 will NOT default to an older rendering engine. This is different from how older IE browsers behaved and is clearly a step in the right direction for Microsoft to support web standards. However they have not scraped backwards compatibility entirely. In order to allow for broken sites to be viewed in IE8, it is possible for the developer to add the following meta-tag to the page:

  1. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

This tag will tell IE8 to use the IE7 rendering engine.

And if you are stubborn enough to believe that building websites for browsers is acceptable, there are reasons why we need web standards:

  1. 1. Accessibility is the law: FCC regulations in the United States require that web sites are accessible to people with disabilities. If a website cannot be viewed by someone with an impairment, it is not only illegal but highly unfair to visitors. With proper web standards, these visitors can change font and modify a website layout to make it easier to read.
  2. 2. Better search engine rankings: While people may be gung ho for “SEO” and those techniques, some of the most basic and most important ways of reading a website can improve the reading by a search engine spider. Combined with semantic markup, the separation of content and presentation generally improves search engine rankings.
  3. 3. Easier development and maintenance: Using semantic and structured HTML makes it easier and quicker to understand code created by somebody else. Since every programmer leaves a footprint in their style of code, those that write web standards will make it easy for others to understand code. It will also help avoid the hackneyed job that many sites exist in today.
  4. 4. CSS = Faster downloading and rendering of pages: Using CSS for presentation style leads to leaner HTML documents. It also makes it easier to globally change attributes. Leaner files means quicker downloads for visitors.
  5. 5. Semantic HTML is friendly to adaptation: Semantically marked up documents can beadapted to print and alternative browsing devices (PDAs, iPhones, netbooks) by linking to a different CSS file.

After the incident was resolved we had a long discussing about web standards, and the company now understands that you can not design a site for a certain browser, it should be designed to follow accepted web standards. ]]> http://sourcecodebean.com/archives/the-importance-of-web-standards-and-why-you-should-not-design-for-browsers/227/feed 6