Matthew M. Osborn

MVC Script & Css Helpers

Matthew M. Osborn — Tue, 13 Oct 2009 06:46:26 GMT

During development of MVC 2 Preview 2 I was lucky enough (I’m on the QA team after all) to get to code and check in a feature that I wanted to MVC Futures. In all actuality it is two separate “features” that basically do the same thing. Okay, I think I might be blowing it out of proportion they are basically two new HTML helpers “Script” and “Css”

The Problem:

When you add links to to files (aka Scripts and CSS) the URLs are normally relative to the current page’s URL. This means that if you have “../../Scripts/jquery-1.3.2.js” it means go up two segments then down to the scripts segment. This works great but when you start using routing the pattern starts to fall apart. By this I mean that because routes change often and don’t map nicely to folders going up two segments and down one might not get you to the right folder on all your pages. To get around this most people use app rooted paths “~/Script/jquery-1.3.2.js”. The “~” basically means go to the app root and then go down. However, this is not a concept that browsers understand “~” is handled by the web framework in this case ASP.NET and ends up getting converted to the proper relative path before being sent to the client. Like I just said HTML has no concept of what “~” means when you use it in the href or src of and HTML element “most” of the time the framework detects that and converts it for you. For instance ASP.NET will convert Link tags if they are in the head tag with the attribute “runat” set to “server”. However other tags like Script tags will not have their paths converted. So to get around this it is best practice to use the “Content” method hanging off the “URL” helper which will convert an app rooted path to the correct path.

<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="~/Content/site.css" rel="stylesheet" type="text/css" />
    <script src="<%= Url.Content("~/Scripts/jquery-1.3.2.js")%>" type="text/javascript"></script>
</head>

The Solution:

So you can see for yourself how this can make your code look ugly and then you have that “runat” attribute on the head tag that is some kind of left over from your web forms programming days. I soon grew very tried of copy and pasting the same tag over and over for each script and just changing the name. so I figured that the ASP.NET MVC framework had helpers for everything else so why not Scripts and CSS? So after a little bit of clever coding there is now a Script helper and a CSS helper.

There are a couple of ways to use them first and the most simple to to just give it a file name or a folder that is inside the default location. For Scripts that is “~/Scripts” and for CSS that is “~/Content”.

<head>
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <%= Html.Css("BlueTheme/site.css") %>
    <%= Html.Script("jquery-1.3.2.js") %>
</head>

Basically there is some very simple logic that says if the path doesn’t start with “~”, “../”, “HTTP”, or “HTTPS” it is a file name or a path that is under the default folder for each type. That leads me to my next point which is that if the path you give the helper looks like you are trying to give it a full path (aka the strings mentioned above) then it will still create the nice tag for you but wont add to the file path. This means that you can use this with the New AJAX CDN and still have all your script tags look the same at that top of the page. Hey call me vain but I like to have pretty code.

<head>
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <%= Html.Css("~/myThemes/BlueTheme/site.css") %>
    <%= Html.Script("http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js") %>
</head>

However there is an extra overload that the CSS helper that allows you to pass a media type. For those unfamiliar with CSS every time you link to a StyleSheet you can add the media type attribute that allows you to specify when to apply that style. The most common use of this is to define a “Print” style so when a user goes to print out part of your page the website will optimize itself for printing. If you choose not to specify a media type that style will be used for all the media that doesn’t have a StyleSheet defined for it (no media type is the helpers default).

<head>
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <%= Html.Css("~/myThemes/BlueTheme/site.css", "screen") %>
    <%= Html.Css("~/myThemes/BlueTheme/print.css", "print") %>
</head>

Also as I mentioned before notice that you no longer need to include the “runat” attribute on the head tag. This isn’t anything special but hey it looks cleaner.

The drawback:

Okay so this solution isn’t perfect, sorry I know I got you all excited and now I’m letting you down. The problem is that Visual Studio does not know to parse these new helpers when it updates intellisense. So yes that means not intellisense, sorry! However if you followed best practice and used the URL helpers you wouldn’t have got intellisense either. Previously I found myself not using the URL helper when I was developing and then just changing it to use the URL helper after I was done and I do the same thing with the new helpers.

Conclusion:

Like I said its not perfect but its a small improvement over the way things were done before. I would love to continue to improve these and maybe even bring them into the main framework if there is enough requests for them so please let me know what you think! But be nice this is my first try at coding a “feature”. You can download MVC Futures here.

ASP.NET MVC 2 Preview 2 Released

Matthew M. Osborn — Thu, 01 Oct 2009 07:28:00 GMT

I am proud to announce that ASP.NET MVC 2 Preview 2 has been released! So what are you waiting for? Go download it, its okay I’ll wait here… If you are running MVC 1.0 the good news is that just like Preview 1, Preview 2 can live side by side with it. However, as with previous preview releases, it is recommended that you uninstall Preview 1 prior to installing Preview 2. Currently there is no glamorous way of converting a MVC 1.0 project to a MVC 2 project but it is a pretty simple process and instructions can be found in the released notes.

Okay now for some more interesting stuff, the new features that are in Preview 2. If you missed Preview 1 you can read Phil’s post to see what was in that release.

Single-Project Areas: For those of you familiar with Multi-Project Areas from Preview one this should be a span. If not, an area is simply a way of segregating logical units of your application. For instance, think of segmenting the blog and store in a company website. The difference now is that this can all be done inside of a single project file.
Client Side Validation: Client side validation was something that the ASP.NET MVC framework was missing, well not anymore. Basically out of the box we support the ability to have nice client side validation when you annotate your model objects use Data Annotations. However, this is completely extensible and you can create your providers both for client side and server side validation.
ModelMetaData: As MVC 2 started to grow in its feature set it became apparent that the ability to easily access metadata about the model was very important. So after a few rubs on the oil lamp and a chat with a genie, poof we now have and object call ModelMetaData that hangs off of the ViewDataDictionary. Just like client validation this is completely extensible and you have the ability to create your own provider. Out of the box we have built in functionality for Data Annotations.
HTTP Verb Overrides: Anyone that has worked with ASP.NET MVC for any amount of time is familiar with HTTP Verbs. Basically a HTTP Verb is a value passed to the server such as GET or POST that tell the server what the client is trying to do. However, there are several lesser known verbs like PUT and DELETE, because quite simply most browser can only use three verbs, HEAD, GET, and POST. This is not true anymore! Well at least for ASP.NET MVC 2 that is. We know allow you to override the POST verb with any of the others. Along with that we have also create some nice shortcut attributes to use when marking actions in your controller just like the HttpPost one in Preview 1.
Tons of Other Stuff: To try to keep this post some what short I decide to wrap some of the smaller items into one bullet point as it would take a long time to explain them all. The short of it is that there is lots of cool features, bug fixes, and some API changes in Preview 2. Some of the notable ones are new code snippets, additional default templated helpers, and a new attribute to mark an action as needing HTTPS.

So please go download it, try it out, and give us your feedback! After all that is the whole idea of releasing these previews. Also I would like to give a big thanks to everyone on the team that helped to make this a successful release!

We want you! If you’re a test ninja

Matthew M. Osborn — Tue, 01 Sep 2009 07:34:49 GMT

Okay everyone, here is the deal, the ASP.NET QA Team has a position open and we are looking for the stealthiest ninja we can find! We are looking for someone who is able to help evolve the team processes, improve our tooling, and join us in the trenches as we test one of the best technologies out there. Overall the team is responsible for ASP.NET WebForms, ASP.NET MVC, Microsoft AJAX, and a whole slew of other technologies

We would like to find someone that shares our passion for our technology and our trade and someone that has spent sometime in the trenches. So if this sounds like something you’re interested in pick up your best uniform from the dry cleaner, polish your throwing stars, and visit our job posting. [If the job listing site is having trouble email your resume to Leslie Dietz, our test manager, please include “SDET Position” in the subject line]

FYI: If you listen to the Coding QA podcast you can get a good feel for what it is like being the frontline testing ninjas for ASP.NET.

1 year, 12 months, 52 weeks, 365 days

Matthew M. Osborn — Sun, 07 Jun 2009 10:02:15 GMT

Somewhere around a year and half ago I decided that I need a change of pace in my life. I applied to Microsoft thinking that there was no harm in trying and got an interview. A little over a year ago I packed up two suite cases with some clothes, packed up my house, and got on a plane to Seattle. It honestly doesn’t seem that long ago that it all happened, but the following Monday morning there I was in NEO (new employee orientation).

Through my year at Microsoft I have grown leaps and bounds both technically and personally. Let’s take a look back on what I have been able to do with this year. Well the biggest thing was simply learning how to do my job. Prior to joining I had little to no experience with QA. I don’t claim to be an expert but I feel I know what I am doing now. I started off working on ASP.NET 4 and have had the opportunity to work on the web forms feature crew (anything and everything to do with web forms). This includes the new ClientID abilities, Routing, and some SEO features. Along with working on our product I have also been busy helping to improve The Lightweight Test Automation Framework that our team uses for some of it’s testing. This also includes making a public release on the asp.net codeplex.com site. Another exciting venture that I have started in my year is starting up an ASP.NET QA related podcast, Coding QA. Coding QA is a podcast that I produce with Federico where we ramble on about everything QA related.

Now on to the good stuff, the lessons learned, and let me say some of these lesson were hard learned! First, I have learned that to deliver a successful product members of a team must be aware of that team. By this I mean that everyone should be focused on their work but they should also look out for other team members. This could be as simple as walking over and asking someone if they could use any help when they are stressed. Basically, make sure you keep the machine well oiled. I think the biggest and best lesson that I have learned is one of our PUMs favorite things to say “Come to me with solutions not problems.” This is a simple saying but I think that it really sums up several key points. First, don’t waste time medaling on what is wrong but on what you can do to make it better. Second, in life no one is going to help you, you need to be willing to help yourself. I know some of these are pretty deep and cheesy but like I said I have also grown personally.

Not all of my time has been spent hard at work, I have been able to have some fun along the way. I have been able to take advantage of the perks of working for a big company (company picnic and the company meeting where Rainn Wilson hosted). Also Microsoft, sent me to Tech·Ed EMEA which was in Barcelona, Spain! I have also been able to meet some many new and interesting people.

When I left to come up to Seattle lots of people warning me about the “honeymoon phase.” Meaning that while I would love the job at first, I would get bored and wore out with it shortly after. I am very pleased to say “I TOLD YOU SO,” a year later and I still love waking up every morning and going to work. Here is too many more years to come! I’d also like to say thank you to everyone that has helped me along the way. A very special thanks go out to my family who have been extremely supportive of me even though I am thousands of miles away!

Coding QA Podcast Launched!

Matthew M. Osborn — Wed, 06 May 2009 07:20:35 GMT

It is my pleasure to announce to you the official launch of the Coding QA Podcast. Federico and I have been working on this for several months and have already released four shows with a fifth waiting to be edited. Coding QA is a weekly show about testing from the trenches. Federico and I are members of the ASP.NET QA team, and in this podcast we share our views about everything that has to do with testing and our experience of being the front line testers of a web platform. This is just one of several ways the QA team is engaging with our customers and we have received positive feedback. So please, visit the site, tune in, and let us know what you think.

ASP.NET QA Podcast – Episode 4

Matthew M. Osborn — Mon, 13 Apr 2009 21:56:29 GMT

Download : Episode 4

In the fourth installment of the ASP.NET QA Podcast Federico and Matthew discuss “The Good,” “The Bad,” and “The Ugly” of the history of the ASP.NET QA Team. Discussion ranges from the dark ages, to the renaissance, to the industrial revolution, to the “21st and half century”. Join them as they discuss the lessons learned and how the team has improved over time.

The team released the April update to the Lightweight Test Automation Framework.
“The Dark Ages” ASP.NET 1.0/2.0
- During this time the team was very focused on automating everything.
- (disadvantage) This approach is not good with a changing Spec.
- (disadvantage) Bugs were being found to late in the process.
- (advantage) Excellent automation coverage.
“The Renaissance” Atlas/Microsoft Ajax
- The division moved to a feature crew model for development and QA.
- (advantage) The team adopted a heavy unit testing practice. Increase in code coverage.
- (disadvantage) The QA team still worked has it had before. It would automate everything is less time.
“The Industrial Revolution” ASP.NET 3.5
- The QA team began to adopt the Feature crew model and started the process of agile testing with exploratory testing.
- (advantage) Bugs were being found at the beginning of the process.
- (disadvantage) The team still wrote a large amount of automation.
“21st and half century” ASP.NET 3.5 SP1/ASP.NET 4.0/vNext
- The team has really started moving away from automating everything and is spending more time investigating user scenarios.
- The team has formed its own unique blend of agile, scrum, and any other buzz word project management theory.
- (advantage) Creating and automating sample applications provides feedback for real world customer scenarios.
- (disadvantage) The team is young and is still learning the best practices.
- (Struggle) Costing has become less of a clear cut process.
- (Struggle) The is still a barrier between the QA and Dev teams.
- (Struggle) No one wants the blame when a bug is found.

Links from the show :

Lightweight Test Automation Framework April Release

Matthew M. Osborn — Thu, 09 Apr 2009 19:10:50 GMT

The April release of the Lightweight Test Automation Framework for ASP.NET has just been posted and you can download it here. For this release, the team has worked hard to include the following bug fixes and new features. Please continue to give us your feedback as many of the fixes and features are based what we have heard from the community.

Improvements to the user interface

A new look has been given to the test name when it passes or fails. There is both color and visual queues that indicate weather a test has passed or failed. Failed test names also appear slightly larger to help them stand out.
There is now a “Run Failed Tests” button. This button will open a new browser window that will select and run only the failed tests, for easy verification of fixes.

The ability to automate popup windows

In previous versions of the framework there was no way to verify the contents of a popup window. With this release we have far better support for opening and verifying the contents of popup windows.

HtmlPage page = new HtmlPage("MyPage.aspx");
page.Elements.Find("OpenPopup").Click();
// get popup window
HtmlPage popup = page.GetPopupWindow(1);
// verify title of popup
Assert.AreEqual("This is the Popup Page", popup.Elements.Find("h1", 0).GetInnerText());

The GetPopupWindow method returns a HtmlPage object that is representative of the window at that index. This is pulled from the collection that is maintained by the framework with index zero being the main, or starting, window. In this example index zero is MyPage.aspx, while index one is the popup window.

The ability to find elements by partial attribute values

In previous versions of the framework when finding elements on a page you could only use the ID attribute to match against. So if you wanted to match all the elements that had a CSS class applied to them, as is common in jQuery, you had to supply that whole value for the class attribute. So, in previous versions of the framework if you wanted to find elements that had a CSS class applied to them you had to specify the whole value for the class attribute. Meaning that if the element has more than only class and you search based on only one class that element would not be returned. Now you have the ability to match based on any part of the value for the attribute. Below is an example of how to find elements that have the CSS Class “blue” applied to them.

HtmlElementFindParams find = new HtmlElementFindParams();
find.Attributes.Add("class", "blue", MatchMethod.Contains);
ReadOnlyCollection<HtmlElement> elements = page.Elements.FindAll(find);

Assembly name change

The assembly name has been changed from “Microsoft.Web.Testing.Light” to “Microsoft.Web.Testing.Lightweight.” The namespaces have not changed.

Podcast Playlist

Matthew M. Osborn — Wed, 08 Apr 2009 06:22:00 GMT

Each day my commute takes anywhere from 45 minutes to 1 hour depending on the traffic and if I ride the bus. About a year ago, I decided to make the most of the stop and go traffic and start listening to podcasts in hopes that I might learn a thing or two. Most people at work know that I am an avid podcast listener and always ask me for my favorites, so I figured I would compile a list of my top tech/geek podcasts.

Rating *	Name	Type
	.NET Rocks	Code/Interview
	Alt.NET	Code
	Behind the Code	Code/Interview
	StackOverFlow	Code
	Boagworld	Web Design
	Channel 9	Code/Interview
	Channel 10	Interview/Misc
	Elegant Code	Code
	Google Developer Podcast	Code
	Hanselminutes	Code/Interview
	Herding Code	Code
	Pixel8	Code/Interview
	Ruby on Rails Podcast	Code
	System	Hardware/Geek
	The Rissington Podcast	Web Design
	This Week in Tech (twit)	Geek
	Pixel Perfect	Photoshop
	Coding QA Podcast	Code/QA

* Based on the frequency I listien to them and overall content

ASP.NET QA Podcast – Episode 3

Matthew M. Osborn — Tue, 31 Mar 2009 23:08:59 GMT

Download : Episode 3

In the third installment of the ASP.NET QA Podcast Federico and Matthew interview Mark Berryman, a test lead on the ASP.NET QA Team. Join them as they learn the ins and outs of test management through Mark’s eyes.

Release of the Mobile Browser Database by Live Dublin.
April refresh of the Lightweight Test Automation Framework.
Interview with Mark Berryman.
- What is the difference between Test Manager and Test Lead.
- A little history of Mark and how he came to join the ASP.NET QA team.
- Responsibilities of a Test Lead / What Mark is working on.
- What Mark looks for in a tester on his team.
- Challenges Mark faced when he was an IC (individual Contributor).
- What Mark would change on items he has tested in the past.
- How Mark Manages risk on his team.
- Who is Marks favorite person in the whole world.

Links from the show :

ASP.NET QA Podcast – Episode 2

Matthew M. Osborn — Fri, 20 Mar 2009 18:52:26 GMT

In the second installment of the ASP.NET QA Podcast Federico and Matthew discuss MIX 09 announcements and the ins and outs of supporting various browser versions on the ASP.NET QA team.

MIX 09 Conference announcements
- MVC RTM 1.0
- Silverlight 3.0
- Web Application Installer
- Web Application Gallery
What browsers the team tests on and how they decided which browsers to test.
What it means when the team says they support a browser.
How the team manages the risk of not testing on every possible browser.
The timeline for testing features on multiple browsers.
The infrastructure the team has to test on multiple browsers.
How the team keeps up with the fast growing browser market, such as the release of four major browsers in just a few months.

Links from the show :

Download : Episode 2