ASP.NET MVC PaginatedList Pager - Put wise “…” aft

I have created a paginatedList and pager for that for my ASP.NET MVC project. It works great, well thing so.

One thing that I cannot figure it out is to how to put ... after certain point. For example, lets say my pager looks like as follows :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 Next >>>

What I need is some thing as follows :

1 2 3 4 5 6 7 8 9 10 ... Next >>>

the ... is for 11 here. When we go to page 11, the pager should be as follows :

... 11 12 13 14 Next >>>

This implementation is the one which I cannot figure it out how to do this.

And here is how my current pager code looks like :

<div id="pager">

    @if (Model.PrimaryModel.HasPreviousPage) {
        @:@Html.ActionLink(
            "<<< Previous", 
            Model.Property["action"], 
            new { 
                controller = Model.Property["controller"], 
                Area = Model.Property["area"], 
                page = (Model.PrimaryModel.PageIndex - 1) 
            }, 
            new { 
                data_jquery_ajax_url = Url.Action(
                    string.Format("pagerAjaxCall_{0}", Model.Property["action"]), 
                    new { 
                        controller = Model.Property["controller"], 
                        Area = Model.Property["area"], 
                        page = (Model.PrimaryModel.PageIndex - 1) 
                    }
                ) 
            }
        )
    }

    @if (Model.PrimaryModel.TotalPages >= 2) {

        int totalPageNumber = 0;

        for (int i = 0; i < Model.PrimaryModel.TotalPages; i++) {

            int value = i + 1;

            if (Model.PrimaryModel.PageIndex == i) {
                @:@Html.ActionLink(value.ToString(), Model.Property["action"], new { controller = Model.Property["controller"], Area = Model.Property["area"], page = (i) }, new { @class = "active-page", data_jquery_ajax_url = Url.Action(string.Format("pagerAjaxCall_{0}", Model.Property["action"]), new { controller = Model.Property["controller"], Area = Model.Property["area"], page = (i) }) })
            } else { 
                @:@Html.ActionLink(value.ToString(), Model.Property["action"], new { controller = Model.Property["controller"], Area = Model.Property["area"], page = (i) }, new { data_jquery_ajax_url = Url.Action(string.Format("pagerAjaxCall_{0}", Model.Property["action"]), new { controller = Model.Property["controller"], Area = Model.Property["area"], page = (i) }) })
            }

            totalPageNumber++;
        }

        @*@:current : @(Model.PrimaryModel.PageIndex+1), totalPage @totalPageNumber.ToString(), right side @((totalPageNumber - Model.PrimaryModel.PageIndex)-1), left side @(totalPageNumber - (totalPageNumber - Model.PrimaryModel.PageIndex))*@
    }

    @if (Model.PrimaryModel.HasNextPage) {
        @:@Html.ActionLink(
            "Next >>>", 
            Model.Property["action"], 
            new { 
                controller = Model.Property["controller"], 
                Area = Model.Property["area"], 
                page = (Model.PrimaryModel.PageIndex + 1) 
            }, 
            new { 
                data_jquery_ajax_url = Url.Action(
                    string.Format("pagerAjaxCall_{0}", Model.Property["action"]), 
                    new { 
                        controller = Model.Property["controller"], 
                        Area = Model.Property["area"], 
                        page = (Model.PrimaryModel.PageIndex + 1) 
                    }
                ) 
            }
        )
    }

</div>

Any thoughts?

Just should give you a general idea of how to fix it

var start = Model.PrimaryModel.PageIndex > 10 ? Model.PrimaryModel.PageIndex : 0;

if (start > 0) { //create "..." }
for (int i = start; i <= Model.PrimaryModel.TotalPages && i < start + 10; i++) 
{ 
    //generate pages
}
if (start + 10 < 0 Model.PrimaryModel.TotalPages) { //create "..." }