Introduction
jQuery has now become very popular in web develoment. In my last post Getting started
with jQuery in ASP.NET, we started to explore jQuery methods with ASP.NET common controls. Now we are going one step further in jQuery with the use for our ASP.NET website.
Background
We have already explored the most common tasks we encounter with ASP.NET controls in jQuery. Now we will discuss:
- Creating a "Back to Top" link
- Highlight
GridView
's row or cell on mouseover - Remove
GridView
's row on mouseclick - Remove
GridView
's column on mouseclick - Character limit validation in multiline textbox
Note that we are only discussing code segments here for jQuery, with the assumption that the corresponding ASP.NET controls are already placed on the webpage. You will
get cleared while we proceed further. The code segments we discuss would be placed inside the script segment required for jQuery (now it seems to
have become a convention for most developers), like:
<script type="text/javascript"?
$(document).ready(function () {
// our jQuery code will goes here...
});
</script>
Creating a "Back to Top" link
In lots of websites, we see a hyperlink "Back to Top". Let's use it in our webpage with the help of jQuery.
$(".backtotoplink").attr("innerHTML", "Back to Top");
$(".backtotoplink").attr("title", "Back to Top");
$(".backtotoplink").attr("href", "#Top");
Assumption: You have large blocks of HTML content placed on the webpage, and at the end of each block, we place a hyperlink with
the CSS class backtotoplink
,
which we have defined as:
.backtotoplink
{
color: Blue;
cursor: hand;
}
$(".backtotoplink").attr("innerHTML", "Back to Top");
selects our hyperlink which has
the CSS class backtotoplink
, and places
"Back to Top" text as its content by setting its innerHTML
attribute.$(".backtotoplink").attr("title", "Back to Top");
sets
the "Back to Top" text in the title
attribute. $(".backtotoplink").attr("href", "#Top");
sets
the #Top
anchor target for our hyperlink showing Back to Top text.
Highlight GridView's row or cell on mouseover
GridView
is a control developers use frequently because of its different capabilities.
GridView
is rendered in HTML as a tree structure of table
, tr
, and td
tags.
We play with these HTML tags to build a GridView
that is attractive
and responds to mouse events.
$("# ?%=GridView1.ClientID% ? td").hover(
function () {
$(this).addClass("highlight");
},
function () {
$(this).removeClass("highlight");
});
Assumption: You have placed a GridView
control on the form with ID = GridView1
. And have a
CSS class defined some where:
.highlight
{
background-color: #34FF6D;
}
$("# ?%=GridView1.ClientID% ? tr").hover()
attaches a mouse hover
event for
the GridView
control, note that jQuery's hover
method contains two function arguments, for mouseover
and mouseleave
. After GridView1.ClientID
, we place tr
to select only rows
(you can replace this with td
to obtain the same functionality with individual cells rather than rows). $(this).addClass("highlight");
: In the mouseover
event function, we add class highlight
to current row (or cell if you
are using td
in jQuery selector). $(this).removeClass("highlight");
: In the mouseleave
event function, we remove class highlight
from
the current row (or cell if you specified that).
Remove GridView's row on mouseclick
Now capture the click event for the row (tr
) and remove all its cells (td
) and itself.
$(("#?%=GridView1.ClientID %? tr(").click(function () {
$(this).find(("td(").each(function () {
$(this).remove();
});
$(this).remove();
});
Assumption: You have placed a GridView
control on the form with ID = GridView1
.
- Attach click event for each row.
- Inside the click event, loop for each cell (
ts
) and remove it. - Remove the row (
tr
) itself.
Remove GridView's column on mouseclick
Now capture the click event for the column (th
) and remove all its cells (td
) and itself. We handle
the event only for th
,
so it only works when you click on column headers.
$("#?%=GridView1.ClientID %? th").click(function () {
var count = $(this).closest("th").prevAll("th").length;
$(this).parents("#?%=GridView1.ClientID %?").find("tr").each(function () {
$(this).find("td:eq(" + count + ")").remove();
$(this).find("th:eq(" + count + ")").remove();
});
});
Assumption: You have placed a GridView
control on the form with ID = GridView1
.
- Attach the click event for column headers (
th
). .closest()
begins with the current element and searches up in
the DOM tree till it finds a matching element. .prevAll()
finds all the predecessors for the current element in
the DOM tree. Place all found elements' length in the variable count
.- Loop through each row (
tr
) in the GridView
. - Remove the
td
that was found with the matching count
. - Also remove the header cell (
th
) that was found with the matching count
.
Character limit validation in multiline textbox
When you use multiline textboxes in ASP.NET, sometimes we need to restrict
the number of characters entered. In this example we restrict our textbox to accept characters in limit of 5-100.
var minCount = 5;
var maxCount = 100;
$("#?%=txtComments.ClientID%?").bind("cut copy paste", function (e) {
e.preventDefault();
});
$("#?%=txtComments.ClientID%?").keypress(function (e) {
var strCount = $("#?%=txtComments.ClientID%?").val().length;
$("#?%=txtNumber.ClientID%?").val(strCount);
if ((strCount ? minCount) || (strCount ? maxCount)) {
$("#message").text("Please enter characters in the range 5 - 100");
if (strCount ? maxCount) {
e.preventDefault();
}
}
else {
$("#message").text("");
}
});
Assumption: You have placed a comments textbox control with ID = txtComments
, and another textbox with ID = txtNumber
to display
the number of characters entered.
- Bind the event hander for cut/copy/paste operations for textbox, and disable these operations so that we could capture keypress events in order to update the character count.
- Set
txtComments
value's length in the variable strCount
. - Set this count in the
txtNumber
text to display. - Check if
strCount
is less than minCount
or strCount
is greater than maxCount
, then display message for
the user to enter characters
in the correct range. e.preventDefault()
, finally disable the default behaviour for
the keypress event, to further accept any input character.
References
ASP.NET jQuery Cookbook by Sonal Aneel Allana
Points of interest
We did some interesting things with the GridView
control at runtime by capturing mouse events. Then we restrict our comments textbox to accept a predefined number of characters,
and notify the user to input in a valid range. Definitely we can all do these with traditional JavaScript techniques, but you see how easier it
has become with the help of jQuery.