[RESOLVED]Add paging to a "Middle section" of a razor page

Hi,

I’m working on a MVC3 app, using C#, Razor, EF. On 1 page, we have 3 sections: Top, Middle and Bottom.

Now, the Middle section <div> has a lot of info, and the info grows over time. So this page becomes longer and longer.

So, I get a new request to add paging to the middle section – I’m thinking that I should:

1) use a PartialView for this Middle section’s content only;

2) then add paging to this PartialView – use "PagedList".

Is this the right approach? There’s a lot of code involved in this page, so I’ d like to get some input/advice on this approach, before I get started.

Please share your thoughts, especially you have done something similar.

Thanks,

Claudia

claudia888

Now, the Middle section <div> has a lot of info, and the info grows over time. So this page becomes longer and longer.

One option is to specify a width and height for your middle div and set the overflow property also to the same div. Once the div content crosses over the width and height scroll bar will appear.

<%--Here set the height and width which you want--%>
    <div style="height: 250px; width: 200px; overflow: auto">
        <%--Your content goes here--%>
    </div>

You are using Server side paging.. If you want to go for client side paging, sorting, filtering etc (If your table record count <= 10000). you can use jQuery Datatable. Just by adding one line of code you can get all these features.. Also you can solve your
problem of page growth by passing table size parameters to datatable.. for more details visit

www.datatables.net

Thanks A2H for the suggestion – however, the requirement is to NOT have any scroll bar; it has to be done via paging.

Any other suggestions?

Thanks,

Claudia

1. Create two partial views one for pagination and one for content and call these two in main view.

3. Before getting data from database create view model and by using linq query split the data based on the requirement and count the number of pages.

4. Based on the number of pages you can generate pagination in partial view and call the partial view in the view.

5. By clicking on the each page number get the data from model data and replace the content in the view by using Jquey Ajax.

you can use PageList.MVC Nuget package … very easy and flexible

@model PagedList.IPagedList<northwindapp.models.product>

@using PagedList.Mvc;
@{
    ViewBag.Title = "Product List";    
    Layout = "~/Views/Shared/_Layout.cshtml";
}

see below article for more info

http://dotnetmentors.com/mvc/paging-and-sorting-in-asp-net-mvc-and-entity-framework-application.aspx

Hi l.laxmikant,

Thanks for the suggestion. I tried to use PagedList; the 1st page turns out good, but when I clicked "Next" to go to the 2nd page, it has 2 issues:

1) it goes off to a totally new page, without the same Layout file – which I need;

2) the top and bottom sections are not there on this new page.

So – it seems that the paging works; however, I need the whole middle section to STAY on the same page, as if it is an <iframe> emebeded on this page; so when I click "Next" on this Middle section, the top and bottom sections stays the same.

Any ideas?

I’m thinking to try using <iframe> to wrap the middle section; but not sure if this is a good idea?

Is there a better way to achieve this?

Thanks,

Claudia

Hi mdsahuallah,

Thanks for the suggestion on using jQuery datatables. The UI of table display looks like that it could work, however…1 question:

How do I feed the data to this table? e.g. the sample code from the link you suggested:

$(document).ready(function

$('#myTable').DataTable();

How do I feed data into "#MyTable"? can you provide an example? should I pack the various columns of data into a ViewModel in the controller action, then call them in each column of "#MyTable", in the view?

If you or anyone can provide some sample code on how do I feed data into this table, that’ll be great!

UPdate – I searched around but did not see any good examples; This is what I know how to do: in controller action, I can write data into ViewModel; the exampme I need is: how to put the data in this viewmodel into the jQuery dataTable. If anyone
can make suggestion on sample code, I’d appreciate it very much!

Thanks,

Claudia

why you required an IFrame ???

also make sure you have added reference to PageList css file

Here is a working example of my code . Below is my Html table Note the ID of the table "myTable" . One Main thing for datatables to wrok is it should have correct <thead> and <tbody> elements. thats all.

<table class="table" id="myTable">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.user_name_e)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.user_name_a)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.login_name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.password)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.group_id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Tender_Year)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Contract_Id)
            </th>
        </tr>
    </thead>
    <tbody>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                     @Truncate(item.user_name_e, 25)
                </td>
                <td>
               
                     @Truncate(item.user_name_a, 25)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.login_name)
                </td>
                <td>
                    @Truncate(item.password, 25)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.group_id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Tender_Year)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Contract_Id)
                </td>
            </tr>
        }
    </tbody>
</table>

Add the below script . Note am applying the Datatable() with the above mentioned table ID "myTable"

<script>
    $(document).ready(function () {
        $('#myTable').DataTable();
    });
</script>

Add the below references . And your Datatable is ready with all features

<script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/jqueryui/dataTables.jqueryui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/flick/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/jqueryui/dataTables.jqueryui.css">

You have many more features of datatables. what i mentioned here is just basics. Datatables has amazing features. refer their site ..

Thanks a lot mdsadullah, for the detailed example.

Note: it does not address directly the issue I was asking for this post, but it helped me on another page.

Thanks a lot,

Claudia

@claudia , in the middle section which grows longer, what content you have there. if you have html table which grows longer due to more number of records you can apply the same data table concept, just use it as follows, then your problem will be solved.

<script>
    $(document).ready(function () {
        $('#myTable').DataTable({
            "scrollY": "400px"
        });
    });
</script>

you can change the size of your table by changing the "scrollY" value. Even if you have 100000 records, the size of the table remains constant .. A scroll bar will appear to view the records. As i told you earlier that data tables has lots of features,
you have to refer their site for your needs.. Any doubts ? By the way Data table is open source. its free to use.

Thanks for the further comments.

My issue sis: the data I need to pass to the middle section is more that just a table; it has a list, some text, plus a bunch of other info in a table.

RIght now all of these data are packed in a ViewModel.

Since it is more than a table, I cannot use jQuery dataTable – hope this make sense.

Thanks,

Claudia

Ok fine, what you want to do with that middle section, do you like to set the size of the middle section so that it stays constant with out growing or whats your choice ?? or do you like to change that middle section to a collapsible panel ??

If the second page lick click is not loading the layout, means it is not doing ajax loading and is bieng rendered as plain link. My pagination partial view looks something like below. Take note of ajax options, u need to give the target id as div id of your
middle section, so that while clicking the second page, only the midddle section in your page is replaced with the response. and rest of the page reamins

@model AZDoc.BatchAdminTool.Model.EditResponseModel
@{
    Layout = null;
}
@using PagedList.Mvc;
<div class="float-right">
    <div class="float-left pageH" >Page @(Model.NumberList.PageCount < Model.NumberList.PageNumber ? 0 : Model.BatchNumberList.PageNumber) of @Model.BatchNumberList.PageCount </div>
    <div id="Pagination" class="Paged float-left">

        @Html.PagedListPager(Model.NumberList, Page => Url.Action("Index",
       new
       {
           /*url formation*/
           Page,
           PageSize = Model.PageSize,
           MaterialNumber = Model.MaterialNumber,
           Sort = @AZBatchHelpers.ReturPageSort(Model.Sort),
           Status = Model.Status,
           Number=Model.Number
       }),
                PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new PagedListRenderOptions
                {
                    /* Applying pagination style */
                    LinkToFirstPageFormat = String.Format("<<"),
                    LinkToPreviousPageFormat = String.Format("<"),
                    LinkToNextPageFormat = String.Format(">"),
                    LinkToLastPageFormat = String.Format(">>"),
                    MaximumPageNumbersToDisplay = 5,
                    DisplayEllipsesWhenNotShowingAllPageNumbers = false
                },
                new AjaxOptions
                {
                    /* Ajaxifying the options */
                    UpdateTargetId = "homeContent",
                    HttpMethod = "GET",
                    InsertionMode = InsertionMode.Replace
                }))
    </div>
    <div class="float-clear"></div>
</div>

<div class="float-clear"></div>

Hi nideeshm,

Thanks for the sample code. I did have the "UpdateTargetId" attribute, but not this "InsertionMode = InsertionMode.Replace". This could be what I was missing.

Even though I have solved my issue last night, I will save your code sample for future reference.

Thanks,

Claudia

Asp Forum

It is about ASP.NET

Leave a Reply Cancel reply