包括在ASP中的锚标记。NET MVC Html.ActionLink

In ASP.NET MVC, I'm trying to create a link that includes an anchor tag (that is, directing the user to a page, and a specific section of the page).

在ASP。NET MVC，我正在尝试创建一个包含锚标记的链接(也就是说，将用户指向页面和页面的特定部分)。

The URL I am trying to create should look like the following:

我试图创建的URL应该如下所示:

<a href="/category/subcategory/1#section12">Title for a section on the page</a>

My routing is set up with the standard:

我的路由是按照标准设置的:

routes.MapRoute("Default", "{controller}/{action}/{categoryid}");

The action link syntax that I am using is:

我使用的动作链接语法是:

<%foreach (Category parent in ViewData.Model) { %>
<h3><%=parent.Name %></h3>
<ul>
<%foreach (Category child in parent.SubCategories) { %>
    <li><%=Html.ActionLink<CategoryController>(x => x.Subcategory(parent.ID), child.Name) %></li>
<%} %>
</ul>
<%} %>

My controller method is as follows:

我的控制器方法如下:

public ActionResult Subcategory(int categoryID)
{
   //return itemList

   return View(itemList);
}

The above correctly returns a URL as follows:

以上正确返回的URL如下:

<a href="/category/subcategory/1">Title for a section on the page</a>

I can't figure out how to add the #section12 part. The "section" word is just the convention I am using to break up the page sections, and the 12 is the ID of the subcategory, i.e., child.ID.

我不知道如何添加#section12部分。“节”字只是我用来划分页面部分的惯例，而12是子类别的ID，即。,child.ID。

How can I do this?

我该怎么做呢?

7 个解决方案

#1

I would probably build the link manually, like this:

我可能会手工构建链接，如下所示:

<a href="<%=Url.Action("Subcategory", "Category", new { categoryID = parent.ID }) %>#section12">link text</a>

#2

267

There are overloads of ActionLink which take a fragment parameter. Passing "section12" as your fragment will get you the behavior you're after.

ActionLink中包含一个片段参数的重载。通过“section12”作为你的片段将会得到你想要的行为。

For example, calling LinkExtensions.ActionLink Method (HtmlHelper, String, String, String, String, String, String, Object, Object):

例如,调用LinkExtensions。ActionLink方法(HtmlHelper, String, String, String, String, String, String, String, String, Object, Object):

<%= Html.ActionLink("Link Text", "Action", "Controller", null, null, "section12-the-anchor", new { categoryid = "blah"}, null) %>

#3

I don't remember in which version of ASP.NET MVC (ASP.NET MVC 3+ I believe) / Razor the parameterlabeldeclaration or whatever it's called (parameter: x) feature was introduced, but to me this is definitely the proper way to build a link with an anchor in ASP.NET MVC.

我不记得在哪个版本的ASP。净MVC(ASP。NET MVC 3+我相信)/ Razor引入了参数标签声明(parameter: x)特性，但对我来说，这绝对是用ASP中的锚来构建链接的正确方式。净MVC。

@Html.ActionLink("Some link text", "MyAction", "MyController", protocol: null, hostName: null, fragment: "MyAnchor", routeValues: null, htmlAttributes: null)

Not even Ed Blackburns antipattern argument from this answer can compete with that.

甚至这个答案中的Ed Blackburns反模式论证都无法与之抗衡。

#4

I just did it like this:

我就是这么做的:

<a href="@Url.Action("Index","Home")#features">Features</a>

#5

Here is the real life example

这就是现实生活的例子。

@Html.Grid(Model).Columns(columns =>
    {
           columns.Add()
                   .Encoded(false)
                   .Sanitized(false)
                   .SetWidth(10)
                   .Titled(string.Empty)
                   .RenderValueAs(x => @Html.ActionLink("Edit", "UserDetails", "Membership", null, null, "discount", new { @id = @x.Id }, new { @target = "_blank" }));

  }).WithPaging(200).EmptyText("There Are No Items To Display")

And the target page has TABS

目标页面有标签

<ul id="myTab" class="nav nav-tabs" role="tablist">

        <li class="active"><a href="#discount" role="tab" data-toggle="tab">Discount</a></li>
    </ul>

#6

My solution will work if you apply the ActionFilter to the Subcategory action method, as long as you always want to redirect the user to the same bookmark:

如果你将ActionFilter应用到子类别操作方法中，只要你总是想将用户重定向到相同的书签:

http://spikehd.blogspot.com/2012/01/mvc3-redirect-action-to-html-bookmark.html

It modifies the HTML buffer and outputs a small piece of javascript to instruct the browser to append the bookmark.

它修改HTML缓冲区并输出一小段javascript来指示浏览器添加书签。

You could modify the javascript to manually scroll, instead of using a bookmark in the URL, of course!

当然，您可以将javascript修改为手动滚动，而不是在URL中使用书签!

Hope it helps :)

希望它能帮助:)

#7

I Did that and it works for redirecting to other view I think If you add the #sectionLink after It will work

我这样做了，它可以重定向到其他视图，我想如果你在它之后添加#sectionLink就可以了

<a class="btn yellow" href="/users/Create/@Model.Id" target="_blank">
                                        Add As User
                                    </a>

#1