How to pass Data from Controller to View with IEnumerable Model in MVC?

Question

I have a view with 1700 records. I want to paginate them using ajax to make page load lighter. I am able to do paging and bring set of new records everytime based on the page selected.

The Problem I am showing only 10 indexes in page-bottom, the page selected as well as 4 to the left and 5 to the right. Now I need CurrentPage value which I send everytime from jQuery/ajax to controller which I get as a ajax data parameter. The problem is in getting back Current page value persistent to view when the next page index I select. I always get the old value and not the last selected page value. I have even used ViewBag instead of tempData but no success.

View Code:

@model IEnumerable<UrCompedDAL.DBModels.SlotMachineModel>
 <div class="my-properties">
                            <table id="tbl_slots" class="table no-margin" data-search="true" data-pagination="false">
                                <tbody class="orgTbody">
                                    @foreach (var item in Model)
 {
                                        <tr>
                                            //Code for Slot list
                                        </tr>
                                                                }
                                </tbody>
                            </table>
                            <ul class="paging">
                                @{
                                                int i = 1;
                                                int pg = Convert.ToInt32(TempData["Current"]);
                                                if (i > 0 || i == ViewBag.PageSize)
                                                {
                                        <li>
                                            <a href="#" class="lipaging"><<</a>
                                        </li>
                                    }


                                    if (pg < 6)
                                    {
                                        for (i = 1; i < 11; i++)
                                        {
                                            <li>
                                                <a href="#" class="lipaging">@i</a>
                                            </li>
                                        }
                                    }

                                    else
                                    {
                                        for (i = pg - 4; i < pg; i++)
                                        {
                                            <li>
                                                <a href="#" class="lipaging">@i</a>
                                            </li>
                                        }
                                        for (i = pg; i < pg + 6; i++)
                                        {
                                            <li>
                                                <a href="#" class="lipaging">@i</a>
                                            </li>
                                        }
                                    }


                                    if (i > 1 || i < ViewBag.PageSize)
                                    {
                                        <li>
                                            <a href="#" class="lipaging">>></a>
                                        </li>
                                    }
                                }
                            </ul>
                        </div>
<script>
    $(document).ready(function () {
$('.lipaging').click(function () {
            $("#loadingDiv").show();
            $(this).addClass('active');
            var pageThis = $(this).text();
            var current = @TempData["Current"];
            if (pageThis == '>>') {
                pageThis = current +1;
            }
            if (pageThis == '<<') {
                pageThis = current -1;
            }
 $.ajax({
                type: 'get',
                url: '@Url.Action("Index", "Game_SlotMachine")',
                data: {
                    CurrentPage: pageThis
                }
            }).done(function (data) {

                var startIndex = data.indexOf("<tbody");
                var endIndex = data.indexOf("</tbody>");
                var html = data.substring(startIndex, endIndex + 8);


                $('#tbl_slots').html('');
                $('#tbl_slots').html(html);

                setTimeout(function () {
                    filter();
                }, 300);
                $("#loadingDiv").hide();
});
        });

Controller Code:

public ActionResult Index(int id = 0, int CurrentPage = 1)
        {
            List<SlotMachineModel> slotmodel = new List<SlotMachineModel>();
            slotmodel = UrCompedDAL.DataAccessor.Instance.GameAccessor.GetAllSlotMachines().ToList();
            ViewBag.PageSize = slotmodel.Count / 10;

            TempData["Current"] = CurrentPage;

                slotmodel = slotmodel.Skip((CurrentPage - 1) * 10).Take(10).ToList();
            return View(slotmodel);
        }

Please help.

Answer 1

Pack your model IEnumerable<UrCompedDAL.DBModels.SlotMachineModel> into other model and set your model as a property of new model. Pass this new model as a model for your view. You will be able to pass as many data from controller as you like.

Answer 2

The issue is that you're re-creating the whole view, but only updating the table from the result

 var html = data.substring(startIndex, endIndex + 8);
 $('#tbl_slots').html('');
 $('#tbl_slots').html(html);

(you should also reconsider how you extract the table from the view and use a partial instead).

None of the ajax/2nd+ rendering of the paging ul is used and is "thrown away" each time.

You can either overwrite your ul in the same way as the table or update the paging element via javascript (probably the former).

Reusing the whole view (rather than a partialview), you'd get something like:

}).done(function (data) {    
    var html = $("<div/>").html(data);
    $('#tbl_slots').html(html.find("#tbl_slots").html());
    $('ul.paging').html(html.find("ul.paging").html());