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

Question

我想知道您将如何将div框制作为动作链接。 我看到了一些使用Ajax的示例，但它们都指向部分视图，因为我只需要将其作为另一个视图的链接即可。

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

Answer 1

与其使div成为具有onclicks的链接（例如，这可能会导致想要在新标签页中打开您的链接的人遇到麻烦），还不如选择其他方式并使常规操作链接成为块级元素。 您可以通过在ActionLink中添加一个包含所需规则的类来做到这一点。 像这样

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

（请原谅我，如果那一点是错误的，我不记得在不打开Visual Studio的情况下html属性会走到哪里！我也是用VB而不是C＃编写的，所以不知道html属性的语法是否正确。有人从内存编码方面比我更好请随时纠正！）

HTML的最终结果

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

这意味着您不需要周围的容器，不需要任何JavaScript，并且最终仍带有block元素。 StackOverflow顶部的按钮就是很好的例子。 当然，这仅在您仅将文本放在div中时才有效。 如果您打算在div中包含其他标签/事物，那么这将不是一个合适的解决方案。

Answer 2

您可以创建一个自定义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));
        }

然后像这样使用

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

并可以选择将最后一个参数设置为true以在新窗口中打开链接

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

编辑

[AspMvcController]和[AspMvcAction]属性位于Jetbrains命名空间中，并且是Resharper的一部分。 您可以从上述方法中将其删除，并且仍然可以正常工作。

Answer 3

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

您不需要操作链接。 只需在您的div中添加一个click事件处理程序即可。

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

然后你的JavaScript看起来像这样

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

更新：更改了代码，以便它将正确生成onclick属性。 添加内联@ item.id可能导致html看起来很时髦。