locked
how to add pagging to informaton on view in mvc ? RRS feed

  • Question

  • User1928394251 posted

    hello.

    i have view :

    @model IEnumerable<MainNoteIt.Models.entity>
    @using Microsoft.AspNet.Identity
    @using  System.Globalization;

    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <link href="~/Content/bootstrap-rtl.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="~/StyleSheetshow1.css" />
        <link href="~/StyleSheet.css" rel="stylesheet" />
        <title> نمایش فعالیتهای کارشناس </title>
    </head>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink(" اطلاعات فعالیتهای واحد", "", "", null, new { @class = "navbar-brand" })
    <a href="#"><img src="~/Images/logo shabake golestan.png" width="52" height="48" style="margin-right:1100px" /></a>

            </div>
            <div class="navbar-collapse collapse">
                
              
            </div>
        </div>
    </div>
    <body dir="rtl" style="margin-top:80px">
     
        <p >

            <div dir="rtl" style="font-family:Tahoma" class="glyphicon-triangle-right" >
                @Html.ActionLink("ثبت فعالیت جدید", "Create")
            </div>
        
        <div dir="ltr" style="font-family:Tahoma" class="glyphicon-triangle-right" >
            @Html.ActionLink("برگشت به صفحه اصلی", "Index")
        </div>
            </p>
        <table id="table1">
            <tr>
                <th>
                    شماره سطر
                </th>
                <th>
                    ردیف
                </th>
                <th>
                    تاریخ
                </th>
                <th>
                    متقاضی
                </th>
                <th>
                    حوزه
                </th>
                <th>
                    واحد
                </th>
                <th>
                    شرح کار
                </th>
                <th>
                    کارشناس
                </th>
                <th>
                    زمان(دقیقه)
                </th>
                <th>
                    مدل پاسخ
                </th>
                <th>
                    ملاحظات
                </th>
                <th></th>
            </tr>

           


            @{ 
                int i = 0;


                foreach (var item in Model)
                {
                    i++;


                <tr>
                    
                    <td>
                       
                        <p>
                            @i
                        </p>
                    </td>
                    <td>
                       
                        @Html.DisplayFor(modelItem => item.date)
                       
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.moteghazi)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.hozeh)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.vahed)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.sharhkar)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.karshenas)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.time)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.modelpasokh)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.molahezat)
                    </td>
                    <td>
                        @Html.ActionLink("ویرایش", "Edit", new { id = item.id }) |
                        @Html.ActionLink("جزئیات", "Details", new { id = item.id }) |
                        @Html.ActionLink("حذف", "Delete", new { id = item.id })
                    </td>
                </tr>
                    }
                }
        </table>
        <div dir="rtl" style="width:180px" class="alert-info">
            <h3 style="margin-right:20px">تعداد فعالیت=@i</h3>
        </div>

    @Styles.Render("~/newContent/css")
    </body>
    </html>

    how to paging without change  my  model , just in view ?

    Tuesday, February 23, 2021 10:41 AM

Answers

  • User1686398519 posted

    Hi aabedeni056, 

    paging without change  my  model , just in view ?

    You can use jquery.dataTables. I wrote an example, you can refer to it.

    • You can install jquery.datatables using NuGet, and then reference the jquery.dataTables.min.js and jquery.dataTables.min.css files.
    • I referenced these two files in the _Layout view.

    Model

        public class TestEntity
        {
            public int Id { get; set; }
            public string Name { get; set; }
        }

    Controller

        public class TestEntityController : Controller
        {
            public DailyMVCDemoContext db = new DailyMVCDemoContext();
            public ActionResult Index()
            {
                return View(db.TestEntity.ToList());
            }
        }

    Index

    @model IEnumerable<DailyMVCDemo3.Models.TestEntity>
    <table id="table1" class="table">
        <thead>
            <tr>
                <th>
                    Index
                </th>
                <th>
                    Name
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @{
                int i = 0;
                foreach (var item in Model)
                {
                    i++;
                    <tr>
                        <td>
                            <p>
                                @i
                            </p>
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Name)
                        </td>
                        <td>
                            @Html.ActionLink("ویرایش", "Edit", new { id = item.Id }) |
                            @Html.ActionLink("جزئیات", "Details", new { id = item.Id }) |
                            @Html.ActionLink("حذف", "Delete", new { id = item.Id })
                        </td>
                    </tr>
                }
            }
        </tbody>
    </table>
    @section scripts{
        <script>
            $("#table1").DataTable();
        </script>
    }

    _Layout

        ... ...
        <link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
         ... ...  
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
        ... ...

    Here is the result. 

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 24, 2021 2:38 AM

All replies

  • User-474980206 posted

    Paging is implemented  in the controller. Typically you just add a links in the view that pass the desired page number to the action. Usually a previous and next button, but maybe a list of page numbers. Optionally the page size is included.

    Tuesday, February 23, 2021 3:40 PM
  • User1686398519 posted

    Hi aabedeni056, 

    paging without change  my  model , just in view ?

    You can use jquery.dataTables. I wrote an example, you can refer to it.

    • You can install jquery.datatables using NuGet, and then reference the jquery.dataTables.min.js and jquery.dataTables.min.css files.
    • I referenced these two files in the _Layout view.

    Model

        public class TestEntity
        {
            public int Id { get; set; }
            public string Name { get; set; }
        }

    Controller

        public class TestEntityController : Controller
        {
            public DailyMVCDemoContext db = new DailyMVCDemoContext();
            public ActionResult Index()
            {
                return View(db.TestEntity.ToList());
            }
        }

    Index

    @model IEnumerable<DailyMVCDemo3.Models.TestEntity>
    <table id="table1" class="table">
        <thead>
            <tr>
                <th>
                    Index
                </th>
                <th>
                    Name
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @{
                int i = 0;
                foreach (var item in Model)
                {
                    i++;
                    <tr>
                        <td>
                            <p>
                                @i
                            </p>
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Name)
                        </td>
                        <td>
                            @Html.ActionLink("ویرایش", "Edit", new { id = item.Id }) |
                            @Html.ActionLink("جزئیات", "Details", new { id = item.Id }) |
                            @Html.ActionLink("حذف", "Delete", new { id = item.Id })
                        </td>
                    </tr>
                }
            }
        </tbody>
    </table>
    @section scripts{
        <script>
            $("#table1").DataTable();
        </script>
    }

    _Layout

        ... ...
        <link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
         ... ...  
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
        ... ...

    Here is the result. 

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 24, 2021 2:38 AM
  • User1928394251 posted

    thanks you . i use @page list   , add . return View(entity.OrderBy(Notes => Notes.date).ToList().ToPagedList(page ?? 1, 100));

    then add

     <div id='Paging' dir="rtl">

                 @Html.PagedListPager(Model, page => Url.Action("show1", new { page, searchby = Request.QueryString["searchby"], search = Request.QueryString["search"] }), new PagedListRenderOptions() { Display = PagedListDisplayMode.IfNeeded, DisplayPageCountAndCurrentLocation = true, DisplayItemSliceAndTotal = true })

        </div>  to view

    it works right .

    Saturday, February 27, 2021 6:27 AM