how to make html.actionlink with an image(add header logo in asp.net MVC 4 project) | Coding Cluster - using asp.net, c#, mvc 4, iphone, php, ios, javascript, in asp.net mvc 3 & more
 

how to make html.actionlink with an image(add header logo in asp.net MVC 4 project)

Monday

MVC - @Html.ActionLink as a button or an image:
                                     The following sample code used to get Html.ActionLink to render as a button or an image instead of a link. To do this we just apply a CSS class to the htmlAttributes object. The following sample code also used for add/change logo for your asp.net MVC 4 projects.
                       

To change your ASP.NET MVC 4 project logo just open the "_Layout.cshtml" find the following line

<p class="site-title">@Html.ActionLink("*****", "Index", "Home")</p>
and replace with the following line of code
<p>@Html.ActionLink("*****", "Index", null, new { @class = "site-logo" })</p>
and then add the following class in your stylesheet(site.css)
a.site-logo  {     
 background: url(../Images/header-logo.png) no-repeat top left;
 display: block;       
 width: 100px;       
 height: 100px;       
 text-indent: -9999px; /* hides the link text */
  } 
That's it now your header logo act like a image button.

 If this post was help to you. Then Share this to your friends. Thanks!

4 comments:

Phani said...

Need to remove "background: none;" from
"site-title" class in Site.css then only it is working. Thanks for sharing the Info

Anonymous said...

thanks , it is working .

Anonymous said...

many thanks, nice and easy solution

its working

Post a Comment

Share your thoughts here...

 
 
 

RECENT POSTS

Boost

 
Blogger Widgets