MVC 3 Helper for Hover Images...

raphadesa

Rate me:

4.00/5 (1 vote)

14 Feb 2012CPOL

36K

A simple MVC 3 Helper for handling Hover Images...

In this post, I will talk about something that I haven't found on the internet, which is quite simple to do, which is an MVC Helper for creating a Hover image button...

If you are a professional developer and work in a team, you must have people which make the graphical stuff of your website, because most developers (like me) just don't like it, it's just a completely separate job.

This code assumes that you already understand MVC.

So here are my images, one named OK.png and the other OK_Hover.png, that are located on the Content/Images/Buttons folder.

Now what I want do do is to use my helper (which appears on listing 1), to use it in my razor page, and that upon a click will redirect me to the corresponding view.

So in my index.cstml, I have:

HTML

@using HoverImageHelper.Helpers;
@{
 ViewBag.Title = "Index";
}
Index

@Html.ImageButton("OK", "OK")

So the first parameter corresponds to my PNG file, and the second to my action.

Listing 1

/// 
/// This function creates an image button with a hover, based on a an image name (must be .PNG)
/// and its corresponding hover image
/// 
/// 
/// 
/// 
/// 
/// 
public static MvcHtmlString ImageButton
(this HtmlHelper helper, string imageName, string actionName, object routeValues)
 {
 //Gets the action name and routes
 var urlHelper = new UrlHelper(helper.ViewContext.RequestContext);
 var url = urlHelper.Action(actionName, routeValues);
 //Creates the image tag
 var imgTag = new TagBuilder("img");
 var imageUrl = string.Format("/Content/Images/{0}.png", imageName);
 imgTag.Attributes.Add("src", imageUrl);
 imgTag.Attributes.Add("onmouseover", "this.src='" + imageUrl.Replace(".", "_hover.") + "'");
 imgTag.Attributes.Add("onmouseout", "this.src='" + imageUrl + "'");
 imgTag.Attributes.Add("border", "0");
 //Creates the link tag
 TagBuilder imglink = new TagBuilder("a");
 imglink.MergeAttribute("href", url);
 imglink.InnerHtml = imgTag.ToString(TagRenderMode.SelfClosing);
 return MvcHtmlString.Create(imglink.ToString());
 }

And a corresponding overload (which I use on this example):

Listing 2

public static MvcHtmlString ImageButton(this HtmlHelper helper, string imageName, string actionName)
 {
 return ImageButton(helper, imageName, actionName, null);
 }

Happy programming!!!

You can grab the full code here:

https://skydrive.live.com/redir.aspx?cid=c80cb697c4b0eb01&resid=C80CB697C4B0EB01!1447&parid=C80CB697C4B0EB01!1446&authkey=!AJ4-nyhDI-I2ur0[^]

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

raphadesa

Software Developer (Senior) Messages S.A.S

France

I am Web Developer at Messages, a printing company in Toulouse, France. I am particularly interested about Blazor, but my primary development platform at work is ASP.NET MVC with C#. I have 15 years experience in developing software, always using Microsoft Technologies.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Routing; namespace HoverImageHelper.Helpers { public static class ImageButtons { public static MvcHtmlString ImageButton(this HtmlHelper helper, string imageName, string actionName) { return ImageButton(helper, imageName, actionName, null); } public static MvcHtmlString ImageButton(this HtmlHelper helper, string imageName, string actionName, string controllerName) { return ImageButton(helper, imageName, actionName, controllerName, null); } public static MvcHtmlString ImageButton(this HtmlHelper helper, string imageName, string actionName, string controllerName, object routeValues) { //Gets the action name and routes var urlHelper = new UrlHelper(helper.ViewContext.RequestContext); var url = urlHelper.Action(actionName, controllerName, routeValues); //Creates the image tag var imgTag = new TagBuilder("img"); var imageUrl = string.Format("/Content/Images/Buttons/{0}.png", imageName); imgTag.Attributes.Add("src", imageUrl); imgTag.Attributes.Add("onmouseover", "this.src='" + imageUrl.Replace(".", "_hover.") + "'"); imgTag.Attributes.Add("onmouseout", "this.src='" + imageUrl + "'"); imgTag.Attributes.Add("border", "0"); //Creates the link tag TagBuilder imglink = new TagBuilder("a"); imglink.MergeAttribute("href", url); imglink.InnerHtml = imgTag.ToString(TagRenderMode.SelfClosing); return MvcHtmlString.Create(imglink.ToString()); } } }

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

MVC 3 Helper for Hover Images...

License

Comments and Discussions