This is the first of a series of articles am going to write about Asp.Net 2.0 pagination and how to build a custom digg like numeric pagination control which can be used with DataList, Repeater or any other data bound controls.

NOTE: I haven’t used the .Net 3.5 DataPager control yet, so am not sure if it already addressed the scenarios in the following discussion

The default pagination in Asp.net which comes with GridView is great in terms of developer productivity and ease of use. When use with data source controls it will work without even a single line of code and it is easy to customize by setting simple properties available.

But you may need to think about writing a your own pagination logic when

1. You need pagination with Datalist or Repeater
2. You need search engine friendly pagination
3. You need user friendly pagination
4. You need clean HTML for the pagination links
5. You need a pagination strip which will work independent of data bound controls

1. Pagination with Datalist or Repeater

I like DataList and Repeater more than GridView because of their design flexibility and the control over rendered HTML. See a comparison between Repeater, DataList and GridView here
http://www.queensdev.net/Samples/RepeaterDataListGridview.aspx

Repeater and DataList are light and you have the flexibility over the design, but that comes with a price - no pagination. A Google search for “Repeater pagination” will show the huge number of requests and articles on this subject.

2. Search engine friendly pagination

This is a major issue with the default Asp.Net pagination. The pagination links in GridView are rendered as JavaScript link buttons, not as HTML hyperlinks. As per SEO guidelines search engines can not understand these kinds of JavaScript links. Search engines will not navigate to the inner pages of a GridView and the page crawling will stop in the first page itself.

By using the default pagination with GridView we are unknowingly restricting the search engine crawlers from accessing our pages. Most of the public facing web sites including asp.net forums and MSDN use search engine friendly links for the pagination.

3. User friendly pagination

Yes there are lot of options available to customize the default GridView pagination but the use of three dots (…) to get the next set of pagination is really confusing. Our users had difficulty in understanding the 3 dots are links and clicking on it will generate the next set of pagination links.

Just see how pagination work in some high profile sites

i. Asp.net forums (http://forums.asp.net)

Pagination in Asp.Net forums

Go to the Getting Started forum and see the pagination in the bottom. It shows a numeric pagination strip with first 5 page links, link to next & last pages and a description. See the 3 dots (…) between next and last links; they are not links but simply telling the user that there is lot of pages hidden in between next and last pages.

As we move along the pages, the pagination strip is also getting changed to show the pages near to the current page.

ii. Digg ( http://www.digg.com/ )

Pagination in Digg

In the home, the pagination strip in digg.com is showing first 10 pages, last two pages and previous next buttons. Go to page 10 and we can see the numeric pagination strip is updated to show the pages near to page 10. The pagination strip is also showing links to move to the first two and last two pages at any time.

MSDN forums also use same kind pagination.

Pagination in MSDN

iii. Default Asp.Net numeric pagination (sample page link)

Asp.Net GridView pagination

Now analyze how the default Asp.Net numeric pagination works. Go to this page and check the pagination. It shows 10 page links and a link to the last page. Click on page 4, no change in the pagination strip. Click on page 10, no change. I want to go to page 11, what should I do? Oh!! the 3 dots are links to next set of pagination.

Just compare the usability of the above 3 paginations. Definitely the first two paginations are lot easier than the third one. Personally I like the Digg pagination most.

4. The rendered HTML is not clean

The pagination strip will render as an inner table to the GridView table with each page links in separate cells. It is not a big issue but why can’t it all be rendered in a single cell without any inner tables?

5. Pagination without bound controls

There are situations in which we may need to simply create pagination links based on the total number of items available.
For example, dividing a big article into a number of pages. The current page can be shown in a literal but the links to rest of the pages need to create separately based on the total number of pages.

GridView pagination is the best choice for admin part of the site

Because of the 2nd and 3rd points explained above we always try to minimize the use of GridView pagination to the admin side of the site. In the admin side it’s logical to use GridView and default pagination wherever possible because

1. In most cases the admin just want to see the data as a list of items with edit and delete options
2. The admin may need to sort the data
3. Admin will be a trained user who can understand the 3 dots are link to next set of pages
4. The admin side pages are secure and need not come in the search engines

That’s all in the first article about asp.net pagination. In next few days I will write next article on how to create a custom Digg like numeric pagination to solve the above issues.

Thanks for reading! Please give feedback and suggestions

Impromptu is an excellent JQuery plug-in to show beautiful message boxes in web forms. Its is easy to use and can be used to make any kind of message boxes such as alerts, confirm boxes, prompts, popup login boxes, popup input wizards etc

Confirmation message box

From their site

JQuery Impromptu is an extension to help provide a more pleasant way to spontaneously prompt a user for input. More or less this is a great replacement for an alert, prompt, and confirm.

Click here to see the DEMO and DOWNLOAD the source

Setting up an asp.net page to use JQuery Impromptu (The download zip has all this included)
Include the latest jquery.js file
Include the latest jquery-impromptu.js file
Include the latest impromptu.css file

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-impromptu.2.6.min.js" type="text/javascript"></script>
<link href="impromptu.css" rel="stylesheet" type="text/css" />

Although the Impromptu site http://trentrichardson.com/Impromptu/index.php provides excellent code samples and demos on how to use this plug-in, its not straight forward to use confirm messages for Asp.Net submit buttons or link buttons. This is because you will get the result of confirm box (OK or Cancel) only in a callback result function rather than directly in the OnClientClick of the asp.net button.

Matt Berseth has an excellent blog about Customizing the Delete Confirmation Dialog in Dynamic Data using JQuery thick box. I used the same method to implement Impromptu confirm boxes for normal forms and Gridviews.

Basically the idea is - show the confirm message on the click of an html button/link and if the user opted OK in the confirm box click a hidden asp:button using JavaScript.

Scenario 1 - Showing a confirm message on the submit of a web form

HTML

<!-- The button which will display in the UI and show the confirmation -->
<input type="button" onclick="return confirmSubmit();" value="Submit" />

<!-- Hidden asp.net command button that actually issues the submit -->
<asp:Button runat="server" ID="btnSubmit" style="display:none;" OnClick="btnSubmit_Click" />

JavaScript

<script language="javascript" type="text/javascript">
function confirmSubmit()
{
$.prompt('Are you sure you want to submit?'
, {
buttons: { Ok: true, Cancel: false }
, callback: confirmSubmitResult
}
);
return false;
}

function confirmSubmitResult(v,m,f)
{
if( v) //post back if the user clicked OK
$('#<%= btnSubmit.ClientID %>').click();
}
</script>

Scenario 2 - Show message after a postback (for example success or error messages after registration)
To show Impromptu message after postback we will make the JavaScript in the code behind and add to the page using ClientScript manager

Codebehind

//Showing JQuery prompt after Postback
protected void btnSubmit_Click(object sender, EventArgs e)
{
//The prompt function shlould be called inside $(document).ready() function inorder to avoid
//IE's "Operation aborted" error
//in this script we are using {{ for JQuery code becuase the string need to be used inside a String.Format
function - otherwise you need to use only one {
string prompt = "<script>$(document).ready(function(){{$.prompt('{0}!');}});</script>";
string message = string.Format(prompt, "This message is coming after postback.<br />Hello " + txtName.Text);
ClientScript.RegisterStartupScript(typeof(Page), "message", message);
}

Scenario 3 - Showing confirm messages in list controls such as Gridview, datalist and repeater

HTML
In the Gridviews TemplateField add the hidden and visible controls as we saw in Scenario 1

<asp:TemplateField>
<ItemTemplate>
<!-- The link which will display the delete confirmation -->
<a id="linkDelete" runat="server" href="#" title="Confirm delete">Delete</a>
<!-- Hidden command button that actually issues the delete -->
<asp:Button runat="server" CommandName="Delete" ID="btnDelete" Style="display: none;" />
</ItemTemplate>
</asp:TemplateField>

Javascript

<script language="javascript" type="text/javascript">
function confirmDeleteResult(v,m,f)
{
if( v) //user clicked OK
$('#' + f.hidID).click(); //the delete button id of each row will be passed to this function from the confirm box
}
</script>

Now in the RowDataBound function of GridView write the following code in the code behind
Codebehind

//making the confirm box for each delete link.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// we are using a html anchor and a hidden asp:button for the delete
HtmlAnchor linkDelete = (HtmlAnchor)e.Row.FindControl("linkDelete");
Button btnDelete = (Button)e.Row.FindControl("btnDelete");

//for each delete link - the corresponding submit buttons id will be passed to delete call back as a hidden field
string prompt = "$.prompt('Are you sure you want to delete the selected item?"
+ "<input type="hidden" value="{0}" name="hidID" />'"
+ ", {{buttons: {{ Ok: true, Cancel: false }}, callback: confirmDeleteResult}} ); return false; ";
linkDelete.Attributes["onclick"] = string.Format(prompt, btnDelete.ClientID);
}
}

Click here to see the DEMO and DOWNLOAD the source

Please comment on bugs or enhancements on this asp.net javascript message box implementation.

Bassistance.de has a great JQuery tree plugin and I thought to make it database driven using Asp.Net and C#. JQuery tree is a highly customizable tree with lot of options available. See the full list of options available with JQuery tree here (see the functions options given in the bottom table)

Click here to see the DEMO and DOWNLOAD the source

Database Schema
For Asp.Net JQuery Tree you can use the same Asp.Net tree DB schema which I explained in my previous post.
Its an N-Level tree and can be stored in a self referencing table (a table with foreign key to the same table). The table will have a PK field ID and an FK field ParentID which will refer to the ID field of same table itself.

Asp.Net Dropdownlist tree DB Schema

Implementation
First select the whole data into a DataTable using the following SELECT query (same as in the case of dropdownlist tree – please read this post for more info)

SELECT TreeNodeID
, ISNULL(ParentNodeID, 0) ParentNodeID
, Title
FROM [dbo].[TreeNode] ORDER BY ParentNodeID, TreeNodeID

Now we will recursively create a string with the tree nodes and display in a literal control.

System.Text.StringBuilder tree = new System.Text.StringBuilder();
string previousParentID = "";
int level = -1;

private void RecursiveFillTree(DataTable dtParent, string parentID)
{
level++; //on the each call level increment 1
DataView dv = new DataView(dtParent);
dv.RowFilter = string.Format("ParentNodeID = {0}", parentID);
if (dv.Count > 0)
{
//loop through each leaf
for (int i = 0; i < dv.Count; i++)
{
//NEW NODE - make a new Unordered list element
if (previousParentID != dv[i]["ParentNodeID"].ToString())
{
if (level == 0) //START THE TREE
tree.Append("n<ul id='ulTree'>");
else
tree.Append("n<ul>");
}
//show the leaf in an li
tree.Append("n<li><a href='?").Append(dv[i]["TreeNodeID"]).Append("'>").Append(dv[i]["Title"]).Append("</a>");
//recusrively show child leafs of the current leaf
RecursiveFillTree(dtParent, dv[i]["TreeNodeID"].ToString());
previousParentID = dv[i]["ParentNodeID"].ToString();
tree.Append("n</li>");
}
tree.Append("n</ul>");
}
}

The above string will be set to a literal defined in the ASPX page.

<asp:Literal ID="litTree" runat="server"></asp:Literal>

You should refer the javascript files jquery-latest.js, jquery.treeview.js and jquery.cookie.js.
Also include the following JavaScript in the head portion of your ASPX

<script type="text/javascript">
$(function() {
$("#ulTree").treeview({
collapsed: false,
animated: "medium",
persist: "location"
});
})
</script>

ulTree is the ID of ul we have created in C#. I have used three properties available with JQuery tree and you can read the details about all the options available here.

Click here to see the DEMO and DOWNLOAD the source

Asynchronous Asp.Net JQuery tree

Asynchronous implementation will be very useful when you have very very big tree and if the loading of all the nodes in HTML affect the page load time.

In that case we can show only the root nodes and when some one click the expand button we can send a request to server and load the child nodes for that root node and so on.

The implementation of Asynchronous Asp.Net JQuery tree is very similar to the normal Asp.Net JQuery tree but in this case we will generate a JSON array object having all the node info and write it to the Response.

In the code behind we can get the Asynchronous call by checking the parameter root . If the parameter value is source the Asynchronous request will be for root nodes. And for all the child nodes we will get the ID in root parameter.

public void AsyncTree()
{
string root = Request.Params["root"];
int parentID = 0;
Tree objTree = new Tree();
//select all the nodes - you can make it more efficient by
//storing the datatable Cache to avoid frequent requests to DB
DataTable dtNodes  = objTree.Select(0);
if (root == "source") //for the first time the JQuery tree will send the root param value as "source"
{
GenerateTree(dtNodes, 0);
}
else if (int.TryParse(root, out parentID)) //subsequent requests will send the ID
{
if (parentID > 0)
{
GenerateTree(dtNodes, parentID);
}
}
}

private void GenerateTree(DataTable dtParent, int parentID)
{
System.Text.StringBuilder tree = new System.Text.StringBuilder();
DataView dv = new DataView(dtParent);
dv.RowFilter = string.Format("ParentNodeID = {0}", parentID);
tree.Append("[");
//loop through each leaf
for (int i = 0; i < dv.Count; i++)
{
tree.Append("{");
tree.Append(""text": "").Append(dv[i]["Title"]).Append("",");
tree.Append(""id": "").Append(dv[i]["TreeNodeID"]).Append("",");

//check whether this node has child nodes
DataView dvChild = new DataView(dtParent);
dvChild.RowFilter = string.Format("ParentNodeID = {0}", dv[i]["TreeNodeID"]);
if (dvChild.Count > 0) //if so mark it in the return node array
tree.Append(""hasChildren": true");
tree.Append("},");
}
//remove the ending comma from the result
if (tree.Length > 1)
{
tree = tree.Remove(tree.Length - 1, 1);
}
tree.Append("]");
//put the result in Response and end the Response
Response.Write(tree.ToString());
Response.End();
}

If a node has child nodes we will set the hasChildren parameter true.
Click here for Asynchronous Asp.Net JQuery tree DEMO and DOWNLOAD the source.

Ever needed to display data in tree format inside an asp.net DropDownList or ListBox?.

A simple search for “tree dropdown list” returned lot of requests for asp.net dropdown tree. See here, here & here to see questions about dropdown list tree control in Asp.Net.

So I thought to blog about how to implement an asp.net tree dropdown list using c#.

One way to create dropdown list tree is show/hide JavaScript tree inside a div and simulate a dropdown display. But here am going to explain a very simple implementation using recursion. There is no JavaScript involved.

Click here to see the DEMO and DOWNLOAD the source

Features

1. Show data in tree format inside a dropdown list or listbox.
2. N-levels of tree nodes are possible.
3. No JavaScript.
4. All the usual dropdown list and listbox properties such as AutoPostaBack and multi selection is available
5. Admin side to add/update/delete nodes to the tree

Database Schema
An N-Level tree can be stored in a self referencing table (a table with foreign key to the same table). The table will have a PK field ID and an FK field ParentID which will refer to the ID field of same table itself.

Asp.Net Dropdownlist tree DB Schema

For the root nodes ParentID will be NULL. Take a look at the sample data given below

Asp.net DropdownList Tree DB Sample Data

Implementation
First select the whole data into a DataTable using the following SELECT query

SELECT TreeNodeID
, ISNULL(ParentNodeID, 0) ParentNodeID
, Title
FROM [dbo].[TreeNode] ORDER BY ParentNodeID, TreeNodeID

In the above query we are converting ParentID to zero for all the root nodes (having value NULL). This is important and you will understand why we are doing that when I explain the C# code.

Now in the C# code we will recursively insert Nodes to an Asp.Net drop down list from the datatable. On each iteration we will append proper indention and pointer at the front of the Title before inserting to drop down.

int level = -1;
private void RecursiveFillTree(DataTable dtParent, int parentID)
{
level++; //on the each call level increment 1
StringBuilder appender = new StringBuilder();
for (int j = 0; j < level; j++)
appender.Append("&amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;nbsp;");
if (level > 0)
appender.Append("|__");

DataView dv = new DataView(dtParent);
dv.RowFilter = string.Format("ParentNodeID = {0}", parentID);
int i;
if (dv.Count > 0)
{
for (i = 0; i < dv.Count; i++)
{
ddlParentNode.Items.Add(new ListItem(Server.HtmlDecode( appender.ToString() + dv[i]["Title"].ToString()), dv[i]["TreeNodeID"].ToString()));
RecursiveFillTree(dtParent, int.Parse( dv[i]["TreeNodeID"].ToString()));
}
}
level--; //on the each function end level will decrement by 1
}

On each iteration we will filter the ParentID with the ID to find the child nodes of that node. On the first iteration we will use Zero as the ParentID. The variable level will keep the level of recursion and give proper indention.

I have also created a form to INSERT/UPDATE nodes into the drop down tree. Please click here to see it. If you delete a node from dropdown tree all the child nodes will automatically move to the immediate parent. That logic is written in the Stored procedure and you can change it to the way you want.

Click here to see the DEMO and DOWNLOAD the source

In this blog post am going to explain how to develop an Asp.Net AJAX poll system using JQuery, which allows users to express there opinion and see the results. The system will have a back-end (admin part) to add and manage polls.

Click here to see the DEMO and DOWNLOAD the source

Asp.Net AJAX Poll Admin

1. Create a new Poll with unlimited number of Choices
2. Configure how to block repeated voting. (By IP address or Cookie)
3. Activate/Deactivate Polls
4. Edit/Delete existing poll

Asp.Net AJAX Poll User side

1. Display an active poll randomly or by using the Poll ID (This is just for demo purpose you can change the logic as you wanted)
2. Allow the user to vote and display the result without refreshing the whole page

Technologies used

1. Asp.Net in the server side
2. JQuery for client side processing and communication with server using AJAX
3. SQL Server 2005 to store the data. We use Stored Procedures to interact with tables.
4. Microsoft data application blocks for the data access layer.

Using JQuery to call Asp.Net functions from client side
Its really easy to call server side functions from client side using JQuery. Its efficient than using Asp.Net AJAX Updatepanels. For more details about using JQuery with Asp.Net page methods refer following great blog posts
http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/
http://encosia.com/2008/06/05/3-mistakes-to-avoid-when-using-jquery-with-aspnet-ajax/

Working with Microsoft data application blocks data access layer
Microsoft data application block is part of Microsoft Enterprise library. It’s a free, ready to use and data access layer.

Please read following blog post to see how Microsoft data application block can easily reduce the database interaction code.
http://anzme.blogspot.com/2009/02/microsoft-enterprise-data-application.html

Database Schema
The database schema consists of three tables:

1. Poll: This table stores the question and configuration for a poll
2. PollChoices: This table stores the choices of each poll and the vote count for each choice.
3. PollIPs: This table stores the IP address of all the voted users for each poll. This table will be used to block repeated vote per IP address.

Take a look at the schema shown below

DB Schema of Asp.Net Ajax Poll using JQuery

Now I will explain the source code of each page

1. AddPoll_CS.aspx
We use this page to insert a new Poll and edit an existing Poll.

Add Asp.Net AJAX Poll

In the HTML source we have one textbox (txtQuestion - required field) to enter the Poll Question, 3 radio buttons (rdoCookie, rdoIP & rdoNone) to specify how to block repeated voting, a check box (chkActive) to specify whether this poll is currently active or not (only active polls will be showed in the user side).
To enter the Poll choices we are using a HTML input texts (txtChoice). In the INSERT mode we will show two inputs by default and the user can add as many choices as he wants.
The hidden fields hidPollID, hidPollChoiceID will be used to UPDATE the Poll and Choices while in edit mode.

In the Javascript the function addFormField() will be used to add new Choices in the form.
The function showRowIndexs(); show the Choice number (Choice1, Choice 2 etc) while adding new choices.
The function removeFormField(id) will be used to remove the corresponding Choice from form and from the DB if in edit mode.

The C# source is easy and straightforward please read the inline comments in the C# source code to know how it work and let me know if you have any queries.

2. ListPoll_CS.aspx
List all the existing polls to edit or delete.
A simple Gridview is used to display the data. The code is straightforward and easy to understand

3. Poll_CS.aspx
This page will display a random active poll if the user visit this page directly (use this logic when you use the poll in user side ) or show a specific poll if the pollID is passed through the QueryString.

Asp.Net AJAX Poll

In the HTML source the literal litQuestion will show the Poll Question and the repeater rptChoices will show all the choices.
On clicking the HTML input button btnSubmit we will call an Asp.Net page method using JQuery. That page method will update the Poll DB and return the Poll results.

The Javascript function animateResults() will be used to animate the Poll result.

In the above javascript we will first check whether the user is already polled or not in the ready function and if the user is already polled we will just call the animateResults() and show the results.

Click here to see the DEMO and DOWNLOAD the source

I am using VS 2008 but the source is compatiable with .Net 2.0 also. To make it work in .Net 2.0 just remove the web.config in the zip and add a new one from VS 2005. Make sure to add the Connection string in web.config

I have only recently started working with JQuery and in no way am an expert of any technology, so I am sure the above scripts can be written in more effective and efficient manner. Please post your comments on any improvements.

Its been long time since I am planning to start a blog on Asp.Net, AJAX, DHTML etc. The domain is registered almost 6 months ago and I finished the samples for my first tutorail 2 months ago [;)] The main reason it got delayed is because of my poor writing skills. Please adjust with me on my bad English.

As the name suggests, in this blog am mainly gonna concenrate on the client side aspects of Asp.Net like AJAX, Flex, Flash, Silverlight, CSS, HTML etc.

I have another development blog in blogspot but I got inspired from numerous wordpress + php + design blogs like Webresources Depot, Smashing Magazine, NETTUTS (all are big names [;)] ).

I am not an expert of any technology so please post if you see any bugs, improvements etc in my posts. I will try to write at least two article every month with demo and source. ClientSideAsp.Net demos will be hosted in Deynu.com.

Thanks Eddie for the excellent wordpress theme and Alex Gorbatchev for the great syntax highlighter

Happy coding…