jump to navigation

JQuery and ASP.Net – How to access all textboxes using JQuery August 24, 2010

Posted by fofo in asp.net, Visual Studio 2008, Visual Studio 2010.
Tags:
trackback

I am going to start a series of posts on ASP.Net and JQuery that will explain a lot of common tasks that can be accomplished using this fantastic open source Javascript library.

Initially I found out about JQuery when I did browse Scott’s Gu blog post. Have a look here as well if you want to see the official announcement from the JQuery people.

It is widely known that JQuery ships now with Visual Studio. You can find it as a seperate download here.

Sadly, we canot cover the basics of JQuery in this post so here are a few resources for you to focus on

The main site is this
http://blog.jquery.com/
http://docs.jquery.com/Main_Page
A fantastic video series for the absolute beginner.

In this first post I will show you how to access all textboxes using JQuery.

We will demonstrate this with a step by step example. I will use Visual Studio 2010. You can also use Visual Studio 2008 if you do not have Visual Studio 2010. Express editions work fine.

1) Create an ASP.Net website. Choose an appropriate name for your site.

2) Now we have the default web site ready. We will add some textboxes in the default.aspx page

so the code-markup looks like this

<asp:TextBox ID=”Txt1″ runat=”server” Text=”MyFirstTextBox”></asp:TextBox><br />
<asp:TextBox ID=”Txt2″ runat=”server” Text=”MySesondTextBox”></asp:TextBox><br />
<asp:TextBox ID=”Txt3″ runat=”server” Text=”MyThirdTextBox”></asp:TextBox><br />
<asp:TextBox ID=”Txt4″ runat=”server” Text=”MyFourthTextBox”></asp:TextBox><br />
<asp:Button ID=”btn1″ runat=”server” Text=”Display” />
<p id=”showselected”></p>

3) In the Site.master file before the </head> tag add this line of code

<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>

4)In the Site.master file before the </head> tag add this line of code
5) In the <head> section of the Site.master page we need to add the actual  JQuery code that makes the selection of the textboxes text possible

<script>
$(function () {
$(‘input[id$=btn1]’).click(function (e) {
e.preventDefault();
$(“#showselected”).text(”)
.append($(“input:text”).map(function () {
return $(this).val() || null;
}).get().join(“<br/>  “));
});

});
</script>

When the button is clicked, the postback is prevented using e.preventDefault().We then use a
Selector to match all input elements of type text (input:text) I am using the map function to iterate though the textbox controls.

We do apply a filter , which is that we do not want to have textboxes with empty values appended in the paragraph with id “showselected”. Run your application and check that everything works ok.

6) If you want to display only some textboxes you can use a class property.

So you can add in the markup

<asp:TextBox ID=”Txt5″ runat=”server” Text=”MyFifthTextBox” CssClass=”sel”></asp:TextBox><br />
<asp:TextBox ID=”Txt6″ runat=”server” Text=”MySixthTextBox” CssClass=”sel”></asp:TextBox><br />

Now we need to modify our JQuery code.Add this code just below the code we entered in the <head> section of the Site.master page.

$(‘input[id$=btn2]’).click(function (e) {
e.preventDefault();
$(“#showselected”).text(”)
.append($(“input.sel”).map(function () {
return $(this).val() || null;
}).get().join(“<br/>  “));
});
Run your application and check that everything works ok. Only the content of the last two textboxes will be shown.

I have tested this JQuery example with all the modern browsers.Please note that you do need to have a basic understanding of JQuery to fully understand this and the following JQuery & Asp.net tutorials.

Hope it helps.

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: