Archive for February, 2011

ASP.NET DropShadow with jQuery.

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>&amp;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>&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='Panel3' runat='server' ClientIDMode='Static'
         style='background-color:#acc; padding:5px; width: 400px;'>
      <p>&amp;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.


ASP.NET Rounded Corners with jQuery

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.

In this video I demonstrated rounding the edges of markup containers in your ASP.NET UI by using the ACT RoundedCorner control extender.

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.

ASP.NET Rounded Corners with jQuery

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].


ASP.NET MVC App Building Videos (61)

Building the ASP.NET MVC Music Store


Part 1: Intro, Tools, and Project Structure
Part 2: Controllers
Part 3: Views and ViewModels


ASP.NET MVC 2


Displaying a Table of Database Data
Creating Model Classes with LINQ to SQL
Creating Unit Tests for ASP.NET MVC Applications
Preventing JavaScript Injection Attacks
An Introduction to URL Routing
Understanding Views, View Data, and HTML Helpers
Understanding Controllers, Controller Actions, and Action Results
Understanding Models, Views, and Controllers
Creating a Tasklist Application with ASP.NET MVC
Understanding Models, Views, and Controllers
ASP.NET MVC Controller Overview
Creating a Movie Database Application in 15 minutes with ASP.NET MVC
How Do I: Return JSON Formatted Data for an AJAX Call in an ASP.NET MVC Web Application?
What is ASP.NET MVC? 80 minute technical video for developers, building NerdDinner
Why ASP.NET MVC? 3 minute overview video for decision makers
ASP.NET MVC: How? 10 minute technical video for developers
How Do I: Work with Data in ASP.NET MVC Partial Views?
How Do I: Create a Custom HTML Helper for an MVC Application?
How Do I: Work with Model Binders in an MVC Application?
How Do I: Use HttpVerbs Attributes in an MVC Application?
MVC 2 HTML Encoding
MVC 2 Strongly Typed Helpers
MVC 2 Model Validation
MVC 2 Template Customization
ASP.NET MVC 2 – Areas
ASP.NET MVC 2 – Render Action


ASP.NET MVC Talks


Creating NerdDinner.com
America’s Next Top MVC Framework
Ninja on Fire Black Belt Tips
ASP.NET MVC 2: Ninja Black Belt Tips


ASP.NET MVC For the Rest of Us

(Building a Contact Form App)


#1: ASP.NET MVC For the Rest of Us: Part 1
#2: ASP.NET MVC For the Rest of Us: Part 2
#3: ASP.NET MVC For the Rest of Us: Part 3
#4: ASP.NET MVC For the Rest of Us: Part 4


ASP.NET MVC Storefront Starter Kit


#1: Architectural Discussion and Overview
#2: The Repository Pattern
#3: Pipes and Filters
#4: Linq To Sql Spike
#5: Globalization
#6: Finishing The Repository, and Initial UI Work
#7: Routing and UI Work
#8: Testing Controllers
#9: The Shopping Cart
#10: Shopping Cart Refactor and Authorization
#11: Hooking Up the Shopping Cart & Using Components
#12: Mocking
#13: Dependency Injection
#14: Rich Client Interaction
#15: Public Code review
#16: Membership Redo With OpenID
#17: Checkout With Jeff Atwood
#18: Creating An Experience
#19: Processing Orders With Windows Workflow
#19a: Windows Workflow Followup
#20: Logging
#21: Order Manager and Personalization
#22: Restructuring, Rerouting, and PayPal
#23: Getting Started With Domain-Driven Design
#24: Finis


ASP.NET 4 ClientId – I’ll do it myself thanks !

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.

  • Static
  • Legacy
  • Predictable

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 – WebMatrix – Add Traffic Analysis to your site

Video Number 18 – Microsoft WebMatrix – Add Social Networking Features to your Site


3GP File
3GP
iPod File
iPod
MP4 File
MP4
MP3 File
MP3
M4A File
M4A
M4V File
M4V
PSP File
PSP
WMV File
WMV
ZIP File
Zip
WMA File
WMA
Zune File
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:

 

  • Filter lists, which can enforce user privacy preferences by preventing the user agent from making unwanted requests to Web servers that track users.
  • A user preference, which is conveyed by an HTTP header and a DOM property, to be used by Websites and pages to respect the user’s privacy.

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.