CODEWITHSUNDEEP
jquerycssasp.net-mvcasp.net-mvc-3
ZVenue
ZVenue

Reputation: 5027

MVC3 Action link - Image buttons that trigger Jquery

@Html.ActionLink("Apple", "ActionName", new { id = item.id }, new { @class = 

"cssClassandModalPopup" })

This gives me a link called Apple, that onclick pops up a Jquery modal Dialog. I want to change this link text to a button (a .png file I have). I tried both url.action and also tried to assign background image in css, but the result has not been 100% satisfactory. If I use url.action, I am not able to use the last paramenter for Jquery dialog pop up. If I use the action link and assign background image in css, the "Text name" string (first paramenter above) is over laid with the image not producing good result. And it wont take an empty value as parameter.. any ideas please?

Upvotes: 3

Views: 1627

Answers (1)

ten5peed
ten5peed

Reputation: 15890

I would probably use a combination of the any CSS image replacement technique and URL.Action.

So your action link would look something like:

<a href="@Url.Action("ActionName", "ControllerName", new ( id = item.id }" id="appleImageLink" class="cssClassandModalPopup">
    <em></em>
    Apple
</a>

Then your css something like

a#appleImageLink {
    width: 350px; height: 75px;
    position: relative;
}

a#appleImageLink span {
    background: url("images/fruit/apple.jpg");
    position: absolute;
    width: 100%;
    height: 100%;
}

Upvotes: 3

Related Questions