Javascript MVC如何将整个Div转换为动作链接

我想知道你将如何把一个div-box变成一个action-link。我看到了一些使用Ajax的示例，但它们都指向部分视图，因为我只需要将其作为指向另一个视图的链接

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

@ActionLink（“房间”、“房间”、“家”，新的{id=item.id}，空）

您可以制作一个自定义的HTML帮助程序来实现这一点。大致如下：

 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));
        }

编辑

---

[AspMvcController]

和

[AspMvcAction]

属性位于Jetbrains命名空间中，是Resharper的一部分。您可以从上面的方法中删除它们，它仍然可以正常工作。

您不需要ajax，因为您只是尝试重定向到一个新站点

你不需要动作链接。只需在div中添加一个click事件处理程序

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

---

更新：更改代码，以便正确生成onclick属性。添加inline@item.id可能会使html看起来很时髦。

而不是使div成为带有onclick的链接（例如，这可能会给希望在新选项卡中打开链接的人带来问题），您可以始终使用另一种方式，将常规操作链接设为块级元素。您可以通过向ActionLink添加包含所需规则的类来实现这一点。像这样的

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

CSS

MVC ActionLink

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

（请原谅，如果这一点是错误的，我永远不记得在没有打开Visual Studio的情况下html属性会出现在哪里！我也是用VB而不是C#编写的，因此不知道htmlattributes的语法是否正确。有比我更擅长从内存编码的人可以随意更正！）

你在HTML中得到了什么

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

---

这意味着您不需要周围的容器，也不需要任何JavaScript，最终仍然会得到一个block元素。StackOverflow顶部的按钮就是很好的例子。当然，这仅在您仅将文本放入div时有效。如果您希望在div中包含其他标记/内容，则这不是一个合适的解决方案。

将div框放入操作链接中是什么意思？

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

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

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