Fork me on GitHub

MvcPager demo - Page index error handling

This sample demonstrates how to handle page index error in the client side.

Please clear the text in the text box bellow, or enter a number less than 1 or greater than 6(page count), then click the go button to see it in action:

Default (PagerOptions.OnPageIndexError property is not set):
First Prev 1 2 3 4 5 6 Next Last 

Calling Javascript built-in function:
PagerOptions.OnPageIndexError="alert('Error type: '+errType+', error message: '+errMsg)"
First Prev 1 2 3 4 5 6 Next Last 

Calling custom Javascript function, show error message using Bootstrap Modal:
    PagerOptions.OnPageIndexError="handleError"

    <script type="text/javascript">
    function handleError(etype, eMsg) {
        $("#errMsg").html("Current page index is: " + this.currentPageIndex + ", page count is: " + this.pageCount + "<br/>error type is: " + etype + ", error message is: " + eMsg);
        $('#msgModal').modal();
    }
    </script>
First Prev 1 2 3 4 5 6 Next Last 

View:

            
@model PagedList<string>
<style type="text/css">
    .pibarea {
        float: left;
        margin-left: 2em;
    }
    .pagerdiv {
        width: 100%;
        overflow: auto;
    }
</style>
<div class="pagerdiv">
    <h6><strong>Default (PagerOptions.OnPageIndexError property is not set):</strong></h6>
    @Html.Pager(Model).Options(o => o.SetId("pager3").SetPageIndexParameterName("id").SetPageIndexBoxId("pib1").SetGoToButtonId("gtb1").AddHtmlAttribute("style", "float:left").SetPagerItemTemplate("{0}&nbsp;"))
    <div class="pibarea">
        <input type="text" id="pib1" style="width:58px" /><button id="gtb1">Go</button>
    </div>
</div>
<hr/>
<div class="pagerdiv">
    <h6><strong>Calling Javascript built-in function:</strong></h6>
    <pre>PagerOptions.OnPageIndexError="alert('Error type: '+errType+', error message: '+errMsg)"</pre>
    @Html.Pager(Model).Options(o => o.SetPageIndexParameterName("id").SetPageIndexBoxId("pib2").SetGoToButtonId("gtb2").AddHtmlAttribute("style", "float:left").SetPagerItemTemplate("{0}&nbsp;").SetOnPageIndexError("alert('Error type: '+errType+', error message: '+errMsg)"))
    <div class="pibarea">
        <input type="text" id="pib2" style="width:58px" /><button id="gtb2">Go</button>
    </div>
</div>
<hr />
<div class="pagerdiv">
    <h6><strong>Calling custom Javascript function, show error message using Bootstrap Modal:</strong></h6>
    <pre>
    PagerOptions.OnPageIndexError="handleError"
    <script type="text/javascript">
    function handleError(etype, eMsg) {
        $("#errMsg").html("Current page index is: " + this.currentPageIndex + ", page count is: " + this.pageCount + "<br/>error type is: " + etype + ", error message is: " + eMsg);
        $('#msgModal').modal();
    }
    </script>
</pre>
    @Html.Pager(Model).Options(o => o.SetPageIndexParameterName("id").SetPageIndexBoxId("pib3").SetGoToButtonId("gtb3").AddHtmlAttribute("style", "float:left").SetOnPageIndexError("handleError").SetPagerItemTemplate("{0}&nbsp;"))
    <div class="pibarea">
        <input type="text" id="pib3" style="width:58px" /><button id="gtb3">Go</button>
    </div>
</div>
<div class="modal fade" id="msgModal">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">Error!</h4>
            </div>
            <div class="modal-body text-danger" id="errMsg">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>
@section Scripts{@{Html.RegisterMvcPagerScriptResource();}
    <script type="text/javascript">
        function handleError(etype,eMsg) {
            $("#errMsg").html("Current page index: "+this.currentPageIndex+", page count: "+this.pageCount+"<br/>error type: "+etype+", error message:"+eMsg);
            $('#msgModal').modal();
        }
    </script>
}

Controller:

            
        public ActionResult PageIndexError(int id = 1)
        {
            return View(new PagedList<string>(new string[0], id, 1, 6));
        }