Sunday, July 24, 2011

JQuery: Write Less, Do More (Part 2)

In our first part we saw some basics of jQuery. In this part we will try to be familiar with some frequently used jQuery event function and also show some example how to talk to server using jQuery, which is also known as core of jQuery.



Event Functions of jQuery

In the previous part we saw a basic example, let’s see it again to understand the click event
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Learn Jquery</title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type ="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                $("p").hide();
            });
        });
    </script>
</head>
<body>
   <p>This is a paragraph.</p>
   <p>This is another line</p>
   <p>All line will be hide if you click button</p>
   <button>Click Me</button>
</body>
</html>
Look at the shaded region. We just bind the click event for the button. When we click the button it fires button click event and execute a function which find all the <p> element of the document and hide them. This is the shortcut form to bind any event to an element. The actual form looks like
$("button").bind("click",function () {
     $("p").hide();
 });
So that the generic bind() function is used to bind any functions to an event by name. Interesting matter is that you can also bind your custom event in jQuery using jQuery triggerHandler() function. Let’s see some frequently used event function. Learn more about jQuery event function please visit http://api.jquery.com/category/events/.

Talk with Server using jQuery

Let’s see how to talk with server using jQuery. Usually ASP.Net MVC uses much jQuery to talk with server. So I take a simple MVC project. The index page contains a button. When I click the button it fires click event get some data from server then show it. My test page portion looks like:

Now see the jQuery code to call the server function:
@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<input id ="btnHitServer" type ="button" value = "Hit Server" />
<script type ="text/javascript">
    $(document).ready(function(){
        $("#btnHitServer").click(function () {

        var url = "/Home/ReturnSomething";       
        $.get(url, function (result) {
            alert(result);
        });
    });
   
    });
</script>

Please do not confuse about the whole code just try to understand the jQuery portion.  It’s pretty simple it just bind a click event to the button ‘btnHitServer’. Now look the line
 var url = "/Home/ReturnSomething";
It just says the url where to go to get data. It simply says just go to HomeController then find the method ‘ReturnSomething’.
 $.get(url, function (result) {
            alert(result);
        });
Call the jQuery get function with the url. If the call is success then execute a function which shows the alert with the data. Now let’s see the ‘ReturnSomething’ method
public JsonResult ReturnSomething()
{
    String returnFromServer = "I am comming from server";
    return  Json(returnFromServer, JsonRequestBehavior.AllowGet);
}
Pretty simple huh. (:)). It just returns a string “I am coming from server”. When I click the button an alert popup like:

That’s the end of the two part tutorial. For first part please see the link Part 1. It is a simple introductory tutorial. I think it will help beginner to play with jQuery. So take a break and start to play with jQuery.

No comments:

Post a Comment