CODEWITHSUNDEEP
c#asp.net-mvcrazorasp.net-mvc-4
Rodders
Rodders

Reputation: 2435

How can I use HTML Anchors in MVC 4?

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

Upvotes: 2

Views: 10247

Answers (3)

ThatSteveGuy
ThatSteveGuy

Reputation: 1095

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

Upvotes: 0

Rodders
Rodders

Reputation: 2435

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

Upvotes: 4

lboshuizen
lboshuizen

Reputation: 2786

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.

Upvotes: 0

Related Questions