Simple Introduction to using Jquery in ASP.NET
This tutorial assumes you understand the basics of JavaScript as well as understanding the basics of Microsoft Visual Studio Web Developer 2010. This tutorial will go over how to use some basic Jquery to show some content on a page.
Step 1 – Add the button to the page
1) Drag a button control onto the page from the toolbox
2) For the purpose of this tutorial we are giving the button an id of showButton
<asp:Button ID="showButton" runat="server" Text="Show Message" />
Step 2 – Add the Message Div
1) Add a new div on the page with an id of message
2) Add a display:none style to it
3) Inside add any kind of semantic tag you would like
a. We chose to add an <h1> tag
4) Insert whatever text you will want to display when the button is clicked
<div id="message" style="display: none">
<h1>
This is the Jquery fade in. This is a simple introduction to using Jquery in your applications!
</h1>
</div>
Step 3 – Add the script call to the default.aspx
1) Add the Jquery library to your document
a. For the purposes of this tutorial we will be using the Microsoft library
Step 4 – Add custom JavaScript to enable to action of the message
1) First we will check to enable to dom and make sure everything is functioning
$(domReady);
2) We will now run a function based off the domReady call that will show the message when the user clicks on the button
function domReady() {
$('#showButton').click(showMessage);
}
3) Lastly, We will create the showMessage function which will provide how the message appears when being displayed to the user.
a. For the purposes of this tutorial we are going to slowly fade in the content so everyone will be able to see how this functions.
function showMessage() {
$('#message').fadeIn('slow');
}
4) This should go without saying, but make sure you are including all of this inside of a script tag with the declaration for JavaScript. If this does not make sense to you, than you can reference the source files which have been included
a. It is always good practice to build your site JavaScript in an external file, but for the purposes of this tutorial we have built it inline so it is easier to understand how the application is working
Congratulations, you have built your first application using the JavaScript library of Jquery. Hopefully this tutorial has given you a peek into what is possible with this library and the endless possibilities within ASP.NET applications you can use it for.
If you're looking for a really good web host, try
Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
