Image button link options in ASP.Net MVC3

There are several ways to skin this cat, but below are a couple options for using an image, in lieu of text, as a link to content. There are other overloads for the Url.Action and the Html.ActionLink, but in this example I was linking to a different controller passing in the integer id of the item to display a list of child records. The "STEPS” image is displayed if the parent record has child records.

Url.Action method

<a href='@Url.Action("ActionName", "ControllerName", new {Id = item.ID}) '><img src='@Url.Content("~/Content/Images/buttonimage.gif") ' alt="View Detail" border="0"  /></a> 

Html.ActionLink method

@Html.ActionLink(" ", "ActionName", "ControllerName", new { Id = item.ID }, new { @class = "steps-button", alt = "View Detail", title = "View Detail" })

Note that the first parameter in the action link is a space (because I didn’t want any text to show over the button background image) and the first argument cannot be null or empty.

In the site CSS layout I added the following steps-button class that adds the image to the link as a background image.

a.steps-button      

{

    background: url(../Content/Images/buttonimage.gif) no-repeat top left; 

    width: 14px;

    height: 44px; 

    display: block;

}

Using jQuery datepicker with MVC3 textboxes

This post addresses two issues:

1. Using the built-in ASP.NET Development Server vs. IIS to render the datepicker. If you are using IIS, skip to the second section.
2. Dependencies necessary to get the jquery ui datepicker to work in an MVC3 project.

ASP.NET Development Server

I repeatedly have issues with AJAX controls (like the ModalPopup control) rendering with the correct styles using the ASP.NET Development Server vs. IIS. The jquery datepicker is no exception, but this time it surfaces as the following error “Microsoft JScript runtime error: Object doesn't support this property or method” in the jquery-1.5.1.min.js, which isn’t very helpful for troubleshooting.

On a hunch, I decided to configure the project as an application in IIS and access it via localhost/appname instead of the dynamically addressed port of the ASP.NET Development Server - giving me a more meaningful error to troubleshoot.

jQuery UI dependencies

Using the IIS served application, I received the tiny warning triangle in the lower left corner of IE that indicates a javascript error, “Message: Object doesn't support this property or method”. The offending line of code was $("#EstDateStarted").datepicker();.

My project was based on the standard Visual Studio 2010 MVC3 project template which included only the jquery-1.5.1.min.js in the _Layout.cshtml file using the Razor rendering engine. The .datepicker function is not located in that javascript file it is in the jquery-ui-1.8.11.min.js file. All I needed do to enable that functionality and resolve the error was to add the following reference to the head of the _Layout.cshtml file, which includes it on all the pages of the app:

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript">

photo credit: augapfel / CC BY-SA 2.0