Resolving LINQ Error: Missing Query Pattern Implementation

There are a couple of errors that I have come up in working with LINQ and LINQ to SQL that have common roots.  There are a couple of easy fixes when you run into the following error:

Could not find an implementation of the query pattern for source type <SomeType>.

You will also receive some further information about the error, usually along the lines of one of the following:

• 'Where' not found.
• 'Select' not found.

Fix 1: LINQ Using Missing

This one is easy: just make sure you have the following using statement in your class file:

Fix 2: Got Members?

Use the correct member of the object you are performing a query on, and make sure you’re not intending to use a property of mehod of that type.

For Example, where _dc is a DataContext object for LINQ to SQL, I have absent-mindedly forgotten the table reference in the query:

The above should be written as follows to avoid the query pattern implementation error:

That one can be a little more tricky because – especially if you’re coding late – the compiler error doesn’t really lead you to a ‘I missed a property reference’ with that error.

Fix 3: Wrong Type

Make sure you are trying to query an object that works with LINQ.  Specifically, LINQ to objects will need to have an implementation of the IEnumerable interface in the object that it is trying to query.

If you run into something that is called GetNameList, but it returns a delimited string instead of (the expected) List<string>, you can still query it after you take a simple step and do the split:

…and those are the most common ways to solve issues around the missing implementation of the query pattern for ‘x’ problem.

ASP.NET MVC and jQuery Part 3 – Model Binding

This is the third post in a series about jQuery and ASP.NET MVC 2 in Visual Studio 2010.

100% of the developers I have talked to this morning are enjoying jQuery and how it makes ASP.NET MVC sites a treat to work on. Of course, the sample size was one (1) developer, and he’s writing this post. Just sayin’.

In this article I’m going to cover some of the model binding scenarios that work seamlessly with these two technologies, starting off with some background and a sample, then progressing to more complex concepts.

Model Binding Basics

Model binding occurs in the processing of a request in the MVC framework, after routing and the creation of the controller. After the controller comes out of the factory, reflection kicks in to match up the request from the routing engine (as a result of some client action) with any parameters in the HTTP request.

Said another way: form values and querystring parameters get automatically turned into .NET objects in the MVC framework. Cool.

To provide a simple overview of how model binding works, we’re going to set up a quick demonstration. Start up the IDE and create an ASP.NET MVC 2 Web Application. Delete the Index file (we’re going to create our own later). Here’s the steps we’re going to follow:

• Create a new model called Person (and build our project)
• Update our Controller to setup an “empty” person for our view
• Create a strongly-typed view to create a person
• Create an action method on our Home Controller to capture the ‘create’
• Let the MVC framework do the rest

We’re not actually going to persist anything here, this is just a show-and-tell.

The simple parts

Navigate to your Models folder and right-click to Add –> Class called Person. Complete the class out as follows:

We need to build our project here (SHIFT + CTRL + b) for the IDE to be able to see our class in later steps. The type-awareness from reflection requires that our type exist in an assembly.

Pop over to Controllers –> HomeController and delete the ViewData assignment. We’re going to create a new Person here and return it with the view. Our action looks very simply like so:

Right-click anywhere in the method and select Add View… from the context menu. We are adding a view named Index, setting it to be a strongly-typed view and setting the view content to Create. This will allow code generation to output the basics of the form we’re going to use.

Note that here, or anytime you try to add a view, that if your model hasn’t been updated by building your project your types won’t appear in the View Data Class drop-down. You can cancel, build, and re-open the dialog if that is the case.

The page that is generated is super handy as a starting point. Even if it doesn’t save me much time (after all the changes and deleting I do) for some reason it just makes me feel better that the computer had to do some work too.

Let’s clean it up a bit. Remove the validation controls, delete the DIV with the ‘back to list’ link in it and change the H2 to something more interesting.

Because I’m not going to be posting back to my Index action method, I need to also update the using statement to have to correct calls created for submitting the form:

Html.BeginForm("CreatePerson", "Home")

Finally, let’s add a bit of code with the corresponding method, CreatePerson, and a breakpoint in our Home controller:

The above doesn’t actually do anything (and won’t go anywhere past the breakpoint), but if you pause where I suggest and evaluate the Person object or the name that was assigned the string, you’ll see the values populated.

How did the Model Binding Work?

There are actually a ton of in-depth explanations out there, but here is the summary of what we’ve done and what the MVC framework does to support model binding:

• We have a class with public properties
• The template engine created a page for us with the HTML helper TextBoxFor
• TextBoxFor uses the name of the public properties to generate a form input with the same name
• The template creates a form to host those controls, which we directed to our controller and action
• When written to the browser, the form action is set to “/Home/CreatePerson” using the POST verb
• The MVC framework routes the form submission to the Home controller, then uses reflection to find the CreatePerson method
• Because the method accepts a Person object as a parameter, the MVC framework evaluates the HTTP request (querystring parameters, form values) and then hydrates an object for us

Now, Let’s Make it Interesting

So far, this has just been a demonstration of simple model binding in the MVC framework. Let’s get jQuery involved.

• Change the controller action to a partial view result
• Create a partial view that reveals the created person
• Add jQuery and jQuery UI to the Site.Master file
• Remove the using statement from the Index page
• Modify the input so it’s easier to select in jQuery
• Add a DIV to store the results of the create
• Add a calendar selector for the birthdate
• Submit the form via jQuery when the user clicks the button
• Clear the form when the partial view result comes back, and display the result

Let’s start by changing the method to only accept POSTs and simply returning the Person object we were passed in to the PartialView.

Right-click anywhere on the method and select Add View… from the context menu.

This time we’ll create the view as a partial, it will be strongly-typed to Person again, but we’ll set the View Content to Details.

The tooling support for the MVC Framework in Visual Studio 2010 will then create the ASCX (server control) for us with all the fields displayed.

Delete the P tag at the end of the generated control with the ActionLinks in it, leaving only the control tag at the top and the FIELDSET control.

Next, pop into Views –> Shared –> Site.Master and add jQuery to the HEAD of the master page. Let’s also add jQuery UI at this time to open the doors to some other augmentations. For full functionality you’ll need the CSS and the images folder in your project as well, and the CSS linked in the HEAD of the master page.

In Index.aspx, remove the using statement so that the form is no longer generated. This is easy if you use Visual Studio 2010’s collapsible regions (you can collapse the FIELDSET tag to see the whole using construct).

Add an ID with a value of “create-person-button” to the submit button at the bottom of Index.aspx. Lastly, before we get scripting, add a DIV to display the partial view when the person is ‘created’. These last two bits should look like the following:

On to the script

jQuery gives us a way to easily make AJAX requests via POSTing to the server. We pass in a map of data that the server is expecting. The result can be passed to a function that evaluates the results.

With the inputs setup the way they are and our placeholder…uh…holding a place, we’re all set to execute our POST.

We’ll write a helper function that will process the results of the POST operation and, of course, a jQuery ‘document ready’ event handler to setup the calendar and trap the submit button click.

Most of the code should be easy enough to follow along. The one interesting bit is that the data map need not be constructed with proper case. That is, if your fieldname is FirstName you can use FiRsTnAmE as the name in the data map and that is okay.

Run the app and enjoy!

The jQuery UI datepicker in action:

The form cleared after submit and the results of the POST displayed:

Some Caveats

At this point we don’t have any validation in place, we’re not saving to a database of any kind and we’re hooped if there’s a server-side error.

Unfortunately the jQuery POST doesn’t play nicely with unhandled exceptions that are thrown on the server. $.post is shorthand for a sub-set of the functionality (with some presets) of $.ajax, and only maps a handler for the success event (not error events).

To see this in, well, inaction change your CreatePerson action to the following:

This will instruct the MVC framework to pass the person object through to a view named “foo”, which doesn’t exist. If you run the form at this point, and submit, you’ll see no errors (unless you attach a debugger, like FireBug, to the script).

More to Come

In my next article I’m going to look at more complex data scenarios, like selections from a list and posting arrays back to the controller. I’ll also integrate some other goodies, like jQuery UI’s autocomplete, to help users pick a color.

Resources

• Download the project created in this post
• View the rest of the series
• jQuery’s web site
• Information on $.post
• Download jQuery UI

VS2010 Box Selection Trick – Copy and Paste-ery

Here’s a quick tip showing off one of the cool features of box selection in Visual Studio 2010.

This one deals with copy-and-paste.

A simple scenario

Perhaps you are trying to preload some data into a StringBuilder for testing something out. 

As a simple example, let's assume you have a text document with a list of 20 names that you want added to a StringBuilder.

1. In the method where you wish to build the list, type sb.AppendLine(""); where sb is the name of yourStringBuilder object.
2. Quickly copy & paste this line 20 times to set up a receiving area for the names.
3. Open the text file of names in Visual Studio 2010.  This is important because you want to leverage the smarts of the IDE when you copying the text.
4. Rather than line-selecting the names, box select them with the mouse while holding the ALT key (it's okay if you capture whitespace when the names are longer than others).
5. Copy the selection to the clipboard.
6. Return to your method. Vertically box-select the space between the quotes, again by using the mouse to select while holding the ALT key. You get a thin line for a selection that is zero characters wide.
7. Paste your selection.

Here’s an example of the result:

Cheers!

They Must Be Listening!

I recently posted on how obscure I thought it was to be putting files on the Windows 7 jump list for Visual Studio 2010.  After all, no one works on ‘files’, we work on Solutions, or at least Projects.

I actually counted the files I worked on yesterday: 44.  That would be one big (meaningless) jump list!

Jumping Reloaded

Thankfully, Microsoft heard my pleas. 

Now, I can’t take all the credit – I was not the one who coded the changes – but I can at least take most of the credit.  I’m sure no one else in the world mentioned this!

I had to use my artistic abilities, once again, to make it clear how I felt about the way jump lists were implemented in the release version of Visual Studio 2010.

I will make signed copies available of both the “Bad” and “Good” artwork for a minimum contribution of $400 USD via PayPal.

;o)

ASP.NET MVC and jQuery Part 2 – Suggesting Content

This is the second post in a series about jQuery and ASP.NET MVC 2 in Visual Studio 2010.

Two perpetually frustrating tasks I have dealt with are scratching out a UI to collect data and having to work with that data client-side. Thankfully, a marriage of jQuery and ASP.NET MVC make this much more appealing and helps us to achieve, very quickly, a usable interface.

Suggesting Content from User Text

If you’ve used forums or user communities such as MSDN or StackOverflow where you can pose questions to peers, you’ve likely noticed that as you type your question related content begins to appear.

Here, we’ll replicate that behaviour and show how easy it is to make it work using jQuery and ASP.NET MVC. Because I will use some contrived data to make this work I will also include a solution download at the end of the article.

The Basic Steps

If you have a good grasp on things and just want to give it a try, here’s what you need to do:

• Create an ASP.NET MVC 2 Web Application
• Add jQuery to your Site.Master page
• Establish your model for the results of the search
• Create a repository to return a set of results
• Create a controller action to return the list of results in a partial view
• Create the required partial view
• Create the entry form that lets users ask questions
• Write script to take the form input and send it to the appropriate controller action, updating a DOM element with the results of the call

The Walkthrough

Setting up a project and getting jQuery was highlighted in the first article in this series. Create the project and get it set up for jQuery before you get going.

Creating a Model

Under normal circumstances you’d be working from a database that stores the related content you wish to display. Your model

Right-click on the Models folder in the Solution Explorer and click Add –> Class. Name the class Question and click Add. We’re going to add some properties to the class. This is really easy with auto-implemented properties in c# and the prop snippet. Type prop inside the class and you’ll see the following:

Hit tab and Visual Studio will generate the code you need and give you some assistance in filling in the key bits. You’ll notice the hightlighted text. You can use tab to cycle through the highlighted sections, which will select the text for you, and you can just over-type your values. Press enter to exit the snippet.

Add the following properties to the class:

• int UpVotes
• string Title
• string Tags

Building the Repository

Right-click on the Models folder and add another class called QuestionRepository. We are going to fake a database here and create a property called Questions. Make the property private and of type IEnumerable<Question>.

When the class is created we want Questions to be filled with some data to emulate something like a DataContext you would see if you were using LINQ to SQL. Create a constructor and populate a List<Question> with several questions. This is easy if you use the parameterless constructors of c#. I even just write a blank one, then copy-and-paste it out:

Fill in the blanks! For my sample (and in the download) I have added about 10 questions and assigned the list of questions to the class’ private Questions property. I also assigned the UpVotes to a random number between 0-20 so that I could sort off of it and get different results.

Next, add an internal function called FindMatchedQuestions with the following signature:

The algorithm for deducing the related questions is not the subject of this article. Though I’ve included some basic logic to make it work in the download, here’s all you need to get going for now:

With that inside our ‘find’ function, we’ll always get some random results. Use the downloadable project for search-relevant results.

At this point, let’s build our project (Shift + CTRL + b) to get our models compiled and help out our tooling. If you do not compile, some steps will not be as smooth as I suggest; MVC tooling uses reflection to find types in namespaces, types that don’t exist without an initial compilation

To the Controller

Navigate to Controllers –> HomeController.cs and open it up. Add a new public PartialViewResult to the class called FindRelated that accepts a string parameter. Add the following code to the method, which calls the repository to get some data (the model) and returns a PartialViewResult with said model.

Visual Studio 2010 contains some great helpers for the MVCers of the world. While the library is heavily tested, (mostly) strongly-typed, robust and extensive, it also allows us to rely on convention to afford us great convenience in code and in tool support.

The first convenience I used here is part of the framework; by passing my model into the PartialView() that I’m returning, the framework looks for a View that matches the name of my action (FindRelated) and passes the model to it. The executed result is what is returned to the browser (after the framework is done with it).

The second convenience I’m demonstrating comes from the tooling support and the IDE’s awareness of the MVC conventions. On to our View…

Building the Partial View

I’m not going for style points, here, so I’m going to use what we get for free. Let’s use that convention-aware tooling and create our partial view by right-clicking on the Home folder in Views, then selecting Add view…

You’ll see the following:

This is okay, but there’s an even better way to do this. Cancel the wizard and go back to your HomeController source file. Right-click anywhere inside the the FindRelated function and click Add View…

Now, you’ll see the already-named, convention-following parameters for creating your view. We’re going to set the wizard to create a partial view that is strongly-typed with the Question class. We’ll also set the View content to List.

The template outputs a table for us, which is acceptable, but it won’t look great for our purposes. For now, let’s just clean up a little bit by:

• Removing the first row which contains the headers
• Removing the first column in the foreach with the ActionLinks
• Removing the column that contains the output for item.Tags
• Removing the P tag at the end of the View with the Create link

If you kill the whitespace in the document you are left with a very short Partial View:

To finish off the view, add an H3 tag for a title and set the contents to Related Questions.

A Quick Test

At this point, we’re basically ready to rig up our functionality. If you want to see the results of your work so far, we can just make a request to the controller’s PartialViewResult action and see the list of related content. Press F5 to run the project, then enter the following in your browser (remember to replace your port number!):

http://localhost:PORT/Home/FindRelated?searchText=foo

Looking at the URL we can observe the following interesting things:

• Home is the name of our controller
• FindRelated in the name of our action
• searchText is the name of the parameter in our action
• The view that is rendered sits in a folder called Home which is the first place the framework looks when resolving views for a controller called HomeController

Through convention and the routing support in MVC 2 and ASP.NET we are able to see our results. If you examine the HTML source you’ll notice there are no HTML, HEAD or BODY tags; they aren’t rendered from partial views.

Here’s the results of my test view:

Again, not pretty, but it will do!

Involving the User and Adding Script

The default template for an MVC 2 project includes Index.aspx. Open it to edit from the Views –> Home folder in Solution Explorer.

Delete the H2 tag and the P tag that were so kindly added to the home page for you.

Add two DIVs. One will host the user input control and the other will be the container for our results, so we’ll ID them appropriately. Specifying an ID allows us to work directly with the controls with a simple jQuery selector.

Expand the user search container to include brief instructions and a text input.

Finally, add your SCRIPT tag so we can insert some JavaScript. First, lets add our function that can update the contents of our results placeholder:

Next, let’s add a jQuery handler that is executed when the document is fully loaded. In here, we’ll bind the ‘blur’ event of the text input to a the SubmitQuery function we just wrote:

That should be it! Now, just like when you tab out of the question asking box on StackOverflow, your query will be submitted and a list of related questions can come back! Run the app with F5 to see the results. Enter some text and tab out of the text box to see the list load.

Wrapping Up

Obviously this is not a complete feature-for-feature exhibit of a related-question section on a site, but it’s a good start. In the download I have improved the search results (somewhat) and styled the results to look a little more like SO’s.

You can also extend your model to include an ID, or use a model from a database. With an ID, you could then create a controller action that loads a question, given an ID, and outputs a view that is strongly-typed to render a complete question.

Good luck!

Resources

• Download the project created in this post
• View the rest of the series
• jQuery’s web site

ASP.NET MVC and jQuery Part 1 – Getting Started

This is the first post in a series about jQuery and ASP.NET MVC 2 in Visual Studio 2010.

If you’ve had web development experience with ASP.NET and JavaScript it is highly likely that you’ve heard of or are maybe even interested in the new partnership of these two technologies.

Getting started isn’t terribly difficult, so I’m not going to over-complicate this post. A couple of things to clear up, then we’ll jump to the meat.

What is the ASP.NET MVC Framework?

Model-View-Controller, abbreviated as MVC, is a design pattern (a concept) that helps us organize our code in such a way that we can keep clear separation between our data, our behaviours & business rules and our user interface. Those parts, respectively are referred to as the model, the controller and the view.

The MVC Framework for ASP.NET MVC gives us tools support, conventions and a base set of classes to enable use of this pattern, rather than the default Page-Controller pattern that is used in ASP.NET.

What is jQuery?

There is a reference to every element in an HTML document and JavaScript has access to them. With JavaScript, you can manipulate the DOM and write scripts to animate parts of your web page, make AJAX requests or perform validation.

Once you’ve written that code, you then need to keep a repository for it (you don’t want to write it again). When you want a new feature you might need to make breaking changes. You will have performance issues and browser compatibility problems, perhaps even platform-related issues.

jQuery is a library of JavaScript code where the kinds of things you want to do are already done. It is cross-browser compatible, has many pre-built components and has better performance with every release.

Think of jQuery as a way of “doing something” to “a group of things,” even if it is a group of one. You almost always begin by finding “the things” and then performing an action on them. “The things” are elements of the DOM like links, DIV tags, images, form elements, forms or the document root itself.

The Basic Steps

For you impatient types out there (like me):

• Create an ASP.NET MVC 2 Web Application
• Add the jQuery reference to the Site.Master to enable jQuery on all pages
• Use the if(false) technique to enable IntelliSense on partial views
• Use script references to enable IntelliSense on stand-alone JavaScript files

The Meaty Version

Start Visual Studio 2010 and create a new project. Navigate to the Web category and select ASP.NET MVC 2 Web Application. Name your project (I used Spike.jQueryMvc) and press OK.

Visual Studio will ask you to create a Unit Test Project. Just say no for now (I’ll cover tests in a later post). Finish the wizard and you’ll have your MVC project created.

Open up the Site.Master file which you will find in Views –> Shared in the Solution Explorer. Expand the Scripts folder as well so that you can see the default scripts.

In the HEAD tag of your Site.Master, drag the jQuery ‘min’ file and, below it, the jQuery ‘vsdoc’ file. Wrap your vsdoc file with an if(false) statement. The vsdoc will never be written to the browser (because false is never true) but Visual Studio will pick up the file and enable IntelliSense with this trick.

We’re all set to use jQuery and Visual Studio 2010’s awesome IntelliSense.

Now, navigate to the Index.aspx page in Views –> Home and open it up. After the closing P tag, add the following code:

<script language="javascript" type="text/javascript">
$(function () {
   $("p").click(function () {
       $(this).slideUp();
   });
})
</script>

You’ll notice as you’re typing that Visual Studio is popping up help text for your jQuery functions.

Press F5 to run the app. You will be prompted to modify the Web.Config file; accept this.

The browser will open and you’ll be staring at a slightly-modified default MVC page. Click on the text “To learn more about ASP.NET MVC” and see your jQuery in action.

FTW? How did that work?

Here’s the basics:

• A SCRIPT tag was added to the document
  
  
  
  
  



• We used a jQuery shortcut to wait for the document and run a function when it was completely loaded
  
  
  
  
  



• When loaded, we found all the P elements in the DOM and created an event handler to respond to user clicks. This is done with an anonymous function
  
  
  
  
  



• Inside our click event handler, we used another jQuery shortcut $(this) to select the P element that the user clicked on, and we told it to use the slideUp animation
  
  
  

The first shortcut is basically an event handler – in this case an anonymous function – that gets executed when the document is loaded. You should use this on every page because jQuery can’t find elements that haven’t yet been added to the DOM.

$(function () {

})

Inside this function – again, that gets executed after the DOM is loaded – we use a jQuery selector to find all the P elements in the document and attach a click handler to them.

$("p").click(...);

The selector can work with any element, ID or class. For IDs and classes you use the CSS-style sytax (# and . respectively), so for a input of type text with an ID of “first-name” you could find it with jQuery like so:

$("#first-name")

All that’s left is the anonymous function we used as an event handler.

function () {
$(this).slideUp();
}

We call the slideUp animation for the clicked element and let jQuery do it’s business.

Feedback

I have started this series to help a friend who is learning about web development. I found that by writing these tips out that I was gaining a better understanding of the underlaying technologies myself. I hope it can serve as a reference to others out there as well.

That said, if there’s something you’d like to point out, a question you have or a topic you’d like me to cover, please let me know and I will do my best to respond.

Update the ASP.NET MVC 2 Template for jQuery 1.4.2

Visual Studio 2010 ships with jQuery 1.4.1 out-of-the-box. This works great, fixes some issues and works fine with jQuery UI but it does not have all the performance improvements and tweaks of 1.4.2 including the delegates and support for hover() with live().

1.4.2 is nearly twice as fast as 1.4.1 on similar tasks.

“I Am Speed.”

You can take advantage of Visual Studio’s Export Template feature from the File menu to do update the template very quickly. The steps would be as follows:

1. Create a new project using the template that you want to update (like, ASP.NET MVC 2 Empty Web Application).
2. Make any changes that you like, including updating the jQuery references, or perhaps baking jQuery into a Site.Master file that you add.
3. Create an icon that you would like to use for your template (optional).
4. Grab a screen shot that represents your changes or maybe a picture of your mom or something that you can use to identify your project in Visual Studio (optional, especially the Mom pic).
5. Click File –> Export Template and fill in the name, description and optionally the graphic files that you wish to use.
6. Make sure the auto-import checkbox is ticked, then run the export.

The next time you create a new project your exported template will be in the list to choose.

Or, if you want Job Security…

If you want to learn more about what’s going on behind the scenes, why not try doing it manually? It takes a lot longer and you can mess it up, but it’s also good to learn what’s going on when you run through a wizard.

I don’t want to have you bork your templates, so let’s find and make a copy of the existing template used. Mine was located here:

C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE\ProjectTemplates\CSharp\Web\1033

…and was titled EmptyMvcWebApplicationProjectTemplatev2.0.cs.zip

Copy the template and paste it into:

My Documents\Visual Studio 2010\Templates\ProjectTemplates\Visual C#

Unzip the package to a directory of the same name as the ZIP, then delete the ZIP file. I also renamed my extracted folder to EmptyMvcRefresh.

Make Some Changes

Next, go grab the latest version of jQuery. You can include any other custom scripts and frameworks that you want at this point. jQuery 1.4.2 is current at the time of this post, but there is no VSDOC for it yet.

Navigate into the scripts directory in the extracted files and paste in the updated jQuery source. I also grabbed the minified version (which I use in production) and deleted the 1.4.1 files.

Next, we need to hand-edit the project file. Open up EmptyMvcApplication.csproj and find the jQuery references and update them accordingly:

<Content Include="Scripts\jquery-1.4.2.js" />
<Content Include="Scripts\jquery-1.4.2.min.js" />

Do the same sort of thing in the EmptyMvcWebApplicationProjectTemplate.cs.vstemplate file, also in the root of the extracted directory:

<ProjectItem ReplaceParameters="true" TargetFileName="jquery-1.4.2.js">jquery-1.4.2.js</ProjectItem>
<ProjectItem ReplaceParameters="true" TargetFileName="jquery-1.4.2.min.js">jquery-1.4.2.min.js</ProjectItem>

We also have a bit of housekeeping to do in the vstemplate file. Here is what my updated TemplateData section looks like:

<TemplateData>
<Name>Empty MVC 2 Refresh</Name>
<Description>Updated with the latest jQuery</Description>
<ProjectType>CSharp</ProjectType>
<ProjectSubType>Web</ProjectSubType>
<SortOrder>51</SortOrder>
<CreateNewFolder>true</CreateNewFolder>
<DefaultName>MvcApplication</DefaultName>
<ProvideDefaultName>true</ProvideDefaultName>
<LocationField>Enabled</LocationField>
<PromptForSaveOnCreation>true</PromptForSaveOnCreation>
<EnableLocationBrowseButton>true</EnableLocationBrowseButton>
<RequiredFrameworkVersion>3.5</RequiredFrameworkVersion>
</TemplateData>

What did we just do?

The vstemplate template is responsible for ensuring the correct files get copied into the new project when it is created. We update that file to get the correct scripts into the project. We also changed the title and description and removed the references to the MS-proper name and description so that our project would properly display.

The project file is what we see as an item in the solution that is created when we use our template to create a new MVC application. We need it to point to files that will properly exist for them to be available in the IDE.

Final Step: Compression

All that’s left to do is add all the files to a zip folder (right-click –> send to –> Compressed Folder). Make sure you compress the files and not the directory as the files need to be in the root of the compressed folder for Visual Studio to pick them up.

You can leave the uncompressed folder around to make changes more easily in the future (like, when the next version of jQuery is released).

Make sure you shut down any copies of Visual Studio 2010 and when you re-open them the updated template will be available for you to select:

And the updated scripts will be present in your project:

Though we don’t have an updated VSDOC file (yet) for 1.4.2 we can still use the 1.4.1 documentation file and have full IntelliSense support for everything other than delegates.

To be Quick, or Not to be Quick?

While the IDE provides a great mechanism for updating the template from right within the IDE, it is still possible to do the work by hand.

I just can’t think of why you’d want to…and to be honest I don’t know that I would…but…it was a good exercise in learning a little more about project templates and how they can be customized!

ASP.NET MVC2 Project Updates

I just fired up a default, empty MVC2 project in Visual Studio 2010 and the following previous gripes of mine have been addressed:

• The assemblies section of the web.config has the correct references for Abstractions and Routing. These were missing in the RC but present in Beta 2. The RTM is clean (and I notice that the web.config is cleaner, too).
• A newer version of jQuery is included in the default Scripts folder (1.4.1) along with the corresponding VSDOC file.

I don’t know if it’s just because I also cleaned out all the beta/RC/LCTP bits, but after this refresh the IDE seems a little more snappy.

All in all, I’m glad Microsoft took the extra time to address optimization concerns. We all had plenty of time to contribute any comments or suggestions and they have clearly listened.

A Clean Transition

With the downloads complete for the IDE and VSTS – and priorities not on development today – I have made the full switch to Visual Studio 2010. Having been a part of public and private releases over the last several months I had a laundry list of components that I first uninstalled to make sure the transition was as clean as possible.

Interesting note: if I had started the download of the IDE alone yesterday with the modem speed I had when I started coding it would have taken 2.46 years to download the ISO for Visual Studio. Yesterday it took 58 minutes…and I don’t even have the fastest of connections!

Tear-down List

By following a set order we can reduce the number of steps needed as most installers take their baggage with them. If you start by removing random apps you’re bound to see more start/stops and reboots.

Below is the list of software that I removed from the system prior to doing the new install (in the order that I removed them):

• Visual Studio 2010 Ultimate RC
  • This removed 28 components from the system including MVC 2 tooling, Sync Framework components and VC runtimes
• Microsoft .NET Framework 4 Extended
  • Required a reboot
• Microsoft .NET Framework 4 Client Profile
• Required a reboot
• Visual Studio 2010 Tools for SQL Server Compact 3.5 SP2 ENU
• WCF RIA Services Preview for Visual Studio 2010
• This was part of another installer which was no longer on my computer. I had to download the MSI for this package here for the uninstall to work.
• After re-downloading the MSI from Microsoft the uninstall still failed as it required the .NET Framework 4. Oops! Do this before you remove the Framework Client Profile!

At this point I was ready to install, but still needed to remove the WCF RIA services at the end of the process as it targeted the RC.

Installation

I had downloaded the ISO and I use Virtual CloneDrive. Installation, even with huge software packages, goes very fast. It is a much quicker process because you don’t have to constantly wait for the DVD drive to spin up/down when it starts/finishes loading a chunk of data to your computer.

There were some changes (as expected) from the RC to the RTM as the installer dropped 32 new components onto the machine.

I was not able to discern from the custom installation options as to whether or not the Visual Studio 2010 Command Prompt was included if you didn’t install VC++ (see my previous post) so I elected to do the full installation of all languages.

The entire install took approximately 19 minutes and completed without error.

Creating a Basic Pop-out Panel with ASP.NET MVC and jQuery

At the time of this posting I am using VS2010 RC.

There is a simple effect that adds a little jump to your site without having to be too in-your-face about it: a pop-out panel.

Pop-out panels allow you to hide information or parts of your UI that do not

There are three things that I wanted to achieve:

1. Have an animation that ‘slides’ the panel out
2. Have a tab that is always visible and positioned statically on the page. When hovered over it begins the animation effect on the content panel
3. Allow the panel to grow with the content.

I am building the pop-out panel with jQuery and will enrich it with ASP.NET MVC.

Side note: For this demo I used solid, easily recognizable colored DIVs so that it was easy to make out where things were landing. Because they are simply DIVs, you can use whatever you like for the design.

The HTML Layout

The template for this concept is quite simple:

    <div
   id="theFrame">
       <div id="theContent"> ...
       </div> <div id="theHandle"></div> </div> 

In the above screenies, the frame DIV is used to wrap the elements, the handle is the teal bar on the left hand side, and the content is the grey box with the links that is displayed when the teal bar is hovered over.

Teal is all the rage.

The CSS Setup

The styles are almost as easy as the HTML markup.

#theFrame { width:225px; position:fixed; left:-200px; top:150px; }

#theContent { width:180px; position:relative; left:0px; top:0px; padding: 10px; }

#theHandle { width:35px; position:absolute; left: 200px; top:0px; }

Here, we’re simply setting up the width and position of the pop-out box. Notice that the handle is not sized for height, but it will display as the full size height of the content box by the time we’re through with it. ;o)

jQuery for Animating the pop-out

I’m going to stick with my ‘simple’ theme here.

<script language="javascript" type="text/javascript">
   $(function () {
       $("#theHandle").height($("#theFrame").height());

       $("#theFrame").mouseenter(function () {
           $("#theFrame").stop(true, true);
           $("#theFrame").animate({ "left": "0px" }, "fast");
       });

       $("#theFrame").mouseleave(function () {
           $("#theFrame").stop(true, true);
           $("#theFrame").animate({ "left": "-200px" }, "fast");
       });


   });
</script>

There are really only two parts to this:

1. Setting the size of the handle to match the rendered height of the content area.
   
   
   
   
   



2. Creating the event handlers for the hover effect to create the animated fly-out (mouseenter and mouseleave).
   
   

I’m using jQuery’s .stop(true, true) here; the first true tells jQuery to clear out the animation queue, the second tells it to skip to the last entry added to the animation queue and play it out. This prevents the anonying cyclic animation that starts to happen if a user flies the mouse over the handle 15 times quickly. Comment out the .stop() if you want to see what I’m taking about.

Adding ASP.NET MVC to the mix

Finally, I’m going to get it integrated into the ASP.NET MVC view engine. The idea here is straightforward: if you want to have the list of items dynamically generated, or customized per-user or such, you’ll want this thing to be easily rendered and self-contained.

To do this, I simply extracted the code required to output the pop-out control, including the jQuery script, into a partial view.

The content can then easily be generated or pulled from a database. You can use models/repositories for this and pull from LINQ to SQL or use entity framework to retrieve the content.

Now I have a simple way to inject the pop-out into a page:

<% Html.RenderPartial("PopoutFrame", contentData); %>

Did I say ‘finally’?

Actually, I do have one last thing to try out, and this idea has given me a simple way to get into plugin development in jQuery.

There are a couple of other features that I’d like to implement:

• Covert this to a UL/LI setup
  
  
  
  
  



• Create a plugin that accepts either a UL element or a DIV and some JSON data (provided by a function/get/post)
  
  
  
  
  



• Use the new jQuery UI position() methods and allow the pop-out to come from anywhere on the page
  
  
  
  
  



• Switch to a non-overflowing frame to hide the contents when the widget is not in pop-out mode
  
  
  
  
  



• Allow the contents to be loaded via AJAX when the pop-out is invoked (but load the contents before starting the animation)
  
  

This was fairly simple to implement but I hope it gives someone a start if they are trying to achieve a similar effect.

jQuery datepicker with no Textbox

I just finished a simple page that uses jQuery.datepicker() to create a calendar dropdown to select a date. The datepicker widget normally uses either a DIV or an INPUT of type TEXT. I was happy to discover this isn’t a requirement.

I was building a replacement calendar for our CSRs who frequently have to jump between weeks, days, customers and work orders in order to add comments as customers call in.

I wanted an in-line calendar selection and decided on the jQuery datepicker as the UI of choice. As always, I’m using ASP.NET MVC as the backend and view engine.

The code is at the end of this post with a sample of the widget in action without a visible input textbox.

From how it was to how it is

The old interface was written over 8 years ago and served its purpose when the company had only a couple of installers. Now, with about 10 full-time staff working on installations and service calls, the user story has changed significantly.

Because the old calendar rendered the entire month at a time it got quite cumbersome to use towards the end of the month when you had to scroll to the bottom. This was especially true because each appointment for each installer was ‘stacked’ inside the day on the calendar.

Though the installers are color-coded to make it easier to find them, with ten guys in the mix it was still a chore to work out where someone was at any given time in the day…and we have a coverage area of nearly 130,000 sq Km.

In the colorful image to the right, you’ll see just over one week’s view of the calendar. I needed 2400px of vertical resolution to capture that image. Most users here have 1600x900 monitors, so you can imagine in the forth week of the month what it’s like. Imagine trying to scroll to the bottom of the calendar when you’re at the end of the month as many as 80 times a day!

Anyways, I decided to move to a day-based view, defaulting to today’s date, but with tabs to display the whole week. I also elected to add in-line comments that tie into the legacy system (so users don’t have to navigate 5-7 clicks away to add comments).

Here’s a shot of the new interface:

The appointments are now only rendered for the current day by default. Clicking on the tabs allows you to navigate to other days (or the week summary) and << >> navigation arrows allow moving between weeks. I’m using jQuery tabs for the interface here.

The calendar icon is clicked to display the datepicker.

The Code

It’s quite easy to make this all jive without the textbox. Simply alter your input to be of type hidden (mine’s also rendered as a link in a tab):

Next, we setup the datepicker by using a jQuery selector for the hidden input:

There are only a couple of interesting things here:

• showOn, buttonImage and buttonImageOnly are used inside the datepicker() call options to render the icon without also injecting a button control
• onClose is used to pass the result to a controller action (I’ve used GET for this sample to keep things simple)

Positioning

The only thing I’m not happy with at this point is the positioning of the dropdown calendar, as its top-left corner starts from the top-left of the icon.

I suspect that the new positioning support in jQuery UI 1.8 will help to straighten some of that out. For now I’ll live with it.

Final thoughts

All told it’s very simple to use the datepicker with the textbox. I’m finding more and more ways to simplify the UI with jQuery and ASP.NET MVC.

It’s certainly more fun to develop software when you feel like you’re running instead of crawling.

ASP.NET MVC Controller Actions with Null Values and Missing Model Bindings

I am using VS2010 RC at the time of this post.

I ran into a small issue with model binding in ASP.NET MVC. In my controller I had written an Add method for a custom type (one of the types in my model). My view had a form on it with all the appropriate fields, named and ID’d correctly.

The problem was that my model values, after the method was invoked, was always null.

To fast-forward a bit here, the reason seems to be that my parameter name was the same as a property on the type, which confused the MVC binding for some reason. This post is an expanded example of how I got into the nullifying state.

A Simple Example

Basically, I had a simple object in my models that I wanted the user to be able to add. It only had a few properties. Here’s an example of what it might look like:

It’s fairly straightforward. My form looked similar to the following:

…with all the fields in the model accounted for. I have used this multiple times in the past and wasn’t expecting any kind of complication.

My controller action accepted the type as a parameter (in this case it would be RecipeIngredient) and tried to persist the object; however, the parameter was always Null.

Again, the ASP.NET MVC engine, though routing correctly, seemed to run into trouble when trying to bind the model. Though all form values were submitted (Request.Form[“RecipeId”] and others had values), the parameter was never populated with the form values.

Notice that the parameter is named “ingredient” and that Ingredient is a property in my RecipeIngredient class. This is what cause the problem.

Now, Watch This

The fix for this was too simple: just rename the parameter on the controller action.

All of a sudden, the model lights up.

It took me a good 30 minutes to figure this out, so I hope it helps someone. I had actually found a post where someone with a similar scenario believed it to be a problem with the using() syntax or the Ajax.BeginForm (which is what I was using), so I was chasing a red herring for a while.

So, for me more than anyone, just remember: your model will not be properly bound in ASP.NET MVC controller actions if your parameter name is also a property in your model. The correct action will be invoked, but you will always get Null.