Amadiere.com

ASP.NET MVC 3: Drop Down Lists / SelectLists

2011-08-30T21:42:45Z

There are a number of very useful helpers that come as default with the ASP.NET MVC framework, but one that always seems to get people confused is the Html.DropDownListFor() helper method. So in this post, I’ll quickly go over the steps I use to populate the list, as well as some of the more funky features once it’s up and running!

In our example, there will simply be a single drop down list on a form that shows a list of countries, from which you can select and submit.

First, we need to build a view model that is going to be the contract that determines the data that the view can display.

public class IndexViewModel
{
    // Stores the selected value from the drop down box.
    [Required]
    public int CountryID { get; set; }
 
    // Contains the list of countries.
    public SelectList Countries { get; set; }
}

Once we’ve sorted that, we can create the action result methods for our index page.

public class HomeController : Controller
{
    [HttpGet]
    public ActionResult Index()
    {
        IndexViewModel viewModel = new IndexViewModel();
        viewModel.Countries = new SelectList(GetCountries(), "ID", "Name");
        return View(viewModel);
    }
 
    [HttpPost]
    public ActionResult Index(IndexViewModel viewModel)
    {
        viewModel.Countries = new SelectList(GetCountries(), "ID", "Name");
        if (!ModelState.IsValid)
            return View(viewModel);
 
        //TODO: Do something with the selected country...
        CMSService.UpdateCurrentLocation(viewModel.CountryID);
 
        return View(viewModel);
    }
}

You’ll notice there are two instances where we populate the Countries property on the viewModel, one in the HttpGet method and the other in the HttpPost. We do this so that the list of countries is available throughout our process. You see, unlike the CountryID which is submitted as part of the Request object (it’s part of the form collection), our list is never stored – it’s lost as soon as the user navigates away from that page. So we need to repopulate it. In reality, you may only need to repopulate it when the validation fails an you have to redraw the screen in the HttpPost method, so that could be moved.

Then, it’s just a simple case of adding this to my view:

@Html.DropDownListFor(x => x.CountryID, Model.Countries)

Or you could forcably add a blank value to the top with some “please select me, pretty please”-type text. e.g.

@Html.DropDownListFor(x => x.CountryID, Model.Countries, "- please select -")

And there you have it! A working drop down box using MVC 3 and Razor views.
Now for some more fancy stuff. If you’re interested in styling your menu, then you can’t really go far wrong with jQuery UI SelectMenu (of which there are a few demos available, as well as a separate tutorial). To set up, you only need to do a few things:

Download JQuery & JQueryUI and add to your solution. You can now do this step through NuGet, or manually by “Add Existing Item” and downloading from the respective site.
Add a reference to the .js and .css files to the header of your html header, often set by the _Layout.cshtml file. Something like the following:

   <link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" />
   <script type="text/javascript" src="@Url.Content("></script>
   <script type="text/javascript" src="@Url.Content("></script>

Download and add the SelectMenu .js and .css files in much the same way.

<link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/selectmenu.css")" />
<script src="@Url.Content("~/Scripts/selectmenu.js")" type="text/javascript"></script>

Then all that lies to do is to set it off going:

<script type="text/javascript">
   $('select').selectmenu();
</script>

The last bit we added there simply makes this apply for every single select box that is on the page. As an aside, when doing AJAX or JQuery where you may potentially add an additional drop down list, you will need to call .selectmenu() to ensure that your new box appears like the others. It’s also worth noting that you may find if your page isn’t a fast loader, the standard drop down box (unstyled) will appear for a brief period.

Unobtrusive JavaScript in ASP.NET MVC3 with JQuery I've recently experimented a little bit with some of the...

Unobtrusive JavaScript in ASP.NET MVC3 with JQuery

2011-06-20T20:45:10Z

I’ve recently experimented a little bit with some of the new unobtrusive JavaScript stuff that is now included as part of the default ASP.NET MVC 3 project template. While not an overly complex subject, it’s been one of them plugins I wanted to have a dabble with, but I didn’t quite find the time until now. And I must say, it was a lot easier to sort out than I thought it might be! I should point out that although this is an ASP.NET MVC 3 example, the concepts and the fact that this is mostly just JQuery means that it’s not limited to that, earlier versions of ASP.NET MVC can use happily, as can WebForms, PHP, Ruby and even Classic ASP!

Some things we’ll try and do in this blog post:

Setup a simple form with server-side validation of input fields which redirects to a ‘Success’ page or re-renders the form depending on whether it was successful or not.
Add JQuery validation for simple client side validation to the form.
Add Unobtrusive JavaScript support which will submit the form via AJAX.

Creating a basic application:

Firstly, I created a ASP.NET MVC 3 Web Application (Empty) in VS2010 and got to work updating the JavaScript libraries that were in it. This can be done via the NuGet Console, or by right clicking “References” in the Solution Explorer, “Add Library Reference” and then clicking the update side-tab. From there you can update all the default stuff.

Done that? Good. Next we’ll add a default controller, a view model to pass the data around & two views (one for allowing us to edit the form and the other as a success page). It’s worth noting that I’m doing nothing that special on these and that I’m using the default _Layout.cshtml to apply the header and footer as it sees fit.

/Controllers/BlackCoffeeController.cs

using System.Web.Mvc;
using UnobtrusiveAjaxExample.ViewModels.BlackCoffee;
 
namespace UnobtrusiveAjaxExample.Controllers
{
    public class BlackCoffeeController : Controller
    {
        [HttpGet]
        public ActionResult Rocks()
        {
            RocksViewModel viewModel = new RocksViewModel();
            return View(viewModel);
        }
 
        [HttpPost]
        public ActionResult Rocks(RocksViewModel viewModel)
        {
            if (!ModelState.IsValid) return View(viewModel);
            // Do something Database-y here.
            return View("Success");
        }
    }
}

/ViewModels/BlackCoffee/RocksViewModel.cs

using System.ComponentModel.DataAnnotations;
 
namespace UnobtrusiveAjaxExample.ViewModels.BlackCoffee
{
    public class RocksViewModel
    {
        [Required]
        public string Forename { get; set; }
 
        [Required]
        public string Surname { get; set; }
 
        [Required]
        public string Message { get; set; }
    }
}

Then the two views, firstly: /Views/BlackCoffee/Rocks.cshtml

@model UnobtrusiveAjaxExample.ViewModels.BlackCoffee.RocksViewModel
 
@{
    ViewBag.Title = "Rocks";
}
<h2>Black Coffee Rocks?</h2>
<div id="content">
@Html.ValidationSummary()
@using(Html.BeginForm())
{
<ul>
	<li>
            @Html.LabelFor(x => x.Forename)
            @Html.EditorFor(x => x.Forename)
            @Html.ValidationMessageFor(x => x.Forename)
        </li>
	<li>
            @Html.LabelFor(x => x.Surname)
            @Html.EditorFor(x => x.Surname)
            @Html.ValidationMessageFor(x => x.Surname)
        </li>
	<li>
            @Html.LabelFor(x => x.Message)
            @Html.EditorFor(x => x.Message)
            @Html.ValidationMessageFor(x => x.Message)
        </li>
</ul>
<div><input name="Continue" type="submit" value="Continue" /></div>
}
</div>

And then /Views/BlackCoffee/Success.cshtml

@{
    ViewBag.Title = "Success";
}
<h2>Success</h2>
<p>Congratulations! You've successfully declared BLack Coffee as being totally rockin'!</p>

At this point now, you should be able to build and run your application and navigate to /BlackCoffee/Rocks and verify that the page redraws the form unless all boxes are filled in. If you do fill them all in, you should get the success page.

Adding JQuery Validation with barely any effort for standard Data Annotations.

With certain DataAnnotations such as the [Required] attribute and [StringLength], you should be able to get simple JQuery client side checks, which while not a replacement for server side checks, add some speedy feedback which will be especially welcomed by users who find themselves struggling over long distance or slow connections. The key point to note here is that the checks are performed both sides (client and server) – so it doesn’t matter if the user has JavaScript disabled or is using a browser not capable of running it – the checks will still get done. It’s just an added bonus.

To do, simply add references to the JavaScript files to your html’s <head> tag. In this case, I’m going to add them directly to the _Layout.cshtml file.

    <script src="@Url.Content("~/Scripts/jquery-1.6.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript">></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

You’ll spot that there are 4 included files there – the last one (the JQuery.unobtrusive-ajax.min.js) is for the next part – but we’ll put it in now in preparation.

You should find that the Web.Config file already has the following lines in already (specifically lines 10 & 11), but have a gander for the following and if it doesn’t exist or is set different to this, update the file appropriately.

<appSettings>
    <add key="webpages:Version" value="1.0.0.0"/>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

We’re now cooking with gas! Save, Build and try out your application. You should be able to spot that when clicking your submit button, the page doesn’t go away to the server at all to check the field validates, it’s doing it on the client. Good stuff!

Adding Unobtrusive AJAX into the mix.

This should be a relatively easy process, but there are a few things we need to consider sorting out before we continue too much further:

Update the views to make the Form work via AJAX (without breaking non-JavaScript/AJAX support)
Update the controller to detect whether the request is an AJAX request and if so, avoid sending the header / footer / other stuff back with it.

The first part is quite simple. Within the Rocks.cshtml we created earlier which is our edit form view, we used the HtmlHelper class to create the form tag. All we need to do now is change that to use the AjaxHelper class and pass in some options and we’re off to a winner!

10	@using(Ajax.BeginForm(new AjaxOptions() { HttpMethod = "Post", UpdateTargetId = "content" }))

You should be able to see there that there is AjaxOptions class “newed up” directly in the view. If you’re uncomfortable with doing this, you could create it directly in the view model and pass it in from there. There are a ton of options that you can go into, most of which are touched upon on Brad Wilson’s blog post on this subject (if you haven’t read Brad Wilson’s blog, you probably should add it to your reader – it’s exceptional and includes a good chuck of stuff relating to ASP.NET MVC and related topics). You’ll also spot we provide a UpdateTargetId – this represents the HTML element into which all the view result is going to get dumped into. In this case, our DIV on our Rocks.cshtml page – but this could be anything and in fact nothing, if you don’t want to spew out content back to the user for whatever reason.

If you ran the application now, you’d find that all the AJAX and the JQuery would work great, but as part of the Ajax Request, the header and footer would be returned and very soon you’d end up with a webpage that looks like it’s been designed by someone who’s been watching Inception too much. This thankfully (or more specifically thanks to the ASP.NET team), isn’t a problem as we can do a little check before returning the view while in the appropriate controller method. Using the example above, you’d be able to change it to something like this:

        [HttpPost]
        public ActionResult Rocks(RocksViewModel viewModel)
        {
            if (!ModelState.IsValid) return View(viewModel);
            // Do something Database-y here.
            if (Request.IsAjaxRequest()) return PartialView("Success");
            return View("Success");
        }

You’ll spot with this example we are returning exactly the same view. However, by returning it as a Partial view, we are ensuring it does not get rendered as part of a bigger page, so all of the headers / footers and other things included via layout pages are ignored.

Other things you can do to improve stuff:

There are a plenty of other very easy things you can add too, such as:

Loading image: Simply provide it with a content div to display while loading (and a timeout if you want) and in will show() that while that particular AJAX call is made. Meaning that if you want to, you can lock the UI or provide visual feedback that the users request is currently in progress.
There are four callback methods you can set for OnBegin, OnSuccess, OnFailure and OnCompleted which will trigger as appropriate. This allows you to add all sorts of extra functionality to the application in those instances you want to do more than simply “add some HTML to a div”. However, two things to note regarding these function calls:
- The functions you declare should not live inside of the JQuery document.ready() method or other shorthand notation for that. Just plain functions in a .js file is fine (though, you can of course, still use JQuery – that’s not a problem).
- You might find that the $(this) object within the JavaScript is not populated by the time you get to the methods. You can solve this to some degree by changing the following line from:
  244
  options.data.push({ name: "X-Requested-With", value: "XMLHttpRequest" });
  to:
  244 245
  options.data.push({ name: "X-Requested-With", value: "XMLHttpRequest" }); options.context = element;
  If I’m honest, I don’t know why this line is missing from the file in the first place. I can’t imagine it’s just been forgotten as it seems like such a key thing to be able to trigger events based on the click events (especially on pages where there are lots of controls which may call the AJAX request). I suspect there is a good reason – but I don’t know it yet.
You can use this on more than just <form> tags. For example, it’s just as easy to use the Ajax.ActionLink method which works in a very similar way and has some of your favourite overloads still available!
As mentioned at the top, this is mostly just JavaScript. If you wanted to do this with any other server side technology, all you’d need to do is replace the AjaxHelper methods with your own way of outputting the specific HTML “data-” based attributes and you’re up and running!

The full source code is available in a zip file here – though, as you can see above – it’s not a great deal different to the bog standard project!

ASP.NET MVC 3: Drop Down Lists / SelectLists Some ASP.NET MVC 3 guidelines on how to use the...

The 10 Best YouTube Video’s (Even Better Than That Other List You Read)

2011-03-04T21:48:26Z

Right, I know you read about all these other lists of “top 10 videos ever” blah-blah! But seriously. They never seem to satisfy me. They always leave out the ones that I think were freakin’ amazing. So, in true “OMG! Sum1 on the Intert00bs is wong!!one!”… here is my subtle attempt at bashing them.

Firstly, an honorable mention for Numa Numa – a classic bizarre video from long before the realms of YouTube! Additionally – Charlie and Susan Boyle (both of the YouTube era), although not my favourites – do get a hat tip for being interesting for a watch at least once.

But now, in reverse order – the top 10!

10 – Ring, Ring, Ring, Ring, Ring, Ring, Ring: Banana Phone!

This is truely, truely the most frusting song on the internet. Once you’ve heard it, you cannot get it out of your head for the rest of the day.

9 – Mario A Capella

A group effort showing a bunch of people singing the Super Mario tune, providing all the parts and the entertainment – with none of the expensive woodwind section

8 – Leeeeeeeroy Jeeeeenkins!

Ask any World Of Warcraft player if they have heard of Leeroy Jenkins and 99% will say yes. So utterly famous he appeared in a recent update and you can now get an in-game achievement with his name.

7 – Rick Rolling!

A meme of the most annoying type. Used normally to trick people into listening to it – I’m offering it to you this time with a warning: This video contains Rick Astley.

6 – Boo. Hahahahahaha! Baby

This quite simply makes you smile and is one of the rare videos on the internet that doesn’t involve laughing at someone else’s expense.

5 – Star Wars Kid

The original is amazing! But then there are loads of follow ups (particularly good is the light saber adaption). He became so famous that the Internet bought him a Macbook and Lucas Arts gave him a role in one of the Star Wars films. Epic!

4 – The Muppets: Bohemian Rhapsody

If I’m not mistaken, the first full 1080P YouTube video (be sure to set it to HD before you watch!) – and it’s awesome. I’m a fan of the Muppet’s and Queen separately, so when this came out – my head exploded.

3 – The Ultimate Showdown (of Ultimate Destiny)

From the era of Flash comes this bizarre storyline accompaniment to what appears to be a celebrity-apocalypse. Very fun and very tongue in cheek.

2 – Terry Tate: Office Quarterback

Sensationally funny! I have long since campaigned to get a guy like this into every workplace. Up to yet, I’ve been 100% unsuccessful – but I have not given up hope!

1 – The Evolution of Dance

This guy can SERIOUSLY dance. I don’t mean in a crappy Britain’s Got Talent kinda way! The best few minutes of your day – watch it! It’s the best video in the entire interwebs!

No related posts.

C#.NET & Classic ASP Password Hashing

2011-02-10T22:34:46Z

One of the things I’ve recently been working on is a solution to allow both a .NET application and a legacy VBScript / Classic ASP to be able to validate a specific username / password combination, comparing two hashed passwords. In the process, I discovered (with the help of Google and StackOverflow) that accessing .NET objects from Classic ASP isn’t really all that hard! But to the issue at hand: Password Hashing! Sorting this out from the .NET side was relatively easy. For the purpose of this post, here is roughly what I have at the moment.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Security.Cryptography;
 
namespace Amadiere.Com.Utilities
{
    public static class Cryptography
    {
        /// <summary>
        /// Encrypts a password based on the passed in Encryption method (SHA512Managed is a good starting
        /// point if you don't know which to use).
        /// </summary>
        /// <remarks>
        /// The passwordSalt parameter is required to ensure that rainbow tables cannot be used to
        /// lookup all usernames if the salt is discovered. This salt is OK to store in the database,
        /// along with the hashedPassword generated by this function.
        /// </remarks>
        /// <param name="password">The password to be encrypted.</param>
        /// <param name="passwordSalt">The individual grain of salt for that password.</param>
        /// <param name="method">The method by which to encrypt.</param>
        /// <returns>An string representing the hashed password (88 characters long).</returns>
        public static string Hash(string password, string passwordSalt, HashMethods method)
        {
            string siteWideSalt = "THIS IS A SITE WIDE SALT, BUT COULD BE A GUID";
            string encryptedPassword;
            switch (method)
            {
                default:
                    encryptedPassword = HashSHA512Managed(siteWideSalt + password + passwordSalt);
                    break;
            }
            return encryptedPassword;
        }
 
        /// <summary>
        /// One-way encrypts the password into oblivion. If the same password and salt are provided, the
        /// same end string will be churned out the other end of this sausage machine.
        /// </summary>
        /// <see cref="http://msdn.microsoft.com/en-us/library/system.security.cryptography.sha512managed.aspx"/>
        /// <example>HashSHA512Managed("bobsYourUncle_SALT-GOES-HERE");</example>
        /// <param name="password">Unencoded pre-salted password.</param>
        /// <returns>An 88 character string, representing the originally encoded password.</returns>
        private static string HashSHA512Managed(string saltedPassword)
        {
            UnicodeEncoding uniEncode = new UnicodeEncoding();
            SHA512Managed sha = new SHA512Managed();
            byte[] bytePassword = uniEncode.GetBytes(saltedPassword);
            byte[] hash = sha.ComputeHash(bytePassword);
            return Convert.ToBase64String(hash);
        }
    }
 
    public enum HashMethods
    {
        SHA512
    }
}

The Classic ASP side of things wasn’t as easy. There are no built in libraries for SHA512 (or in fact, many other password hashing algorithms). So I had a few options on how I was to proceed:

Abandon my choice of SHA512 and go with MD5 where there seemed to be a bit more usage in the community. I was reluctant to do this because it isn’t as good as SHA512.
Copy some code sample that has been created by someone else, that I either have to accept is OK, or spend a good deal of time understanding it and breaking it down bit by bit.
Create a custom COM object in .NET, register it in the GAC and reference that via Classic ASP.
Access the .NET functions directly from Classic ASP.

The last option won – because it worked, and because it meant a lot less maintenance and praying for things to keep working. This is the code that pretty much does the same as the above .NET code, but in VBScript.

Function Hash(strPassword, strIndividualSalt)
 
  Const strSiteWideSalt = "THIS IS A SITE WIDE SALT, BUT COULD BE A GUID"
  Hash = HashSHA512Managed(strSiteWideSalt & strPassword & strIndividualSalt)
 
End Function
 
Function HashSHA512Managed(saltedPassword)
 
  Dim objMD5, objUTF8
  Dim arrByte
  Dim strHash
  Set objUnicode = CreateObject("System.Text.UnicodeEncoding")
  Set objSHA512 = Server.CreateObject("System.Security.Cryptography.SHA512Managed")
 
  arrByte = objUnicode.GetBytes_4(saltedPassword)
  strHash = objSHA512.ComputeHash_2((arrByte))
 
  HashSHA512Managed = ToBase64String(strHash)
 
End Function
 
Function ToBase64String(rabyt)
 
  'Ref: http://stackoverflow.com/questions/1118947/converting-binary-file-to-base64-string
  Dim xml: Set xml = CreateObject("MSXML2.DOMDocument.3.0")
  xml.LoadXml ""
  xml.documentElement.dataType = "bin.base64"
  xml.documentElement.nodeTypedValue = rabyt
  ToBase64String = Replace(xml.documentElement.Text,VbLf, "")
 
End Function

As you can see in the VBScript example, I can create the .NET objects as I would any other type of object in VBScript, the difference comes in how I use them. Normally, in C#, you’d simply use ComputeHash() and there would be a number of overloads for you to choose from. As VBScript doesn’t have the concept of overloading, you have to use a crazy-mad way of accessing the specific overload you want – using an underscore. I’ve not really come up with a full-proof way of working out which is which (though, if I’m honest, I didn’t try much). I did however find out that they started ComputeHash(), ComputeHash_1() and ComputeHash_2() – I assume the numbers resemble the order they appear in Visual Studio when using intellisense for C# – but trial and error is normally good enough.

Hope this is of use to someone else! If anything, I’m sure I’ll find a need to do this again someday and I’m sure it’ll be useful for then! All this hashing has made me hungry!

Hashing passwords is hard! Let's eat!

No related posts.

OpenID is NOT an ex-parrot!

2010-11-20T14:13:14Z

I’ve read a few Tweets recently that OpenID might be dead. Poppycock! OpenID is alive and kicking and as strong, if not stronger, than ever before.

What is OpenID? OpenID is a means of identifying that someone who’s visiting your site is the same person as someone who’s already been here. The was traditionally with Usernames and Passwords. If you successfully signed in, we assumed you were the same person. OpenID provides that level of authentication. It basically sends back a little message from the provider (e.g. Google) saying “Yo dude, not spoken in a while, but this customer you asked me about? Well it’s <INSERTGUIDHERE>. Just go ahead and log them straight in or create them a new account”. I now don’t need to store passwords as a website – this is great news!

Rob Conory (of Tekpub) recently wrote a very excellent article “Open ID Is A Nightmare” in which he proceeds to outline his case for why OpenID is turning into a nightmare for him. It’s an entertainingly written article in Rob’s quirky style that outlines his viewpoints as both a developer and as a business owner. The latter point, as he goes on to say, is the key criteria in why he’s reached the point he’s at at the moment.

A friend of mine was offering a ton of solutions to my Open ID woes over Skype the other day – insisting that it’s worth “investing in for the long run – the kinks will get worked out”. I sort of agree as a dev – as a business owner I couldn’t give a rat’s ass.

He is smart guy and has a number of very relevant points that anyone considering using OpenID should be thinking about. He had a number of OpenID unrelated issues (RPXNow downtime), but they all contributed to the main gripe he had about things: customers were unable to get into his site, a site they’ve paid to get access to. This is a key point. People are PAYING to watch the content over at Tekpub and through no fault of his own, they were unable to get in. The problem is easily wafted away, waving your hands in the air and saying “this is a user problem!”. The user created an account and then forgot which provider they logged in with in the first place! What fools! Let us all gather around a camp fire, eat sausages and laugh at their pathetic attempts at life. Except – lets not forget Tekpub’s audience. It’s techies. It’s developers. It’s people like us. If WE are capable of getting confused and lost as to what is going on – then the anecdotal ”mum” is going to struggle a hell of a lot more.

The bonus and one of the driving forces behind OpenID is the supposed “reduced friction” when creating an account with a site. As Rob points out, there is the issue because we can effectively get so little back from the OpenID Provider, that we’d be unable to dig out the account from the mass of other accounts with no additional data. The users account is effectively orphaned until they remember the provider they signed up with. Locked out and angry.

This debate took a whole other level of LOL when Scott Hanselman tweeted:

Is OpenID dead? Poor usability to blame?

For some bizarre reason, the Twittersphere decided that that was neither a question, but an official announcement from Microsoft that OpenID was about to fail. When in reality, it was in relation to Rob’s above post. Humourous to those unaffected, but I can imagine quite irritating and stressful to Scott.

What is wrong with OpenID?

OpenID is fantastic at doing what it’s does, but there is definitely room for improvement. Maybe not in OpenID itself, but in the way it is implemented. Some of the key things that I personally think developers need to consider when designing a login system that uses OpenID are:

Each Account should be able to have more than one Login method attached to it.
This is something I think people have inherited from years gone by. Traditionally, an account has a Username and a password, and nowadays maybe an OpenID field too. In reality, the user should have the ability to add whatever authentication methods your site allows, to their account. A one-to-many relationship from Accounts to Logins. E.g. I might sign up with my Google account, then decide later that I want to create a Username and Password for whatever reason. Then a bit later, I spot you have Facebook Connect as an option – cool, I’ll attach my Facebook account to this site too. Now where am I? I have 3 ways of getting into my account. That’s great news – that’s a lot easier for me as as long as I guess one of them randomly when I’m prompted – I’m sorted.
Upgraded accounts require more information.
The low barrier to entry should be set for standard users, but the minute you decide you want to upgrade them (make them a moderator or take payment for a service from them), you should require more information to make sure you can trace things when issues arise. Requiring this would have given Rob the facility to offer a “forgotten your password?” function on his login page that would solve the issue that paying customers couldn’t get in.
The ability to merge accounts.
Unfortunately, people have lots of different accounts around the internet. They will probably, as Rob did when trying to access StackOverflow, get into your site using the wrong one and in the process, create a brand new account. In theory, what they wanted to do was log in as the correct one and then maybe add this new provider to their list of available logins. This is a tricky problem to solve, but it’s doable. You want to offer the option for a user to merge their two accounts, copying whatever appropriate data to their primary account. If you can achieve this, then you’re giving the users the ability to solve their own problems – great! And even if they don’t, you have a nice UI for doing it on their behalf.
“WTF does OpenID mean?”
Seriously. I’m have no ready solution for this problem – but people don’t know what OpenID is and that’s because it’s techie. We probably need to drop the OpenID words from headings to merely part of the description for clarification, when displaying our Authentication Options. People should just be offered the choice of which site they want to authenticate via: Google, Yahoo!, Facebook or whatever. The issue still remains that people don’t exactly understand still what it means that they are being “authenticated by Facebook”. Half of them won’t care that they don’t know, but for the other half, you probably want to re-assure them of what it is that they are allowing you to do. I don’t want some random site I’ve just stumbled upon telling everyone on Facebook that I’ve done XYZ on website ABC. I think the OpenID selector is good – but is it perfect? Not really – it works for me and is very simple to use – but it doesn’t answer any questions you might have as a customer. As a developer, you need to do that. You need to ease their fears.

If I was creating a site now, would I use OpenID? ABSO-FRICKIN’-LUTELY! It’s great and makes it so easy to actually log into to a site. If I can transfer that ease-of-access to the customer, while not freaking them out – then I’m onto a winner! Is OpenID an ex-parrot? Not at all – it’s here for the foreseeable future in my opinion. And that is a great thing!

No related posts.

HTC HD7 (Windows Phone 7) vs Apple iPhone 4 (iOS 4)

2010-11-04T22:08:57Z

I’ve been a fan of the iPhone since the 3G came out and it’s been the first phone that I’ve actually enjoyed using throughout its entire lifespan. Upgrading to the iPhone 4 was something of a massive upgrade at the time as well – the speed difference alone is outstanding when compared to the 2 year old 3G! However, the one thing that’s always bugged me was the fact I needed an MacBook to develop on it. I can’t afford one basically, so that means I can’t develop on their platform. Fair enough, it’s their call and I’m not overly worried about it for now. However, when Microsoft announced that they would be launching themselves into the mobile phone operating systems market (and Windows Mobile 6.5 doesn’t count as “being in the market – I’m sorry) and that I’d be able to write apps written in Silverlight and C# – I was sold. I had to get one of the devices. I whittled down the time to launch by drinking coffee and occasionally leaving the house. Eventually, I managed to get hold of a device and begin to use it. I thought I’d write my observations down for anyone interested to know how they both compare.

Why did I get the HTC HD7:

There were a number of reasons. Primarily because the 4.3inch screen is great (it still fits in my pocket just fine) and more importantly, it had 16Gb of space. With none of the WP7 devices offering SD Card readers at launch (in the same way iPhone’s do not), space was at a premium. Having been limited by the iPhone 3G 8Gb before, I wasn’t going to make the same mistake again quite so lightly. All the reviews I’d read had given the device good reviews and it seemed like one of the best devices that I could have got at launch time.

How did they compare?

Screen Quality: You know, I really can’t find any differences between the two devices. Maybe it’s my untrained eyes, but the WP7 is definitely in the league with the iPhone 4 and it’s retina display. Touch wise, they both behave remarkably well and are extremely responsive. I haven’t found myself pressing harder because my gestures weren’t detected correctly.

Sound Quality: I was surprised about this one and I never actually thought about it too much in the run up to buying it, but the quality of the audio produced by the HD7 far outstrips that of the iPhone 4. I listed to a bunch of my songs, including Bat Out Of Hell (which I’ve listed to on countless different formats) and the richness of the sound is amazing. Coupled with the good use of surround sound, the HD7 made for a great listening experience. I didn’t particularly like the earphones that came with it though, but then, the same can be said about the iPhone ones… so Meh.

Maps: I think unfortunately, this might something odd with my location, but the HD7 picks up my location as 12 miles from where I’m actually sat. A touch inconvenient for a “where’s my nearest” feature. The Windows Phone 7 devices all use Bing maps and the iPhone uses Google maps. For the most part, they behave exactly as you’d expect them too and they are good for what they do. The iPhone really begins to excel again with it’s built-in street view.

App Store: Unsurprising I guess that iPhone would win this battle – it’s had almost 2 years of a headstart on the Windows Phone 7 market and in that time has amassed a horde of really amazing apps. As for the Marketplace itself, I think neither really excels at helping users find the applications that they might like. Genius in the Apple AppStore has never really given me much luck, and while the Microsoft version is currently an easily navigated setup, I fear that once content begins to flood in, some of the ease-of-use will quickly wash away.

App Development: As an ASP.NET and C# developer I’m going to be bias on this one. But I do consider the platform to be a much more simplistic way to develop. The pain of Objective-C is that the developers must delve quite low to the OS, performing their own garbage collection and other similar tasks. Silverlight, which is used by Windows Phone 7, is a very different experience indeed and you can spend the time concentrating on your App. Visual Studio 2010 – it really is awesome and to be able to have a truly awesome free development environment cannot be under estimated. And while Microsoft is untested in this water, it’s Application Acceptance Guidelines appear to be a lot more black and white than Apple’s which are a notorious issue.

Camera: To be honest, I’ve not really exausted the tests on the camera yet, but from what I can tell – the iPhone wins this battle. It’s HDR function is actually pretty nifty and as a result, the pictures seem to be some of the best I’ve seen from camera phones. The HD7 isn’t quite as good. Sure the pictures are ok, but inside, I’ve found things are a little grainier than the iPhone which has been frustrating.

Web Browsing: The experience is quite similar between the two browsers. Certainly both are able to pinch and zoom and scroll and throw themselves around the pages without too much hassle. But I have found that currently, a lot of websites (including Google Reader for example) treat the HD7 as a primitive mobile browser and show it a very reduced and scaled down browser experience. This isn’t an issue with the phone and given time, I’m sure that Google will update their detection mechanisms and there will be fully fledged Smart Phone RSS reading. Other than that, I would say that I’m a little disappointed with the limitation of the favourites (there appears to be no way of organising the list) and more specifically at O2 for making Yahoo! the default search engine when typing into the browser address bar (an horrific pain in the posterior given that Yahoo! don’t detect that it’s a decent phone either!).

Other things I’ve noticed about the HTC7:

The Calendar is great. In additon to putting things in your diary with alerts to remind you when they are about to happen – your events in general appear on your home screen, showing you today and tomorrow’s events. Giving me a fighting chance of remembering the cat’s vet appointment more than 15 minutes beforehand!
The ringtone’s couldn’t be changed, or at least, not that I could spot.
No iTunes means no stupid updates pestering me to install Safari or Mobile Me or other Apple products which I have absolutely no desire to use. iTunes is like the modern day equivalent of Real Player from a few years ago. Zune is a nice enough experience. I found being about to sync my phone with the music I wanted was a lot easier and less hassle than iTunes. The same with my Podcasts and Videos – a great step forward from the alternatives.
Facebook integrated with my contacts is fantastic – it makes the whole experience seemless. While I don’t frequent Facebook overly often, I have a good number of friends and with all this merged into my phone book, I can on a whim simply write on their wall as easily as sending them a text. You can of course, take the alternative route and only import Facebook contact information for the people you already have Contacts for – which might tickle the fancy of more people.
The context search is useful. One of the three touch buttons at the foot of the phone (“Back” and “Home” being the other two) is for search and depending on what you are doing at the time, it searches different things. E.g. when in your People Hub (phone book) is searches for a contact, or when in the browser, it searches the web. Useful.

Summary:

The bottom line is that currently, I’m missing all the Apps that I had on my iPhone. Plain and simple. For that reason alone, the Windows Phone 7 is second favourite at the moment. But as this is something that I imagine will change in time, I do think that the phone will get better and better. And I for one, am really looking forward to seeing if Microsoft can whip Android into a real challenge to the iPhone and more importantly, challenge the iPhone itself! More competition in a marketplace is often a great thing – and I that’ll be true here.

Windows Phone 7: Getting Started Link-dump One of the things Microsoft will be hoping on is...
Isolated Storage on Windows Phone 7 As Windows Phone 7 doesn't have an SQL Server edition...

The Anti-Phonetic Alphabet

2010-10-15T20:50:35Z

This is my first post since a change of job for me, but it’s one that’s been brewing for a while.

Long has the phonetic alphabet enjoyed dominance over the ‘can you spell that for me’ market! Well, no more! The following is my suggestion to make telephone operators lives complete hell…! If you’re not paying for the bill and you don’t fancy being nice to the operator on the phone for whatever reason, then consider making the conversation very complicated and interesting with the new Anti-Phonetic alphabet.

Before we dive right in, I’d like to make two points:

1) Phonetic is an silly word as it’s not spelt the way it’s spoken and could quite easily have been in this list. The person who came up with the spelling had as much of a sense of humour as the person who decided to put an S in “Lisp”.

2) Not all letters in this list are idea. I’ve marked with an asterisk (*) the ones I feel could be improved and I’ve filled them with example words which are probably adequate for causing confusion.

Aubergine
Bdellium
Cygnet
Djinn
Ewe
Fort *
Gnome
Honour
Igor
Jalapeno
Knot
Llandudno
Mnemonic
Nguyen
Ouija
Pterodactyl
Quay
Right *
See
Tsunami
Urn
Ventripotent *
Why
Xenophobia
You
Zenzizenzizenzic

Make sure you have a nosey at the words if you don’t know what they mean, or even, how to pronounce them. Go forth and cause chaos! Muhahahaha!

No related posts.

Isolated Storage on Windows Phone 7

2010-09-10T20:30:09Z

One of the most amazing omissions from the Windows Phone 7 OS is an SQL Server of some description that applications can use (I think there is a SQL Server Compact edition baked into the build, but it’s only exposed to the native apps). This leaves anyone familiar with doing all their storage via relational databases in a bit of a lurch.

Having a look around, there were a few work-arounds, namely third party libraries such as Perst & Sterling. These act as a layer of abstraction that allow you to use LINQ to access your objects and could be of benefit for some of the more complex applications. I found both of them to have their drawbacks.

Perst: From McObject is one alternative, but if you plan on doing a commercial application, you should bare in mind their licensing, of which, their FAQ says:

No, Perst is not free. McObject Perst is available under a dual license. Under the GPL, you may evaluate the source code free of charge and you may use Perst free of charge in an application for which the source code is also freely available. If you wish to use a Perst in an application but do not or cannot redistribute your application source code, you can use Perst under a commercial license.

Sterling: This seemed promising, but I had a number of issues getting the code to work (it was late, in fairness) I decided to give up.

In reality though, most applications that are going to be made don’t need any complicated database structure behind them. Database implementations are most likely going to be overkill. This is where I decided to do what probably the majority of WP7 developers have decided to do, and “Roll-Their-Own” database solution. Mine is based on a general accepted practice, using XML Serialisation to store my POCOs. While it might have limitations and performance issues later down the line, for now – it’s performing very admirably and there seemed no point in premature optimisation just yet.

My Solution

The main class I created (MyDataContext.cs) contains the functions for both saving and loading the data, as well as the ‘schema’ for the entire database.

using System;
using System.Collections.Generic;
using IsolatedExampleApp.Data.Models;
using System.IO.IsolatedStorage;
using System.IO;
using System.Xml.Serialization;
 
namespace IsolatedExampleApp.Data
{
  public class IsolatedDatabase
  {
    public IsolatedDatabase()
    {
      // For each model that is a list item, you need to add a initialising statement to the Constructor
      Albums = new List();
      Artists = new List();
    }
 
    // These properties effectively form the publicly viewable schema of the database.
    public List Albums { get; set; }
    public List Artists { get; set; }
    public Options Options { get; set; }
 
    public void Load()
    {
      using (IsolatedStorageFile store = IsolatedStorageFile.GetUserStoreForApplication())
      using (IsolatedStorageFileStream stream = new IsolatedStorageFileStream("IsolatedExampleApp.txt", FileMode.OpenOrCreate, FileAccess.Read, store))
      using (StreamReader reader = new StreamReader(stream))
      {
        XmlSerializer serializer = new XmlSerializer(typeof(IsolatedDatabase));
        var unserialized = reader.EndOfStream ? new IsolatedDatabase() : (IsolatedDatabase)serializer.Deserialize(reader);
 
        // Each schema is repopulated with information when the app is loaded.
        Albums = unserialized.Albums;
        Artists = unserialized.Artists;
        Options = unserialized.Options;
      }
    }
 
    public bool Save()
    {
      try
      {
        using (IsolatedStorageFile store = IsolatedStorageFile.GetUserStoreForApplication())
        using (IsolatedStorageFileStream stream = new IsolatedStorageFileStream("IsolatedExampleApp.txt", FileMode.Create, FileAccess.Write, store))
        {
          XmlSerializer serializer = new XmlSerializer(typeof(IsolatedDatabase));
          serializer.Serialize(stream, this);
        }
        return true;
      }
      catch (Exception ex)
      {
        return false;
      }
    }
  }
}

As you can see from the code above, as you develop more data stores, the code needs updating in multiple locations.

Properties need setting for each one (they are the publicly available access points for the data).
Any LISTS<> require their lists initialised by the Constructor method.
When the data is ‘Load()’ed, each property must have it’s values manually set.
All the Models still need defining elsewhere in your application (in my example above, they are in the IsolatedExampleApp.Data.Models namespace.

If you can overlook this repeated typing, then this seems to be a good starting point for persisting data in your Windows Phone 7 Application. To use it should then be fairly straight forward.

_db = new IsolatedDatabase();
_db.Load();
 
// Adding an album...
_db.Albums.Add(newAlbum);
_db.Save();
 
// Deleting an album...
_db.Albums.Remove(deleteAlbum);
_db.Save();
 
// Add or Update an album...
Album existingAlbum = _db.Albums.Where(x => x.ID == album.ID).FirstOrDefault();
if (existingAlbum != null)
{
  Delete(existingAlbum);
}
Add(album);
_db.Save();
 
// Or just getting a specific album...
IEnumerable albums = _db.Albums as IEnumerable;
return albums.Where(x => x.ID == id).FirstOrDefault();

Any feedback, thoughts, options and optimisations for the above code will be well received. Happy isolating!

Windows Phone 7: Getting Started Link-dump One of the things Microsoft will be hoping on is...
HTC HD7 (Windows Phone 7) vs Apple iPhone 4 (iOS 4) ...when Microsoft announced that they would be launching themselves into...

Windows Phone 7: Getting Started Link-dump

2010-08-30T16:25:23Z

As you’re probably aware, Microsoft is finally going to attempt to enter the Smart Phone OS market with it’s new Windows Phone 7 operating system /platform / ecosystem. It’s going to have a hard time getting started (Android and particularly the iPhone OS have a gigantic lead and devoted user-base), but I think it has a good chance. Looking at some of the reviews of the hardware and it’s performance with the new OS, things are looking promising for the big M, if that is, they can pull off the marketing and get enough hardware vendors on-board.

One of the things Microsoft will be hoping on is a massive uptake of application developers, and to try and encourage that they’ve released and helped circulate a bunch of things to the community! This post hopes to point to some of the articles, videos, blogs and other sites by both Microsoft and others to help you learn and get started with WP7.

Obviously, before you get started, you want to download the various developer tools. They are currently in Beta and downloadable here. It’s been announced that the full non-Beta set of tools on the 16 September 2010. The tools are free – the only bit you pay for is a subscription that allows you to post applications to the Marketplace. That’s currently being listed as £67 GBP

Links:

Windows Phone 7 Developer Blog – very useful for keeping up to date with the releases and anything other major happening for the platform.
Windows Phone 7 Developer Portal (developer.windowsphone.com) – another good site for finding videos and other related training materials.
Promotional website for consumers appears to be at Microsoft/WindowsPhone.
Scott Hanselman’s “Walkthrough of the Developer Phone” shows some of features of the phone after getting one of the preview devices.
Detailed review from Engadget.com on a Samsung device using Windows Phone 7 – very promising outcome, marred only by a few minor let downs (basically, the absence of Multi-tasking and Cut-and-Paste).

Videos & Labs

Hello Windows Phone 7! the obligatory “Hello World!” application.
Microsoft’s Channel 9 has a great series hosted by Andy Wigley and Rob Miles called “Jump Start“. If you like video tutorials and talk through’s, this is a great starting point. There are some resources available for download as well to help you along the way. As far as things go, I can’t recommend this enough. It’s a great set of tutorials that seems to cover a wide area of the platform without going into great amounts of detail about each bit, choosing (wisely) to only wiz along the surface. All the videos are downloadable in a number of formats, including the useful MP4 for sticking on your iPhone (until such a time as you can get your mits on a Windows Phone 7 device of course!):
Windows Phone 7 Developer Training Kit – a bunch of labs and tutorials, maybe not as good as the Jump Start stuff, but still good and varied enough to give you a nice overview of all the features
Coding 4 Fun: Building a “Shuffleboard” application using Silverlight
MSDev.com has a bucket full of bitesize videos in a collection named “Windows Phone 7 in 7 Minutes“

More resources:

Creating High Performance Silverlight Applications for Windows Phone
Application Bar Icons for Windows Phone 7 – a bunch of useful icon’s that you may want to use in your application.
UI Design and Interaction Guide
Again, Scott Hanselman, this time on his great Hanselminute’s Podcast he covers Silverlight performance on Windows Phone 7
Panorama & Pivot are coming soon, more information is available from Jeff Wilcox.
With the absence of SQL on the Windows Phone 7 (at least initially), there is a market for some free libraries to make relational data management considerably easier. So far, two of the better ones are Sterling and Perst

HTC HD7 (Windows Phone 7) vs Apple iPhone 4 (iOS 4) ...when Microsoft announced that they would be launching themselves into...
Isolated Storage on Windows Phone 7 As Windows Phone 7 doesn't have an SQL Server edition...

Development SMTP Servers for IIS7.5 on Windows 7

2010-04-06T14:43:59Z

I’ve had one of them days. You know? That “simple task” that spiralled out of control and resulted in me losing half a day to it’s tricks! That task? It was sending an email from an ASP.NET (MVC2) application. Previously, I’ve always done this via setting up IIS and the SMTP server in there, but for some reason, Microsoft decided they didn’t want to include the SMTP Server in Windows 7 anymore (even ‘Ultimate’ – it might also be the case for Windows Vista). So, I had to find an alternative.

There were a few options available to me:

SMTP Server on Localhost: This was the obvious choice, but after trying Mercury Mail and it’s quarter of a million settings as it installed (I’m no Email Admin, so didn’t know the answer to all of them). It didn’t work and I’m not sure why. To rub salt into the would, there was no uninstall either – it proper irritated me and I gave up using it out of principal.
SMTP Server on Localhost that is really just a Relay. Well, sounded good – but again, it was designed by people with bigger brains than me and it failed to send to what I thought was a correctly configured IIS7.5 config pointing to my GMail account.
Fake Server: Something that doesn’t actually send emails, but pretends to.

The last one is the one I eventually choose and boy am I glad I did! I downloaded the excellent SMTP 4 DEV from Codeplex

I don’t have 100′s of emails cluttering up my email box for starters. Win!
It was so easy to set-up and it worked perfectly without a change to my code. Win!
It’s free. Win!

Here is some fake code that should send an email to the localhost.

MailMessage emailMessage = new MailMessage();
string messageBody = "This is the content of the email will be awesome!";
 
emailMessage.Body = messageBody;
emailMessage.Priority = MailPriority.Normal;
emailMessage.From = new MailAddress("no-reply@amadiere.com"); // obviously, this email address doesn't exist :)
emailMessage.Subject = "The answer is 42";
emailMessage.IsBodyHtml = false;
 
SmtpClient mSmtpClient = new SmtpClient();
mSmtpClient.Host = "127.0.0.1";  // localhost
mSmtpClient.DeliveryMethod = SmtpDeliveryMethod.Network;
 
mSmtpClient.Send(emailMessage);

No related posts.