Quick hacks vs doing it right with MVC3 dropdowns

by Ryan Fri, July 08 2011 18:24

An obscure issue popped up today and it was a bit of a pain to track down. A user with IE6 (this is going to go on for YEARS) could not post a form back on a website because even though they selected a number from a dropdown list, it failed validation and told them that they 'must select a number'.

All the fancy javascript jQuery and unobtrusive data annotation validation was working, except for this glitch.

 

Now you can't just tell these people to upgrade their browsers (well, you can, but good luck with that) as they still represent a LOT of money in the marketplace, I'm talking about thousands of pounds a week for one site owner.

Luckily I keep a few virtual machines of XP with IE6 on them for just this and could see the same behaviour myself. The dropdown looks like this (in MVC3 Razor markup);

   @Html.DropDownListFor(i => i.Quantity, new System.Web.Mvc.SelectList(new[] { 1, 2, 3, 4, 5 }, "Value", "Text", Model.Quantity), string.Empty, new { @class = "dish" })

This is a quick way to generate a dropdown list and populate it with a range of values. It outputs the following HTML;

<select class="dish valid" data-val="true" data-val-number="The field Quantity must be a number." id="SideDishes_1__Quantity" name="SideDishes[1].Quantity"><option value=""></option>
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

This looks OK to me and works in every other browser I've tried, but it seems that IE6 INSISTS on the 'value=1' field for each option. I would have expected the DropDownListFor method to output this anyway but if you bind to a simple list of native types (integers in this case) then you can't set the data field and the value field for the option element (an integer does not have properties, it just 'is'). To fix it, you need to go verbose in the code and do something similar to the following;

   @{
      var values = new[] { 1, 2, 3, 4, 5 }.Select(x => new System.Web.Mvc.SelectListItem
      {
         Value = x.ToString(),
         Text = x.ToString()
      });
      values = new System.Web.Mvc.SelectList(values, "Value", "Text", Model.Quantity);
   }
   @Html.DropDownListFor(i => i.Quantity, values, string.Empty, new { @class = "dish" })

Yes, it's ugly and I could make it a LOT better but it works. The option HTML output is now what IE6 expects;

 

<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>

 

I'm impressed by how compatible the jQuery team has made the validation so that it even works in IE and the only thing that broke was a false expectation of the dropdownlistfor method.

This bug took me a good hour to sort out with the Virtual Machines and testing, hope this post helps you sort it quicker. The workaround is from the following StackOverflow blog post on binding to integers

Tags:

Blog | MVC3

Visual Studio 2010 - buggier than 2008?

by Ryan Sun, June 13 2010 14:05

Buggy, definitely. Worth the hassle, yes.

The following occurs when trying to compare two schemas using the Data->Schema Compare->New Schema Comparison menu option and selecting two existing connections. Clicking 'Edit Connection' when the connections are selected you can't edit them either (the dialog just disappears) and after a few attempts, VS goes bang! To work around this error, go to Server Explorer and delete any old connections (you may need to delete them all to get it working).

You might get this a few times;

You'll need to quit VS and start again once that error starts popping up then the dodgy connections should have gone. If they are still there, keep hacking through them trying to delete (ignoring the errors) and restart again. If you still can't get rid of the dodgy connection, try expanding the node for it in server explorer. I got the following error which gave me a GUID I could hunt through the registry for to delete the data provider. Turned out my issue was caused by the VistaDb uninstaller removing the required files for a connection (which is what I wanted) but Studio fell over when it saw the headless connection.

I found some references to the dodgy connection under; HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\9.0\DataSources\{GUID-OF-PROVIDER-HERE}. After deleting all the references in the registry to it and the .suo file for the solution I found it was held elsewhere. So on with the hunt.

So far, one hour spent on this and no joy. Searching the C drive for all .udcx files (seems these hold connections) yielded nothing either, but very slowly. Reset the development environment (/resetskippkgs and /resetsettings as command line options to msdev), nowt.

Finally I fired up SysInternals Process Monitor and waded through the torrent of data it vomited when VS starts up. I happened across the directory; C:\Users\Ryan\AppData\Roaming\Microsoft\VisualStudio\10.0\ServerExplorer In there is a file ending in .SEView, this is where this junk is held.

I copied the file to a backup in the same directory (mistake) and tried again after editing the file, but the duff connection reappeared! Looking in Process Monitor, VS loads ALL files in that directory ending in SEView, so I moved them out completely and all started up well. Success, I can now compare two databases, two hours later!

The time technology saves me!

Tags:

Blog

Windows Mobile 7 by Paul Foster from Microsoft

by Ryan Mon, May 10 2010 22:25

Just a quick post to keep this thing up to date (and attract blog spam, I love it). We had an excellent speaker tonight at our user group in Hereford; Paul Foster from Microsoft presented on a ton of stuff in Windows Mobile and how to develop for it. He made it look easy but the designer tools scared me somewhat with their black turtle neck style UI and 'layers'. 'tis worth getting a look at Win Mo 7 before things pick up as devices are due to launch in the late Autumn and getting code working now on the emulator will place you in a good position for launch.

I recommend checking Paul's blog, the Windows Phone dev site and the XNA site to get up to speed on Win Phone.

Also, we had a good swag giveaway with decent T-Shirts, loads of MS Visual 2010 stuff (silly putty, screwdrivers, mice of the non-rodent variety) and a Windows 7 licence that MS gave us months ago and I found in the bottom of the swag cupboard. Everyone got something (I nabbed some silly putty). Thanks again Paul, I recommend you to get him at your user group (what, you don't have one!).

Tags: ,

Blog | nxtgenug

Balsamiq mockups - keeping the designers away

by Ryan Tue, May 19 2009 13:59

Balsamiq is the modern equivalent of fag packet scribbling (for non Brits, fag is a cigarette, not a slur!), somewhere you can quickly draw your software user interfaces without worrying about how they look. The best designs come from the back of fag packets apparently (perhaps they should have called it fag packet mockups).

If I had this at the height of the dot com boom I’d definitely have been saner and possibly would have made some cash. I ran a software development, web design and nerd creche at the time and we used to design the visuals in full for any sales leads we were going to see. It worked well apart from a few flaws;

  1. It would take days to get the designers to come up with good looking visuals.
  2. The customer would become fixated on the design (which was the point really, but it got too nitpicky). They would start asking to move this text over there and change the colour of that and could they have their logo animated in 3D. At this point we were still trying to get our foot in the door.
  3. If they saw a nice looking visual they would often wonder why we wanted to charge them £40,000+ for the system. After all, it looked finished.
  4. The nice imagery was just to get their attention, it had not been thought through by anyone so buttons would exist that did not make sense and the whole workflow thing had not happened yet.

As you can see, mockups looks a bit sketchy and this is intentional, I’ll explain why in a minute.

Along the top you can see the different groupings of UI controls. Selecting one of these will show the toolboxes with the UI elements in them, think of them like Visual Studio toolboxes with the controls in groups.

Hopefully you won’t end up with a design like below (from thedailywtf).

Mockups is not just a designer tool, in fact it is more targeted at developers who can’t do design (I include myself in that) as it takes away any fiddly decisions. For example, you can’t change the typeface from Comic Sans on anything, there is a good reason for this though. It appears that Comic Sans is the only typeface that is properly cross platform. Saying that, they do provide a way of changing the single font in use if it really irks you. By the way, because it is written in Flash and deployed using Adobe AIR it is cross platform and runs on anything that runs Flash (Windows, Mac and Linux, possibly ‘phones).

The documents are saved as XML which means you can write your own code to manage them (possibly translating to Winforms etc). There really is not that much to it, you drag and drop and set a few properties just like the VS designer.

The app is not free though and costs $79 (Monopoly money), real money is £52 which is a pittance really, you can find it at Balsamiq Studios.

Tags: ,

Blog | nxtgenug