How to create an (image) Header logo with MVC(4)

Question

I'm struggling with an Razor syntax with MVC (4), hoping to find someone who can help me with a nice and working solution.

I want a clickable logo(image) and created the following code. This works except of two things. I don't see the image display and secondly, when in an other controller, the routing goes wrong (http4 error).

This is how i've done it now:

Razor:

<h1>@Html.ActionLink("siteHeader", "Index", null, new { @class = "site-logo"})</h1>

OR

<h1>@Html.ActionLink("siteHeader", "Index", "Home", new { @class = "site-logo"})</h1>

e.g. when in a different controller (account/shoppingcart/etc.) and clicking the logo, it results in a 404.

CSS:

/Site HeaderLogo/

a.site-logo  {     
 background: url(images/Solosoft.png) no-repeat top left;
 display: block;       
 width: 100px;       
 height: 100px;       
 text-indent: -9999px;  /*hides the link text*/ 
  } 

Thanks in advance.

Answer 1

Try this:

@Html.ActionLink("siteHeader", "Index", "Home", null, new { @class = "site-logo"})

This is:

public static MvcHtmlString ActionLink(
    this HtmlHelper htmlHelper,
    string linkText,
    string actionName,
    string controllerName,
    Object routeValues,
    Object htmlAttributes
)

Link: msdn