Add a count button to WebDrawer

It is possible to speed up the search results in WebDrawer by switching to simpler page navigation.  This post shows how to add a 'Get Count' button to allow users to determine the total number of search results.

Follow the steps in the video and use the code snippets below.

The Code

Views\Shared\searchResults.cshtml

<ul id="trim-pagination">
    <li class="@(start < 2 ? "disabled" : null)">
        @if (start > 1)
            {
                queryString["start"] = (start > pageSize ? start - pageSize : 0).ToString();
            <a href="?@queryString.ToFormUrlEncoded()">&laquo;</a>
        }
        else
        {
            <span> &laquo;</span>
        }
    </li>
    <li>
        @{
            var t = ((start - 1) / pageSize) + 1;
        }
        <span>@t</span>
    </li>

    <li class="@(!this.Model.HasMoreItems ? "disabled" : null)">
        @if (this.Model.HasMoreItems)
            {
                start = (start == 0 ? start + 1 : start);
                queryString["start"] = (start + pageSize).ToString();
            <a href="?@queryString.ToFormUrlEncoded()">&raquo;</a>
        }
        else
        {
            <span>&raquo;</span>
        }
    </li>
    <li>
        <button id="getCount" class="btn search-btn count-btn">Get Count </button>
    </li>
</ul>

css\main.css

.count-btn
{
    margin-left: 20px;
    margin-top:4px;
}

html.busy, html.busy * {  
  cursor: wait !important;  
} 

scripts\webdrawer.js

$("html").bind("ajaxStart", function () {
    $(this).addClass('busy');
}).bind("ajaxStop", function () {
    $(this).removeClass('busy');
});


$("#getCount").click(function () {
    var q = location.href;
    var my_url = location.href + "&format=json&ExcludeCount=true&CountResults=true";
    $.get(my_url, function (response) {
        $("#getCount").text("Count: " + response.Count);
    });
});
Written on May 2, 2017