Статьи

Сортировка таблиц и разбиение на страницы с помощью jQuery и Razor в ASP.NET MVC

Декабрь 20, 2017

Вступление

JQuery любит жить внутри страниц, которые построены на основе ASP.NET MVC Framework.

ASP.NET MVC — это место, где вещи организованы очень хорошо, и их довольно сложно испачкать, особенно потому, что шаблон навязывает вам чистоту (вы все равно можете сделать его грязным, если хотите;)).

Мы все знаем, как легко построить таблицу HTML со строкой заголовка, строкой нижнего колонтитула и строками таблицы, показывающими некоторые данные. С ASP.NET MVC мы можем сделать это довольно легко, но в результате мы получим таблицу HTML в чистом виде, которая показывает только данные, но не включает сортировку, разбивку на страницы и некоторые другие расширенные функции, которые мы использовали в веб-формах ASP.NET. Вид сетки. Хорошо, есть WebGrid MVC Helper, но что если мы захотим сделать что-то из чистой таблицы в нашем собственном чистом стиле?

В одном из моих недавних проектов я использовал плагины jQuery tablesorter и tablesorter.pager, которые идут вместе. Вам не нужно знать jQuery, чтобы сделать эту работу … Вам нужно немного знать CSS, чтобы создать красивый дизайн для своего стола, но, конечно, вы можете использовать мой из демо … Итак, что вы увидите в этом блоге, как прикрепите этот плагин к вашей чистой таблице HTML и div для разбивки на страницы и сделайте вашу таблицу с расширенными функциями сортировки и нумерации страниц.

 Ресурсы демо-проекта

Ресурсы, которые я использую для этого демонстрационного проекта, показаны на следующем экране печати окна обозревателя решений:

  • Контент / изображения — папка, содержащая все изображения стрелок вверх / вниз, кнопки нумерации страниц и т. Д. Вы можете свободно заменять их своими собственными, но сохраняйте имена одинаковыми, если не хотите ничего менять в CSS, который мы создадим позже. ,
  • Content / Site.css — основная тема css, куда мы добавим тему и для нашей таблицы.
  • Controllers / HomeController.cs — контроллер, который я использую для этого проекта
  • Models / Person.cs — для этой демонстрации я использую класс Person.cs
  • Сценарии — jquery-1.4.4.min.js, jquery.tablesorter.js, jquery.tablesorter.pager.js — требуется сценарий, чтобы волшебство произошло
  • Views / Home / Index.cshtml — представление индекса (механизм просмотра бритвы)

другие элементы не важны для демонстрации.

ASP.NET MVC

1. М Odel

В этой демонстрации я использую только один класс Person, который определяет сущность Person с несколькими свойствами. Вы можете использовать свою собственную модель, возможно, такую, которая будет обращаться к данным из базы данных или любого другого ресурса.

Person.cs

public class Person
{
    public string Name { get; set; }
    public string Surname { get; set; }
    public string Email { get; set; }
    public int? Phone { get; set; }
    public DateTime? DateAdded { get; set; }
    public int? Age { get; set; }

    public Person(string name, string surname, string email,
        int? phone, DateTime? dateadded, int? age)
    {
        Name = name;
        Surname = surname;
        Email = email;
        Phone = phone;
        DateAdded = dateadded;
        Age = age;
    }
}

2. В IEW

В нашем примере у нас есть только одна страница Index.chtml, где используется движок Razor View. Razor View Engine — мой фаворит для ASP.NET MVC, потому что он очень интуитивен, гибок и сохраняет ваш код чистым.

3. С ontroller

Так как это простой пример с одной страницей, мы используем один HomeController.cs, где у нас есть два метода: один из типов ActionResult (Index) и другой GetPeople (), используемые для создания и возврата списка людей.

HomeController.cs

public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        ViewBag.People = GetPeople();
        return View();
    }

    public List<Person> GetPeople()
    {
        List<Person> listPeople = new List<Person>();
        
        listPeople.Add(new Person("Hajan", "Selmani", "[email protected]", 070070070,DateTime.Now, 25));            
        listPeople.Add(new Person("Straight", "Dean", "[email protected]", 123456789, DateTime.Now.AddDays(-5), 35));
        listPeople.Add(new Person("Karsen", "Livia", "[email protected]", 46874651, DateTime.Now.AddDays(-2), 31));
        listPeople.Add(new Person("Ringer", "Anne", "[email protected]", null, DateTime.Now, null));
        listPeople.Add(new Person("O'Leary", "Michael", "[email protected]", 32424344, DateTime.Now, 44));
        listPeople.Add(new Person("Gringlesby", "Anne", "[email protected]", null, DateTime.Now.AddDays(-9), 18));
        listPeople.Add(new Person("Locksley", "Stearns", "[email protected]", 2135345, DateTime.Now, null));
        listPeople.Add(new Person("DeFrance", "Michel", "[email protected]", 235325352, DateTime.Now.AddDays(-18), null));
        listPeople.Add(new Person("White", "Johnson", null, null, DateTime.Now.AddDays(-22), 55));
        listPeople.Add(new Person("Panteley", "Sylvia", null, 23233223, DateTime.Now.AddDays(-1), 32));
        listPeople.Add(new Person("Blotchet-Halls", "Reginald", null, 323243423, DateTime.Now, 26));
        listPeople.Add(new Person("Merr", "South", "[email protected]", 3232442, DateTime.Now.AddDays(-5), 85));
        listPeople.Add(new Person("MacFeather", "Stearns", "[email protected]", null, DateTime.Now, null));

        return listPeople;
    }
}


ТАБЛИЦА CSS / HTML ДИЗАЙН

Теперь давайте начнем с реализации. Прежде всего, давайте создадим структуру таблицы и основной CSS.

1. Структура HTML 

@{
    Layout = null;    
}
<!DOCTYPE html>
<html>
<head>
    <title>ASP.NET & jQuery</title>
    <!-- referencing styles, scripts and writing custom js scripts will go here -->
</head>
<body>
    <div>
        <table class="tablesorter">
            <thead>
                <tr>
                    <th> value </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>value</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th> value </th>
                </tr>
            </tfoot>
        </table>
        <div id="pager">
            
        </div>
    </div>
</body>
</html>

Итак, это основная структура, которую вам нужно создать для каждой из ваших таблиц, в которой вы хотите применить функциональность, которую мы создадим. Конечно на скрипты ссылаются один раз;).

Как видите, в нашей таблице есть класс таблиц, а также у нас есть div с идентификатором pager . На следующих шагах мы будем использовать оба этих параметра для создания необходимых функций.

Полный Index.cshtml, кодированный для получения данных от контроллера и отображения на странице:

<body>
    <div>
        <table class="tablesorter">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Surname</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Date Added</th>
                </tr>
            </thead>
            <tbody>
                @{
                    foreach (var p in ViewBag.People)
                    {            
                    <tr>
                        <td>@p.Name</td>
                        <td>@p.Surname</td>
                        <td>@p.Email</td>
                        <td>@p.Phone</td>
                        <td>@p.DateAdded</td>
                    </tr>
                    }
                }
            </tbody>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Surname</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Date Added</th>
                </tr>
            </tfoot>
        </table>
        <div id="pager" style="position: none;">
            <form>
            <img src="@Url.Content("~/Content/images/first.png")" class="first" />
            <img src="@Url.Content("~/Content/images/prev.png")" class="prev" />
            <input type="text" class="pagedisplay" />
            <img src="@Url.Content("~/Content/images/next.png")" class="next" />
            <img src="@Url.Content("~/Content/images/last.png")" class="last" />
            <select class="pagesize">
                <option selected="selected" value="5">5</option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="40">40</option>
            </select>
            </form>
        </div>
    </div>
</body>

Итак, в основном структура одинакова. Я добавил код @Razor для создания таблицы с данными, полученными из ViewBag.People, которые были заполнены данными в домашнем контроллере.

2. Дизайн
CSS Код CSS, который я создал:

/* DEMO TABLE */
body {
    font-size: 75%;
    font-family: Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif;
    color: #232323;
    background-color: #fff;
}
table { border-spacing:0; border:1px solid gray;}
table.tablesorter thead tr .header {
    background-image: url(images/bg.png);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tablesorter tbody td {
    color: #3D3D3D;
    padding: 4px;
    background-color: #FFF;
    vertical-align: top;
}
table.tablesorter tbody tr.odd td {
    background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
    background-image: url(images/asc.png);
}
table.tablesorter thead tr .headerSortDown {
    background-image: url(images/desc.png);
}
table th { width:150px;
           border:1px outset gray;
           background-color:#3C78B5;
           color:White;
           cursor:pointer;
}
table thead th:hover { background-color:Yellow; color:Black;}
table td { width:150px; border:1px solid gray;}


СТРАНИЦА И СОРТИРОВКА

Теперь, когда все готово и у нас есть данные, давайте сделаем функции разбивки на страницы и сортировки
1. Ссылки на jQuery Scripts

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>

2. Сценарий сортировки и разбиения на страницы jQuery

<script type="text/javascript">
    $(function () {
        $("table.tablesorter").tablesorter({ widthFixed: true, sortList: [[0, 0]] })
        .tablesorterPager({ container: $("#pager"), size: $(".pagesize option:selected").val() });
    });
</script>

Итак, имея всего две строчки кода, я использую плагины tablesorter и tablesorterPager, предоставляя некоторые варианты обоим этим.
Опции добавлены:

  • tablesorter — widthFixed: true — дает фиксированную ширину столбцов
  • tablesorter — sortList [[0,0]] — Массив инструкций для сортировки по столбцам и направления в формате: [[columnIndex, sortDirection], …] где columnIndex — это основанный на нуле индекс для ваших столбцов влево- to-right и sortDirection: 0 для возрастания и 1 для убывания. Допустимый аргумент, сортирующий по возрастанию сначала по столбцу 1, а затем по столбцу 2, выглядит следующим образом: [[0,0], [1,0]] (источник: http://tablesorter.com/docs/ )
  • tablesorterPager — container: $ («# pager») — сообщает контейнер пейджера, div с id pager в нашем случае.
  • tablesorterPager — размер : размер по умолчанию для каждой страницы, где я выбираю значение по умолчанию, поэтому, если вы поместите его в любой из других вариантов в вашем списке выбора, у вас будет это число строк по умолчанию для каждой страницы таблицы. ,


КОНЕЧНЫЕ РЕЗУЛЬТАТЫ

1. Table once the page is loaded (default results per page is 5 and is automatically sorted by 1st column as sortList is specified)

2. Sorted by Phone Descending

3. Changed pagination to 10 items per page

4. Sorted by Phone and Name (use SHIFT to sort on multiple columns)

5. Sorted by Date Added

6. Page 3, 5 items per page

ADDITIONAL ENHANCEMENTS

We can do additional enhancements to the table. We can make search for each column. I will cover this in one of my next blogs. Stay tuned.


DEMO PROJECT

You can download demo project source code from HERE.

CONCLUSION

Once you finish with the demo, run your page and open the source code. You will be amazed of the purity of your code.

Working with pagination in client side can be very useful. One of the benefits is performance, but if you have thousands of rows in your tables, you will get opposite result when talking about performance. Hence, sometimes it is nice idea to make pagination on back-end. So, the compromise between both approaches would be best to combine both of them. I use at most up to 500 rows on client-side and once the user reach the last page, we can trigger ajax postback which can get the next 500 rows using server-side pagination of the same data. I would like to recommend the following blog post http://weblogs.asp.net/gunnarpeipman/archive/2010/09/14/returning-paged-results-from-repositories-using-pagedresult-lt-t-gt.aspx, which will help you understand how to return page results from repository.

I hope this was helpful post for you. Wait for my next posts ;).

Please do let me know your feedback.

Best Regards,
Hajan

47
Share: