How can I use HTML Anchors in MVC 4?

Question

I have a web page that displays user comments. I default the page to display the most 10 recent. At the bottom, when the use clicks 'Show More', 10 more comments will appear underneath. User can click the button multiple times and 10 more comments will display at the bottom each time. The problem is the user has to scroll down again. I want to use anchors to select the last comment displayed.

In my view, I have:

@{ int i = 1; }
@foreach (var item in Model) {
    <div class="Comment" id="Comment-@i">
        @Html.DisplayFor(modelItem => item.CommentText)
    </div>

    i++;
}

@{int numCommentsToDisplay = 10;}
@if (Session["numCommentsToDisplay"] != null) {
    numCommentsToDisplay = Convert.ToInt32(Session["numCommentsToDisplay"]); 
}

@Html.ActionLink("Show More", "Index", new { numCommentsToDisplay = numCommentsToDisplay + 10 })

And my controller contains:

 public ActionResult Index(int numCommentsToDisplay = 10) {
     this.HttpContext.Session.Add("numCommentsToDisplay", numCommentsToDisplay.ToString());
     var latestComments = db.Comments.Take(numCommentsToDisplay).OrderByDescending(c => c.TimeStamp).ToList();

     return View(latestComments);
 }

When the user clicks 'Show More' for the first time, 20 comments will be shown, how can I select the 11th comment? I have already set the IDs and manually navigating to http://localhost:49208/Comment?numCommentsToDisplay=20#Comment-11 does the trick

Thanks

Solution

I have solved my own question wahey!

I found an overload for Html.ActionLink() that does just the job:

public static MvcHtmlString ActionLink(
    this HtmlHelper htmlHelper,
    string linkText,
    string actionName,
    string controllerName,
    string protocol,
    string hostName,
    string fragment,
    Object routeValues,
    Object htmlAttributes
)

So I pass in my anchor as a fragment:

@Html.ActionLink("Show More", 
                 "Index", 
                 "Comment",
                 null,
                 null, 
                 String.Format("Comment-{0}", numCommentsToDisplay + 1),
                 new { numCommentsToDisplay = numCommentsToDisplay + 10},
                 null
                 )

I found the answer here: Including an anchor tag in an ASP.NET MVC Html.ActionLink

Thanks all for your input

Comments

[Rodders]

Something I've not tried before, I've solved my issue for now but will check out your suggestion when I get time. Thanks

[Rodders]

I couldn't get your answer to work. That's passing in HtmlAttributes? Which would not pass in my anchor? Or am I missing something?

[andrewf]

That might be a nice extra, but it’s almost always good if the page can work without JavaScript too.