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

score 4 · Accepted Answer · edited May 23 '17 at 12:29

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

score 0 · Answer 2 · edited Oct 19 '15 at 12:13

0

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

edited Oct 19 '15 at 12:13

user2771704

5,994
6
37
38

answered Oct 08 '12 at 18:28

ThatSteveGuy

1,085
7
11

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? – Rodders Oct 08 '12 at 19:54

score 0 · Answer 3 · answered Oct 08 '12 at 18:30

0

I would suggest using some scripting client-size.

You are using MVC4, my suggestion is to leverage the WebApi. Set up an api controller to return the paged comments and render the results using Knockout.js into the page.

answered Oct 08 '12 at 18:30

lboshuizen

2,746
17
20

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 Oct 08 '12 at 19:52
1

That might be a nice extra, but it’s almost always good if the page can work without JavaScript too. – andrewf Jun 01 '13 at 10:40

How can I use HTML Anchors in MVC 4?

3 Answers3