Page 1

JQuery October 30th, 2009

JQuery is a lightweight javascript library, which the developers claim was “designed to change the way that you write JavaScript”. It is used to simplify the interaction between javascript and html, but also simplifies the processes of event handling, animating, and Ajax interactions. Put simply, it can make javascript alot simpler! JQuery now has hundreds of plugins available to developers for free, and can solve popular problems without each developer ‘reinventing the wheel’. This is usefull as developers can use this functionality even with none or a very basic knowledge of the javascript language. Perfect! Iv included an example of how to use a popular jquery plugin within a asp.NET web form. As iv designed this page to inherit from a master page, the page does not need any html markup or css design, as this is all contained in the master, and can be used throughout my entire site for a consistent look. Now my page only needs ‘asp:Content ‘ tags. First of all i need to register the jquery javascript files in the head: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> //register the jquery library <script type="text/javascript" src="Javascript/jquery-1.3.2.js"></script> //register my plugin <script type="text/javascript" src="Javascript/jquery.prettyPhoto.js" ></script> //register the style sheet that came with the plugin <link type="text/css" href="Css/prettyPhoto.css" rel="stylesheet" /> </asp:Content>

We can now tell the scripts to run when the page is loaded: 10 <script type="text/javascript"> 11 $(document).ready(function() { 12 $("a[rel^='prettyPhoto']").prettyPhoto(); 13 });

Now once wev registered jquery and its plugin, and told it we want it to run when the page is loaded, it is simple to use. This jquery plugin (called “prettyPhoto”) is used to ‘overlay images on the current page’, or put more simply show a javascipt popup box, containing images, without reloading the page. As this plugin is used mainly for images, i will simply create a standard html link attribute to an image in my web forms body:

1 2 3 4 5 6 7

<a href="images/fullscreen/2.jpg" title="This is the description" rel="prettyPhoto" > <img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="This is the title" /></a>

I also gave the tag a title, a width and height for the popup box, an alt text attribute, a small sized thumbnail image for the link, and where the plugin comes in, a ‘rel’ attribute, which specifies the relationship between the current document and the linked javascript file. Easy as that. The Jquery library can be used to write simplified javascript code, allowing delelopers to write their own code or create/modify plugins, making JQuery very flexible.

Delegates October 29th, 2009

A delegate is a way of telling C# which method to call when an event is triggered. For example, if you click a Button on a form, the program would call a specific method. It is this pointer which is a delegate. Delegates are good because you can notify several methods that an event has occurred, if you so wish. A delegate declaration specifies a particular method signature. You can then reference one or more methods into the delegate instance. The delegate instance can then be “called” which effectively calls all the methods that have been added. An example of a basic delegate used in this manner: 1 //testdata 2 private string deltest; 3 4 delegate string DelTest(out string deltest);

Here i have declared a delegate, and setup its signature, stating it will return a string, and take a string parameter. Now to use the delegate: 5 public void DelegateTest() 6 { 7 //instantiate delegate 8 DelTest del = null; 9 10 //add methods to the delegate instance 11 del += new DelTest(DelegateTestMethod); 12 13 // from c# version 2.0 and later 14 // the above statement can be shortened to just: 15 del += DelegateTestMethod; 16 17 //call the delegate instance

18 19 20 21 22 23 24 25

del(out deltest); } public string DelegateTestMethod(out string deltest) { deltest = "1"; return deltest; }

Here i have created an instance of my delegate, then added a method to it (DelegateTestMethod1), i could easily add more methods to the delegate, but they would also have to have the same signature as my delegate. Now when i call the delegate instance, all the methods that were added will now be called in the order that they were added. Next up..anonymous delegates and lambda expressions!

Blog Ebook  

Two articles from my .net programming blog -

Read more
Read more
Similar to
Popular now
Just for you