Einfügen eines Ankertags in einen ASP.NET MVC Html.ActionLink

151

In ASP.NET MVC versuche ich, einen Link zu erstellen, der ein Ankertag enthält (dh den Benutzer zu einer Seite und einem bestimmten Abschnitt der Seite weiterleiten).

Die URL, die ich erstellen möchte, sollte wie folgt aussehen:

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

Mein Routing ist mit dem Standard eingerichtet:

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

Die von mir verwendete Aktionslink-Syntax lautet:

<%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>
<%} %>

Meine Controller-Methode lautet wie folgt:

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

   return View(itemList);
}

Das obige gibt eine URL wie folgt korrekt zurück:

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

Ich kann nicht herausfinden, wie ich den Teil # section12 hinzufügen soll . Das Wort "Abschnitt" ist nur die Konvention, die ich zum Aufteilen der Seitenabschnitte verwende, und die 12 ist die ID der Unterkategorie, dh child.ID.

Wie kann ich das machen?

dp.
quelle

Antworten:

97

Ich würde den Link wahrscheinlich manuell erstellen, so:

<a href="<%=Url.Action("Subcategory", "Category", new { categoryID = parent.ID }) %>#section12">link text</a>
LorenzCK
quelle
20
Sollte wirklich die Überladungen für ActionLink verwenden, wie von @Brad Wilson beschrieben.
Mattruma
18
@mattruma Entschuldigung, ich bin anderer Meinung. KUSS. Warum ein Mitglied voller Parameter haben, von denen einige als null belassen werden, wenn Sie es einfach explizit angeben können? Jeder kann sehen, was das oben Genannte bedeutet, wobei Brads Antwort verworren ist und Sie sich mit Intellisense befassen müssen. Zu viele Parameter sind ein anerkanntes Anti-Muster. C2.com/cgi/wiki?TooManyParameters
Ed Blackburn
2
Genau. Beide Methoden funktionieren, aber da sich die Art und Weise, wie Fragmente in URLs angegeben werden, in naher Zukunft nicht ändern wird, denke ich, dass diese Methode in ihrer Absicht tatsächlich lesbarer und klarer ist. Bei Bedarf können Sie das Objekt Urloder Htmlmit einer benutzerdefinierten Methode erweitern, die eine einfache Möglichkeit zum Hinzufügen einer Fragmentzeichenfolge enthält.
LorenzCK
282

Es gibt Überladungen von ActionLink, die einen Fragmentparameter annehmen . Wenn Sie "section12" als Fragment übergeben, erhalten Sie das Verhalten, nach dem Sie suchen.

Beispiel: Aufrufen der LinkExtensions.ActionLink-Methode (HtmlHelper, String, String, String, String, String, String, Objekt, Objekt) :

<%= Html.ActionLink("Link Text", "Action", "Controller", null, null, "section12-the-anchor", new { categoryid = "blah"}, null) %>
Brad Wilson
quelle
1
Sind diese Überladungen Teil einer Erweiterungsbibliothek? Ich scheine sie nicht zu verstehen.
Granate
Es gibt zwei: öffentliche statische Zeichenfolge ActionLink (diese HtmlHelper htmlHelper, Zeichenfolge linkText, Zeichenfolge actionName, Zeichenfolge controllerName, Zeichenfolgenprotokoll, Zeichenfolge hostName, Zeichenfolgenfragment, Objekt routeValues, Objekt htmlAttributes); öffentliche statische Zeichenfolge ActionLink (diese HtmlHelper htmlHelper, Zeichenfolge linkText, Zeichenfolge actionName, Zeichenfolge controllerName, Zeichenfolgenprotokoll, Zeichenfolge hostName, Zeichenfolgenfragment, RouteValueDictionary routeValues, IDictionary <Zeichenfolge, Objekt> htmlAttributes);
Brad Wilson
11
Dies sollte die Antwort sein.
Rubens Mariuzzo
1
Die Überladungen von Html.ActionLink, die die Angabe eines Ankers durch Übergabe des Fragments ermöglichen, zwingen Sie dazu, den Controller namentlich zu übergeben. Das gefällt mir nicht. Wenn der Controller-Name falsch ist, treten Laufzeitausnahmen anstelle von Kompilierungsfehlern auf.
R. Schreurs
1
@RobertMcKee Wenn Ihr Linktext mehr als nur Text ist, Html.ActionLink()würde er in keinem Szenario funktionieren - Sie müssten die Stilsyntax verwenden [email protected]().
Katstevens
15

Ich erinnere mich nicht, in welcher Version von ASP.NET MVC (ASP.NET MVC 3+, glaube ich) / Razor die Parameterlabeldeklaration oder wie auch immer sie heißt (Parameter: x) eingeführt wurde, aber für mich ist dies definitiv der richtige Weg Erstellen Sie eine Verknüpfung mit einem Anker in ASP.NET MVC.

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

Nicht einmal Ed Blackburns Antipattern-Argument aus dieser Antwort kann damit konkurrieren.

Der gestiefelte Kater
quelle
1
Das hat mir buchstäblich das Leben gerettet. Ordnen Sie Ihren Beitrag hier als meine Lösung zu stackackflow.com/questions/32420028/… .
Matthew
11

Ich habe es einfach so gemacht:

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

Hier ist das Beispiel aus dem wirklichen Leben

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

Und die Zielseite hat 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>
Entwickler
quelle
0

Meine Lösung funktioniert, wenn Sie den ActionFilter auf die Aktionsmethode Unterkategorie anwenden, solange Sie den Benutzer immer auf dasselbe Lesezeichen umleiten möchten:

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

Es ändert den HTML-Puffer und gibt ein kleines Stück Javascript aus, um den Browser anzuweisen, das Lesezeichen anzuhängen.

Sie können das Javascript so ändern, dass es manuell gescrollt wird, anstatt natürlich ein Lesezeichen in der URL zu verwenden!

Ich hoffe es hilft :)

Spikeh
quelle
0

Ich habe das getan und es funktioniert für die Umleitung zu einer anderen Ansicht. Ich denke, wenn Sie den #sectionLink hinzufügen, nachdem es funktioniert

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