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＃，所以不知道htmlattributes的语法是否正确。有人比我更好从内存编码随时纠正它！）

您在HTML中最终得到的结果

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

这意味着你不需要一个周围的容器，你不需要任何JavaScript，你仍然最终得到一个块元素。 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看起来很时髦。

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

3 个答案:

修改