![]() Presenting AJAX Client Templates from ASP.NET v4 Preview. January 15, 2009 by Scott Cate. Tonight (Jan 13. I work for Microsoft in the Azure cloud family. 2011-04-12 Jeffrey Wow! ASP.NET AJAX Client Templates! To 小口,微軟在Web Client端的開發重心已逐漸將轉移到jQuery,去年發表了一個基於. ![]() In this series: 1. Note: Check out the working portal at In my I have explained how to design and re-use a widget-client-template. Also I have shown you, how to load the widget-body through declarative way of using jQuery and Microsoft Ajax. The advantage of using jQuery load method (GET) and asp.net MVC call over updatepanel/web forms is that, jQuery load method by-default uses GET method and asp.net MVC does not have viewstate, page load lifecycle and server control reconstruction overheads. Moreover we are returning only the required html to render the widget body through a partial view unlike asp.net page. In asp.net, when you use updatepanel, even though it makes an async call to web server, entire page is posted back and all the response is sent to client and finally only the portion inside the updatepanel is re-rendered. So our approach through jQuery load and asp.net MVC would definitely be faster and cleaner. In this post we will examine how to provide drag and drop functionality to widgets. Drag and drop gives web pages dynamic behavior. Drag and drop is basically achieved through mousedown, mousemove and mouseup JavaScript events. There are several articles and libraries available out there on the web. You can read about drag and drop using plain-old javascript by Mark Kahn. Or just for Javascript Drag and Drop. Here is a list of some fo the javascript libraries:,,,,,,,,,,,, jQuery’s sortable found in UI library makes our life easier. Through this UI plug-in we can attach drag and drop to selected HTML element just by calling. 5 items: '.widget:not(.ad-holder)' One interesting thing to note here is:not(.ad-holder). This specifies that we want to enable dragging for all widgets but not for ad-holder div. Who calls it a web portal without an ad ? but the idea here is to demonstrate how to make some of the widgets non-dragable. As you could guess “handle” specifies the handle for widget. I.e., the area where user can click and start dragging on a widget. Helper specifies the element to be used while dragging. ![]() Helper accepts two values, original and clone (by default it is original). We will go with original so that we can use this element in “start” event. Finally placeholder specifies a class name which defines how to display the place-holder area when user is moving the widget. Time to talk about sortable events: event “start” is raised as soon as user click’s on the handle element and starts dragging. We will use this event to capture original element and re-set its width and also to set the height of placeholder element. As soon as user starts moving widget, sortable changes the position of the widget’s div element on screen thus by changing its width to fill out entire screen. Start event code. Microsoft has embraced jQuery in a big way, even to the point of creating its own extensions to the core library as part of the standard jQuery contribution process. Some of Microsoft's top web and JavaScript developers are working with members of the core jQuery team to create extensions that replace parts of their Microsoft Ajax Library. These extensions do things like make data more readily usable from client-side web pages and make it easier to implement globalization on a site. One group is even attempting to create a UI grid that will be full-featured enough to handle almost any kind of scenario. These are exciting times in Microsoft's corner of jQuery! Client-side templates were one of the major features that Microsoft added to its Ajax Library before it ceased all development on it and switched to jQuery.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
April 2018
Categories |