Paging by using dynamically created html table - asp.net

I am coding online sales for a website. I have a problem on my main page where I would like to show products. I defined a table with 4 columns, but there are over than a 100 products and I need paging for that.
How can I implement paging with 20 products per page?

There are a lot of finished controls that will help you on the way, check this MSDN Article out: Creating a Pager Control for ASP.NET
You could also check out one of the many jQuery Pagers out there, however if you use the jQuery solution all the rows will always be loaded. If you use some pre-built ASP.NET control for it, it will only fetch the number of elements you desire for each page.

If you are dynamically creating an HTML table (and not using any of the built-in controls provided by ASP.net for presenting tabular data), then do the following:
Add TextBox and Button controls to allow the user to input and control the page number to show
Add logic to display the current page number and total pages, items, etc
Change your data retrieval to use the current page number and total number of items per page to only display the items that you want. Ideally you would also only retrieve the items that you need (rather than retrieving the entire dataset and then only showing some of it). There are different ways to do this based on how you are retrieving your data.
Also check out one of the following articles:
Custom Paging in ASP.net 2.0 with Sql Server 2005 - Scott Mitchell
Efficiently Paging through Large Amounts of Data - MSDN, C#
Creating a Pager Control for ASP.NET - Dino Esposito, MSDN

Related

Appropriate ASP.NET control to display detailed information of a record

This is a example of what I am trying to archive
(source: http://store.apple.com/us/product/H7537LL/A/)
I need to display data (mostly text, also have picture and files) from database to a webpage (this could be a product information or a job description or something like that...), what the the appropriate control that developer often use I can use to archive this.
When inserting text (multi-lines) from a textbox to database table, HTML is not allowed so when I pull data out to display them again to the webpage, the break line characters were lost all I get is bunch of text without line break.
I am having a hard time to find the way to save and retrieve, display data, any advices or comments are appreciated.
As per your requirement you can use asp.net Repeater control
Please refer this LINK for more detail about Repeater control
The Repeater control is useful if you need a high degree of control over the generated HTML. Also see the DetailsView control. Here is MSDN documentation describing these controls.
Repeater
The Repeater control is a data-bound container control that produces a
list of individual items. You define the layout of individual items on
a web page using templates. When the page runs, the control repeats
the layout for each item in the data source. For information about
programming the Repeater control, see Repeater Class in the MSDN
library.
DetailsView
The DetailsView control gives you the ability to display, edit,
insert, or delete a single record at a time from its associated data
source. The DetailsView control displays only a single data record at
a time, even if its data source exposes multiple records. For
information about programming the DetailsView control, see DetailsView
Class in the MSDN library.
I'm adding a second answer based on your edited question.
The page like the Apple one you linked to (if it were written in ASP.NET) would be comprised of many different controls, so there isn't any one control that's going to work well for this situation. You're going to end up needing to create an entire page. For that, the only suggestion is to study basic ASP.NET Web Forms to create your page, then load the production information based on the product specified in the URL.

ASP.Net ListView Postback slow with lots of data in listview

I have a listview on my page that can display 10,000 or more rows.
There's a simple 'customer' drop down on the top of the page that does an auto-postback to change the data filter. I've been trying to optimize this routine and I noticed that the majority of the time is spent transferring the ViewState from the client to server.
I've added EnableViewState="false" to the ListView control but it doesn't change it. I've looked at the request in Fiddler and if the customer on screen has say 50 rows, the request content length is low - if they have 10,000 or something it's huge.
Anyone have a fix?
This is happening because data-bound control (including list view) would store their data-source into the view-state. So view-state will be large cause page size bloat.
One of the solution is to disable the view-state for list-view and bind it every time page posts back.
Even better solution is to do data store side paging i.e. if you are showing only 50 rows then fetch only 50 rows from the database. This is typically referred as custom paging in ASP.NET and you can find several examples for custom paging for your data access technology. For example,
custom paging uing Entity Framework & ObjectDataSource: http://geekswithblogs.net/Frez/articles/using-the-entity-framework-and-the-objectdatasource-custom-paging.aspx
You can use SQL Server ranking functions to do paging in a stored procedure: http://msdn.microsoft.com/en-us/library/bb445504.aspx

Best UI control to create expandable report in ASP.NET?

I have a SQL Server table full of training course progress. I want to make a report. The report is to be a list of users where each row shows their name, completion status, and percentages. They are to be able to expand each row to show sub-rows which elaborate with section by section detailed stats. What is the best UI control to use in ASP.NET to pair with my SQL data to display this in an easy to read manner?
Dave Ward has a really interesting post on creating a simple data repeater ASP.net page methods and jQuery to display data in a table format. Essentially you will use page methods to send data to the client and format it into a simple table using a micro-template.
As an alternative approach, you could format your data as a html table with the ASP.Net data repeater and use a jQuery plugin to add the paging functionality client side. You may to be careful with this approach, as with a high volume of data your html could become quite large and paging may become important to ensure a quick user experience.
That takes care of your table on the client. To add functionality to expand a row to display detail you can wrap that information in a div tag and attach a click event to show or hide the content.
Sounds like an ASP.NET GridView/ListView combination to make a grouping grid. Check out this blog post for more information: http://mattberseth.com/blog/2008/01/building_a_grouping_grid_with.html
We have been using Telerik grid controls for similar purpose. They work amazining well.

how to dynamically generate page numbers and only load the corresponding page in the grid?

I need to load data in the gridview dynamically. That is when the user clicks the page number 2 then those records only has to be displayed.. I made a stored proc to return only those records whose page number is sent.. It will also return me the number of records too.. Now i want to create a placeholder which will create the page number buttons dynamically based on the number of records. Could anyone help me with the placeholder code.. ??
You need to use ObjectDataSource for custom paging in GridView.
Check these articles:
https://web.archive.org/web/20210510021915/http://aspnet.4guysfromrolla.com/articles/031506-1.aspx
If you love AJAX, give this a try:
http://dotnetslackers.com/articles/ajax/ASPNETAjaxGridAndPager.aspx
Quote from the page:
Paging
When working with large tables we
often required to use paging. Although
the DataGrid/GridView has built-in
support for paging they are pretty
much useless. Most developers often
refuse to use the built-in
functionality and use their own custom
logic which usually takes a start
index, page size and other additional
parameters and in turn returns only
the paged records with the total
number of records.
There are enough codes on the page to help you start the balll rolling.
i suggest you to use DataGrid instead. DataGrid has paging property

Adding controls dynamically to the page from asp.net web method

I am using jquery ajax method to get data from a web method and present data using DOM(similar to that of google search results).B'coz the data returned from the web method is huge I want to paginate the results.For that I need to create buttons corresponding to the page numbers based on the no. of records the web method retrieves from the database.So I have taken a div on the page.In the web method ,as soon as I can find the number of records obtained from the database,I want to create the buttons and add to this div and display 10 records per page.As far as I know, it is not possible to access anything that is placed on the asp.net page from Web method.In that case how do I paginate the results?
Please help.
if you are using JQuery ajax, you can recreate the UI on the client by doing statements like:
$("<input/>").attr("type", "button").click(function() { .. }).appendTo("parentElementselector");
$.each(webmethodresults, function(i, item) {
//Create UI here using approach illustrated above
});
And programmatically recreate for each page.
EDIT Or find a third party table control that you can bind to on the client side. MS AJAX 4 has some client-side JS components to do this or there are some JQuery ones... but either way, if using JQuery to stream via AJAX, you have to create on the client.
Here is an alternative suggestion on how to handle this scenario:
When the page loads determine how many records you will be returning.
Divide this by how many records you want to show per page (10).
Add paging controls based on how many pages you will have at 10 records per page.
Only query the database for the 10 records you will be showing on a given page. If the data is extremely huge you will not want to load it all into memory anyways. This can be done with a method signature that accepts how many records per page and the the current page you are on.

Resources