Using jQuery To Survive In ASP.NET Webforms World

Using jQuery To Survive In ASP.NET Webforms World

Mohamed Meligy

http://GuruStop.NET

Who am I?

• 2005: Blogging, http://geekswithblogs.net/Mohamed, http://weblogs.asp.net/meligy, http://GuruStop.NET

• 2006: SilverKey Demo Day 1• 2007: SilverKey Demo Day 2• 2007: Several dotNETwork Gatherings• 2008: ITWorx Cutting Edge Club• 2008: Several dotNETwork Gatherings• 2009: doeNETwork Code Camp`09• Worked in SilverKey, Raya Experts Team• Currently Working in Abu Dhabi• 2010: doeNETwork Code Camp`10

Topics

• Quick Introduction to jQuery• Demo• VS 2008 Intellisense• VS 2010 Integration• Demo• Working with ASP.NET Controls• Demo• Working with ASP.NET AJAX• Demo• Working with ASP.NET AJAX Library Beta• Demo

What Is jQuery?

$("#myID").css("opacity",0.20);

$(".myClass1,.myclass2").hide();

$("table>tbody>tr:even")

.addClass("gridAlternate")

.css( {font-weight:"bold",padding:"3px"} );

$("#gdEntries tr").click(function(e){

alert( $(e.target).text() );

});

$("<div>").attr("id","divNew")

.appendTo(document.body);

Introducing jQuery

http://docs.jQuery.com/Selectors

jQuery Wrapped Object

• $().html().text().val().attr().append().empty()• $().css().addClass().removeClass().hasClass()

.offset().height().width()

.scrollTop().scrollLeft().show().hide()• $().find().is().has().not().filter()

.parent().closest().next()• $().live().bind().click().dblclick().hover().toggle()

.blur().keydown().keyup()

.resize().mouseover().mousedown()

Visual Studio Intellisense

Visual Studio 2008

• Requires– Manual jQuery files– VS 2008 Service Pack 1– Special hot-fix file

Visual Studio 2010

• Default solution structure• jQuery 1.3.2

– You still need to replace for jQuery 1.4

Download MIN and VSDOC

Reference MIN

Reference & Hide VSDOC

jQuery Functionality

• Fucntions• $.ajax• $.post,• $.getJson

• UI Library• Tabs• Modal Dialogs• Date Picker• Slider• So much more…

• Plug-in Framework• All kinds of modal pop-ups• Validations• Image Slideshows• So much more …

• U Library Effects• Fade in-out• Blink• So much more…

DEMO

Hosted Locally or on CDN

• Google and Microsoft host it for you on their Content Delivery Networks.

• Benefits– Cache– Bandwidth– Paralelism

• Can fallback to local source if not available.

Where to go…• http://jquery.org

– http://jquery.com

• http://asp.net/ajaxlibrary– http://asp.net/ajaxlibrary/CDN.ashx

• http://weblogs.asp.net/aspnet-team– http://blogs.msdn.com/webdevtools– http://tinyurl.com/vsdoc

• Invest– http://tekpub.com– http://tinyurl.com/51-jquery-aspnet

• Individual Blogs– http://encosia.com– http://mattberseth.com– http://GuruStop.NET

– Eng.meligy@gmail.com