Named Anchors And MVC Urls
2011-11-06 10:49
267 查看
Named Anchors are used to generate links to specific locations within a web document. Unless you are careful, you may end up having a little trouble getting these to work using the MVC LinkExtension helpers.
Named anchors require the use of the name attribute within an <a href> element. If you look at the source code of any page on my site that contains an article with comments, you can see that the Comments section is preceded by one of these:
You can also see (where there are a number of comments) that each one is "bookmarked" with its own uniquely named anchor:
To get these to work, so that the browser takes the user to the position in the document defined by the anchor, the URL needs to be appended with #<anchor-name>, where <anchor-name> corresponds to the name attribute in the link. Valid examples would be:
If you try to generate these types of URLs dynamically by concatenating IDs of items with strings, you may end up finding that the resulting URL contains %23 where you expected the hash or pound (#) sign. It gets UrlEncoded. And the link doesn't work as expected.
Both the ActionLink and RouteLink extension helpers contain an overload which overcomes this problem, but just looking at the current list of overload options doesn't necessarily make this obvious. Once you understand that theofficial HTML spec refers to the part of the URL after the # as a fragment identifier, it should become more obvious that the overload needed is this one (for the RouteLink):
LinkExtensions RouteLink method (HtmlHelper, String, String, String, String, String, Object, Object)
The fifth String argument takes the "fragment", or part after the # sign.
The Most Recent Comments panel (at the top right of my home page) uses this overload to generate the links behind the comment provider's name:
Named anchors require the use of the name attribute within an <a href> element. If you look at the source code of any page on my site that contains an article with comments, you can see that the Comments section is preceded by one of these:
<a href="#" name="comments"></a> <h2>Comments</h2>
You can also see (where there are a number of comments) that each one is "bookmarked" with its own uniquely named anchor:
<a href="#" name="commentId1033"></a> <div class="comment"> ... <a href="#" name="commentId1034"></a> <div class="comment"> ... <a href="#" name="commentId1035"></a> <div class="comment"> ...
To get these to work, so that the browser takes the user to the position in the document defined by the anchor, the URL needs to be appended with #<anchor-name>, where <anchor-name> corresponds to the name attribute in the link. Valid examples would be:
http://www.mikesdotnetting.com/Article/129/Simple-task-Scheduling-using-Global.asax#commentId1031 http://www.mikesdotnetting.com/Article/46/CSharp-Regular-Expressions-Cheat-Sheet#comments
If you try to generate these types of URLs dynamically by concatenating IDs of items with strings, you may end up finding that the resulting URL contains %23 where you expected the hash or pound (#) sign. It gets UrlEncoded. And the link doesn't work as expected.
Both the ActionLink and RouteLink extension helpers contain an overload which overcomes this problem, but just looking at the current list of overload options doesn't necessarily make this obvious. Once you understand that theofficial HTML spec refers to the part of the URL after the # as a fragment identifier, it should become more obvious that the overload needed is this one (for the RouteLink):
LinkExtensions RouteLink method (HtmlHelper, String, String, String, String, String, Object, Object)
The fifth String argument takes the "fragment", or part after the # sign.
The Most Recent Comments panel (at the top right of my home page) uses this overload to generate the links behind the comment provider's name:
@Html.RouteLink( item.CommentName, // Link Text "Show", // Route Name null, // Protocol null, // Host Name "commentId" + item.CommentID, // Fragment new { // Route Values controller = "Article", action = "Show", id = item.Articles.ArticleID, title = item.Articles.Headline.ToCleanUrl() }, null // HTML Attributes )
相关文章推荐
- Urls, Routing and Area in Asp.net MVC
- ASP.NET WebForms and MVC together in one project
- 翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 2
- CRUD Operations Using the Generic Repository Pattern and Dependency Injection in MVC
- SpringMVC conflicts with existing, non-compatible bean definition of same name and class 的解决办法,sprin
- Spring MVC Form Validation Example using Annotation and Custom Validator implementation
- Spring MVC Ajax and JQuery
- ASP.NET MVC Sample Applications - Open-Source Examples and Tutorials
- Introducing ASP.NET vNext and MVC 6
- Getting Started with NHibernate and ASP.NET MVC- CRUD Operations
- 【翻译】Building a Simple Blog Engine with ASP.NET MVC and LINQ - Part 2
- ASP.NET MVC- Controllers and Routing- Routing
- Spring MVC radiobutton and radiobuttons example
- Spring 3 MVC and XML example
- 2011斯坦福大学iOS应用开发教程学习笔记(第一课)MVC.and.Introduction.to.Objective-C
- .NET:CLR via C# Shared Assemblies and Strongly Named Assemblies
- Mini MVC Tutorial: hands-on MVC(Head First Servlets and JSP)
- Spring MVC Checkbox And Checkboxes Example
- SocialGoal - ASP.NET MVC 5, EF 6 Code First, AutoMapper, Autofac, TDD and DDD Sample Site
- Razor and ASP.NET MVC 3.0