ImageButton (Link around image) in ASP.NET MVC

Scenario

I want to implement paging function to guide users through list of records. The idea is to use a link around a image, by clicking on that image, the link takes users to proper controller action. I try to use ActionLink Html helper method, but it render and close the entire tag.

@Html.ActionLink(" ", "Index", "Company", new { area = "Customer", filter = ViewBag.Filter, orderBy = ViewBag.OrderBy, sortDirection = ViewBag.SortDirection, pageNum = ViewBag.PageNum - 1 }, new { id = "_prevPageImg" })

<a href="/Customer/Company?filter=b&amp;orderBy=Telephone1&amp;sortDirection=Ascending&amp;pageNum=0" id="_prevPageImg"> </a>

Solution

1. Css background-image

#_nextPageImg
{
background-image: url("/Content/themes/base/images/jumpbarrewinddisabled_white.gif");
background-repeat:no-repeat;
background-position: center center;
display:inline-block;
height:9px;
width:8px;
}

2. Url.Action method

<a href="@Url.Action("Index", "Company", new { area = "Customer" })"><img src="/Content/themes/base/images/jumpbarforward_white.gif" alt="" /></a>

Advertisements

One comment on “ImageButton (Link around image) in ASP.NET MVC

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s