Introduction
This article demonstrates how to display a paged grid of data in an ASP.NET MVC application and builds upon the work done in two earlier articles: Displaying a Grid of Data in ASP.NET MVC and Sorting a Grid of Data in ASP.NET MVC. Displaying a Grid of Data in ASP.NET MVC started with creating a new ASP.NET MVC application in Visual Studio, then added the Northwind database to the project and showed how to use Microsoft's Linq-to-SQL tool to access data from the database. The article then looked at creating a Controller and View for displaying a list of product information (the Model).
Sorting a Grid of Data in ASP.NET MVC enhanced the application by adding a view-specific Model (ProductGridModel) that provided the View with the sorted collection of products to display along with sort-related information, such as the name of the database column the products were sorted by and whether the products were sorted in ascending or descending order. The Sorting a Grid of Data in ASP.NET MVC article also walked through creating a partial view to render the grid's header row so that each column header was a link that, when clicked, sorted the grid by that column. In this article we enhance the view-specific Model (ProductGridModel) to include paging-related information to include the current page being viewed, how many records to show per page, and how many total records are being paged through. Next, we create an action in the Controller that efficiently retrieves the appropriate subset of records to display and then complete the exercise by building a View that displays the subset of records and includes a paging interface that allows the user to step to the next or previous page, or to jump to a particular page number, we create and use a partial view that displays a numeric paging interface Step 0: A Brief Roadmap
This article walks through displaying a paged grid of data. It is presumed that you have already read and worked through the following two articles:
Displaying a Grid of Data in ASP.NET MVC, in which we created the ASP.NET MVC demo application and saw how to display a grid of data without any features like sorting or paging, and
Sorting a Grid of Data in ASP.NET MVC, in which we created a view-specific Model (ProductGridModel) and partial view to display a sorted grid of data and to allow the user to sort the grid by a column of their choice in either ascending or descending order.
Recall that in Sorting a Grid of Data in ASP.NET MVC the demo was available at the URL www.yoursite.com/Products/Sortable. Visiting this URL displayed the grid using its default sorting characteristics, which was to sort the grid by the ProductName column in ascending order. To have the data sorted by an alternate column or sorting direction, you'd pass in the column name and sort direction through the querystring like so: www.yoursite.com/Products/Sortable?sortBy=ColumnName&ascending=true|false. For example, the URL /Products/Sortable?sortBy=UnitPrice&ascending=false would display the products sorted by the UnitPrice column in descending order. The paged grid we will create in this article will work in much the same manner. Namely, there will be two optional querystring parameters:page - specifies the index of the page of data to display; note that this index starts at 1, meaning to view page 2 you'd specify a page parameter of 2. If this value is omitted it defaults to showing the first page of data (that is, it has a default value of 1).
pageSize - indicates how many records to show per page. Defaults to 10.
Visiting the URL www.yoursite.com/Products/Paged without specifying any querystring parameters would display the first 10 products, whereas visiting www.yoursite.com/Products/Paged?page=2&pageSize=15 would display the second page of products where each page was 15 records (in other words, it would display products 16-30).
One final note before we get started: the code/demo in this article focuses on paging only. The grid displays the products sorted by their ProductID values in ascending order. A future article will examine how to create a sortable, paged grid. Step 1: Updating ProductGridModel, the View-Specific Model
The demo we created in Displaying a Grid of Data in ASP.NET MVC used a collection of Product objects as its model (namely, the NorthwindDataContext object's Products property). While this worked fine for the simple grid, a more nuanced approach was needed for the sortable grid demo created in Sorting a Grid of Data in ASP.NET MVC. In particular, to render a sortable grid the View needed to know what column the data was sorted by and whether it was sorted in ascending or descending order. To supply this extra information to the View we created a new class named ProductGridModel that served as a Model for the Sortable action's View. (Such classes are referred to as view-specific Models, as they are Models created for a specific View.) Read more: 4 guys from Rolla
This article demonstrates how to display a paged grid of data in an ASP.NET MVC application and builds upon the work done in two earlier articles: Displaying a Grid of Data in ASP.NET MVC and Sorting a Grid of Data in ASP.NET MVC. Displaying a Grid of Data in ASP.NET MVC started with creating a new ASP.NET MVC application in Visual Studio, then added the Northwind database to the project and showed how to use Microsoft's Linq-to-SQL tool to access data from the database. The article then looked at creating a Controller and View for displaying a list of product information (the Model).
Sorting a Grid of Data in ASP.NET MVC enhanced the application by adding a view-specific Model (ProductGridModel) that provided the View with the sorted collection of products to display along with sort-related information, such as the name of the database column the products were sorted by and whether the products were sorted in ascending or descending order. The Sorting a Grid of Data in ASP.NET MVC article also walked through creating a partial view to render the grid's header row so that each column header was a link that, when clicked, sorted the grid by that column. In this article we enhance the view-specific Model (ProductGridModel) to include paging-related information to include the current page being viewed, how many records to show per page, and how many total records are being paged through. Next, we create an action in the Controller that efficiently retrieves the appropriate subset of records to display and then complete the exercise by building a View that displays the subset of records and includes a paging interface that allows the user to step to the next or previous page, or to jump to a particular page number, we create and use a partial view that displays a numeric paging interface Step 0: A Brief Roadmap
This article walks through displaying a paged grid of data. It is presumed that you have already read and worked through the following two articles:
Displaying a Grid of Data in ASP.NET MVC, in which we created the ASP.NET MVC demo application and saw how to display a grid of data without any features like sorting or paging, and
Sorting a Grid of Data in ASP.NET MVC, in which we created a view-specific Model (ProductGridModel) and partial view to display a sorted grid of data and to allow the user to sort the grid by a column of their choice in either ascending or descending order.
Recall that in Sorting a Grid of Data in ASP.NET MVC the demo was available at the URL www.yoursite.com/Products/Sortable. Visiting this URL displayed the grid using its default sorting characteristics, which was to sort the grid by the ProductName column in ascending order. To have the data sorted by an alternate column or sorting direction, you'd pass in the column name and sort direction through the querystring like so: www.yoursite.com/Products/Sortable?sortBy=ColumnName&ascending=true|false. For example, the URL /Products/Sortable?sortBy=UnitPrice&ascending=false would display the products sorted by the UnitPrice column in descending order. The paged grid we will create in this article will work in much the same manner. Namely, there will be two optional querystring parameters:page - specifies the index of the page of data to display; note that this index starts at 1, meaning to view page 2 you'd specify a page parameter of 2. If this value is omitted it defaults to showing the first page of data (that is, it has a default value of 1).
pageSize - indicates how many records to show per page. Defaults to 10.
Visiting the URL www.yoursite.com/Products/Paged without specifying any querystring parameters would display the first 10 products, whereas visiting www.yoursite.com/Products/Paged?page=2&pageSize=15 would display the second page of products where each page was 15 records (in other words, it would display products 16-30).
One final note before we get started: the code/demo in this article focuses on paging only. The grid displays the products sorted by their ProductID values in ascending order. A future article will examine how to create a sortable, paged grid. Step 1: Updating ProductGridModel, the View-Specific Model
The demo we created in Displaying a Grid of Data in ASP.NET MVC used a collection of Product objects as its model (namely, the NorthwindDataContext object's Products property). While this worked fine for the simple grid, a more nuanced approach was needed for the sortable grid demo created in Sorting a Grid of Data in ASP.NET MVC. In particular, to render a sortable grid the View needed to know what column the data was sorted by and whether it was sorted in ascending or descending order. To supply this extra information to the View we created a new class named ProductGridModel that served as a Model for the Sortable action's View. (Such classes are referred to as view-specific Models, as they are Models created for a specific View.) Read more: 4 guys from Rolla
Posts
0 comments:
Post a Comment