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.
Merkur 37C Safety Razor Review – Merkur 37C
ReplyDeleteThe Merkur 37c is an deccasino excellent short handled DE safety 출장안마 razor. worrione.com It is more suitable for ventureberg.com/ both heavy and non-slip hands and is herzamanindir.com/ therefore a great option for experienced