As I started in this blog post, I’m creating jQuery based samples for all of my origional Ajax and Ajax Control Toolkit guidance. (Find it here.)
In this video I demonstrated adding “DropShadow” visual effects to ASP.NET controls using the DropShadow Control Extender from the ASP.NET Ajax Control Toolkit.
As you might expect, and as you are probably getting used to hearing, “there’s a jQuery Plugin for that”.
You can grab the jQuery “Drop Shadow” plugin HERE.
One of the super powerful things about jQuery is that you can easily select (and apply attributes) via a number of criteria like CSS Class, Element Id, type, etc. For an introductory tutorial on jQuer Selectors read here, for the API documentation read here.
We can add a dropshadow to an ASP.NET container by assigning that container a specific CSS class or ClientId. (Please review ASP.NET 4′s ClientId features HERE.)
It will look like this.
and the code looks like this…..
<%@ Page Title='Home Page' Language='C#' MasterPageFile='~/Site.master'
AutoEventWireup='true' CodeFile='Default.aspx.cs'
Inherits='_Default' %>
<asp:Content ID='HeaderContent' runat='server'
ContentPlaceHolderID='HeadContent'>
<script src='Scripts/jquery.dropshadow.js' type='text/javascript'>
</script>
<script type='text/javascript'>
$(document).ready(function () {
$('.rounded').redrawShadow();
$('#Panel3').redrawShadow();
});
</script>
</asp:Content>
<asp:Content ID='BodyContent' runat='server'
ContentPlaceHolderID='MainContent'>
<h2>Welcome to ASP.NET!</h2>
<br />
<asp:Panel ID='Panel1' runat='server' ClientIDMode='Static'
style='background-color:#acc; padding:5px; width: 400px;'>
<p>&nbsp;Some Developer Links</p>
<ol>
<li>
<a href='http://misfitgeek.com' target='_blank'>Developer Link 1</a>
</li>
<li>
<a href='http://misfitgeek.com' target='_blank'>Developer Link 2</a>
</li>
<li>
<a href='http://misfitgeek.com' target='_blank'>Developer Link 3</a>
</li>
</ol>
</asp:Panel>
<br />
<asp:Panel ID='Panel2' runat='server' ClientIDMode='Static'
style='background-color:#acc; padding:5px; width: 400px;'
class='rounded'>
<p> Some Developer Links</p>
<ol>
<li>
<a href='http://misfitgeek.com' target='_blank'>Developer Link 1</a>
</li>
<li>
<a href='http://misfitgeek.com' target='_blank'>Developer Link 2</a>
</li>
<li>
<a href='http://misfitgeek.com' target='_blank'>Developer Link 3</a>
</li>
</ol>
</asp:Panel>
<br />
<asp:Panel ID='Panel3' runat='server' ClientIDMode='Static'
style='background-color:#acc; padding:5px; width: 400px;'>
<p>&nbsp;Some Developer Links</p>
<ol>
<li>
<a href='http://misfitgeek.com' target='_blank'>Developer Link 1</a>
</li>
<li>
<a href='http://misfitgeek.com' target='_blank'>Developer Link 2</a>
</li>
<li>
<a href='http://misfitgeek.com' target='_blank'>Developer Link 3</a>
</li>
</ol>
</asp:Panel>
<br />
</asp:Content>
Note the inclusion of the jQuery.dropshadow.js file in line 4.
And then the 2 calls to redrawShadow()
<script src='Scripts/jquery.dropshadow.js' type='text/javascript'>
</script>
<script type='text/javascript'>
$(document).ready(function () {
$('.rounded').redrawShadow();
$('#Panel3').redrawShadow();
});
</script>
The first call applies a Drop Shadow to any HTML Element who’s class is set to “rounded” and the second applies a Drop Shadow to any element who’s Id is set to “Panel3″.
You can download a working sample HERE.
If you have a specific usage requirement for Drop Shadows, please email me !
Stay tuned.
Remember the AJAX Control Toolkit ?
I created a LOT of content on how to use it.
While the Ajax Control Toolkit (ACT) is still around, new development on it (by Microsoft) has stopped as we have adopted a more jQuery centric strategy for client UI development.
Not only does this make sense, but I’m compleatly hooked on jQuery so I though I would start demonstrating all the UI things that you could do with the ACT by migrating them to jQuery.
Rounded corners gives our UI a smooth look and there are MANY ways to do this with images, CSS, JavaScript and jQuery.
I’ll use a jQuery plugin to round the corners of an ASP.NET Panel Control.
The final product looks like this.
I’ve used the jQuery RoundedCorners PlugIn which you can find HERE
It’s TOO simple.
The default ASP.NET WebForms template includes a reference to the jQuery base by default (though you can use jQuery plugins and this code in ANY ASP.NET application.
At the top of my page that will contain rounded corners I add this markup.
<script src='Scripts/jquery.corners.min.js' type='text/javascript'>
</script>
<script type='text/javascript'></script>
When the page is loaded the corners() method is called to apply the rounded corners to all the elements whose class=”rounded”.
<asp:Panel ID='jQueryBox' runat='server' ClientIDMode='Static'
style='background-color:#acc; padding:5px; width: 400px;'
class='rounded'>
<p>Some Developer Links</p>
<ol>
<li>
<a href='http://misfitgeek.com' target='_blank'>Developer Link 1</a>
</li>
<li>
<a href='http://misfitgeek.com' target='_blank'>Developer Link 2</a>
</li>
<li>
<a href='http://misfitgeek.com' target='_blank'>Developer Link 3</a>
</li>
<li>
<a href='http://misfitgeek.com' target='_blank'>Developer Link 4</a>
</li>
<li>
<a href='http://misfitgeek.com' target='_blank'>Developer Link 5</a>
</li>
</ol>
</asp:Panel>
I told you it was TOO easy.
I’ll be doing jQuery alternatives for ALL my Microsoft Ajax and Ajax control toolkit videos.
In the mean time – you can download sample code for the above Rounded Corners demo [HERE].
Read these.
Software Developer Links of the Week.
(Building a Contact Form App)
In the early days of ASP.NET most developers didn’t write client side code. They just used server side UI controls and any programmatic interface state changes were restricted to post-back processing.
Enter Ajax, RIA, Scriptable Services, Scriptaculous, YUI, jQuery, HTML5, etc.
Now ASP.NET developers, no matter what ASP.NET flavor you are using (YES, including WebForms) need to hold some of the party IN the browser.
To manipulate the Document Object Model (DOM) elements we need to know HOW to address them.
WebForms has a built in feature that pertains to the client identity of HTML elements.
ASP.NET used an algorithm to determine the client side naming of a server side control.
When we didn’t ever need to manipulate the DOM from client side code this was a service because it meant that no matter how our server side controls were nested or contained we would never have naming collision in the browser.
One less this to worry about right?
So if we used an ASP.NET server side textbox control in a container on our form (like a panel) here is what the resulting html textbox declaration would look like.
<input id='ctl00_ContentPlaceHolder1_TextBox1' name='ctl00$ContentPlaceHolder1$TextBox1' type='text' value='Text' />
Beginning with ASP.NET 4 we have the capability to define how we want ASP.NET to handle the relationship between ASP.NET server side controls and the resultant HTML element Ids.
Introducing the ClientId property.
Note that we are talking about the “ID” attribute which we will use to address the element from JavaScript and NOT the “Name” attribute.
“Name” is how the server will see that element when a form is posted to it. “ID” is how the browser sees the HTML element so that is how JavaScript addresses the element.
We now have three ways that we can instruct ASP.NET to handle client ids.
And we can set this as the default at the Machine, Project, or Page level (and override it wherever we want.)
One might use legacy (the default) if they are not writing client side code. As you would expect, it works the same was it always has (described above.)
Here is how you set the default ClientId mode for the page to “Static”.
<!--Page Language='C#' AutoEventWireup='true'
CodeFile='Default.aspx.cs' Inherits='_Default'
ClientIdMode='Static'-->
I nearly always use static. I specify the ID of the HTML element and that is the one ASP.NET uses – period.
Of course, this means that I need to do my own ame management and make sure that the same name is never used for two controls that will appear in the DOM at any one time.
No problem.
There is one time though when “Predictable” mode is a big help.
Suppose you are using a data bound list that contains controls but since it’s data bound you don’t necessarily know how many items that container will ultimately render. “Predictable” IDs means we can “PREDICT” the Ids and therefore we can still program against the individual HTML elements that resides in the container.
So, why am I telling you this now ?
Well, over the past couple of years I have generated TONS of content on doing things with Microsoft Ajax and the Microsoft Ajax Control Toolkit. Since then we have really pitched our support to jQuery.
So, I’m now going to create new content to demonstrate how to do all those Ajax and Client UI techniques using jQuery and modern ASP.NET HTTP services.
Stay tuned and let me know which ones you want me to provide first !
Video Number 18 – Microsoft WebMatrix – Add Social Networking Features to your Site
 3GP |
 iPod |
 MP4 |
 MP3 |
 M4A |
 M4V |
 PSP |
 WMV |
 Zip |
 WMA |
 Zune |
Today the W3C announced that it has formally acknowledged Microsoft’s proposal on a common W3C standard for Web Tracking Protection.
Privacy on the web is a great candidate for standardization, given the concern that consumers, academics and governments worldwide have expressed, as highlighted in today’s blog by Dean Hachamovitch, the Corporate Vice President for Internet Explorer.
The Web Tracking Protection specification is designed to help users block content associated with online tracking, and the proposal has two parts:
These technologies can be used to enhance privacy protection for users, and provide access to content and services that respect user privacy preferences.
Microsoft is implementing Tracking Protection Lists in IE9 RC, which expresses both user intent as well as a way to enforce this by the user.
Read more about this on the IE blog, on the W3C blog and the Interop@MS blog.
Nice to see Microsoft continue to deepen its work with the open standards community.
