MVC如何将整个Div变成一个动作链接

Question

I was wondering how you would go about making a div box into an action link. I seen some examples using Ajax but they were directing towards partial view where as I just need it to be a link to another view.

 <div id="container">
     @Html.ActionLink("Room", "room", "Home", new { id = item.Id }, null)
 </div>

Answer 1

Rather than make the div a link with onclicks (which can cause problems for people who want to open your link in a new tab for example) you could always go the other way and make your regular action link a block level element. You can do this by adding a class to your ActionLink that contains the rules you need. Something like this

CSS

.blockLink{
    display:block;
    padding:10px;
    background-color:pink; /*maybe not pink, but you get the idea*/
}

MVC ActionLink

@Html.ActionLink("Room", "room", "Home", new { id = item.Id }, new{class = "blockLink"})

(Forgive me if that bit is wrong, I never remember where the html attributes go without Visual Studio open! I also write in VB not C#, so not idea if the syntax of the htmlattributes is right. Someone better than me at coding from memory feel free to correct it!)

What you end up with in HTML

<a class="blockLink" href="/room/1">Room</a>

This would mean you don't need a surrounding container, you don't need any JavaScript and you still end up with a block element. The buttons at the top of StackOverflow are good examples of this. Of course, this is only valid if you were only putting text in the div. If you intended to have other tags/things within your div then this would not be an appropriate solution.

Answer 2

You could make a custom HTML helper to do that. Something along these lines:

 public static MvcHtmlString DivActionLink(this HtmlHelper html,string linktext, [AspMvcAction] string action,
            [AspMvcController] string controller, object routeValues, IDictionary<string, Object> htmlAttributes, bool useNewWindow = false)
        {
            var url = new UrlHelper(html.ViewContext.RequestContext);

            var routeDictionary = new RouteValueDictionary(routeValues);

            var windowLocation = useNewWindow 
                ? string.Format("window.open('{0}', 'new window');", url.Action(action, controller, routeDictionary))
                : string.Format("window.location='{0}';", url.Action(action, controller, routeDictionary)) ;

            var divTag = new TagBuilder("div");
            divTag.Attributes.Add("onclick", windowLocation);
            divTag.Attributes.Add("style", "cursor: pointer;");
            divTag.InnerHtml = linktext;

            return MvcHtmlString.Create(divTag.ToString(TagRenderMode.Normal));
        }

And then use it like so

 <div id="container">
     @Html.ActionLink("Room", "room", "Home", new { id = item.Id }, null)
 </div>

and optionally set the last parameter to true to have the link open in a new window

 <div id="container">
     @Html.ActionLink("Room", "room", "Home", new { id = item.Id }, null, true)
 </div>

EDIT

The [AspMvcController] and [AspMvcAction] attributes are in a Jetbrains namespace and are a part of Resharper. You can remove them from the method above and it will still work the same.

Answer 3

You wouldn't need ajax since you are just trying to redirect to a new site.

You don't need an action link. Just add an click event handler to your div.

<div @("onclick=GoToRoom('" + item.id + "')") >
  Room
</div>

And then your javascript looks like this

function GoToRoom(id){
   window.location = "/Home/room?id=" + id;
}

UPDATE: Changed the code so that it would generate the onclick attribute correctly. Adding the inline @item.id could cause the html to look funky.