Thursday, June 21, 2012

Asp.Net jQuery Hello World Sample


jQuery is a simple JavaScript framework; jQuery can be used in any webpage by adding a reference to the jQuery library file. 

To know more about jQuery refer the post jQuery Getting Started.

Once you get the latest jQuery file, add a reference to the file in the .aspx page.

<script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>

Once this is done we can use the jQuery statements in out Asp.Net page.

Let us see a simple Hello World example of using jQuery in an Asp.Net page.
Create a new Asp.Net web application, and add the following code to the page. Make sure that you download the appropriate jQuery file and add a reference to the file; in this sample we will use the jQuery file jquery-1.7.2.js

The latest jQuery file can be downloaded from the jQuery site.http://docs.jquery.com/Downloading_jQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery Hello World</title>
    <script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
            $("#cmdHelloWorld").click(function()
            {
                alert("Hello World !!!");
            });
        });
    </script>
</head>
<body>
    <form id="frmHelloWorld" runat="server">
        <div>
            <asp:Button
                ID="cmdHelloWorld"
                runat="server"
                Text="Say Hello" />
        </div>
    </form>
</body>
</html>

The below function, gets triggered when the button cmdHelloWorld is clicked, and a Message box is displayed to the user.

$("#cmdHelloWorld").click(function()
{
   alert("Hello World !!!");
});

That’s it, so simple; we have seen a basic Hello World example using jQuery and Asp.Net

Search Flipkart Products:
Flipkart.com

2 comments:

Anonymous said...

I did this EXACTLY as you wrote it here. EXACTLY. It doesn't work.

Letter for letter and it doesn't work. AND, I haven't yet found one example given by ANYONE that actually works. So, where "REALLY" do you find working examples????

Prakash B said...

Did you add the reference to the jQuery file "jquery-1.7.2.js". If so let me know the error which you get.