Archive for March, 2011

Microsoft NuGet Package Manager for Visual Studio & VWD

In this post I demonstrated using the Package Manager (NuGet) to install jQuery into your Website.

It’s a different experience in Visual Studio 2010 / Visual Web Developer Express so I thought I’d provide another post that walks you through it.

Plus, there is a tiny gotcha that might case new developers pause.

First, fire up Visual Studio.

In this case, I’ll be using Microsoft Visual Web Developer Express 2010 (The FREE Version) with Service Pack 1 (SP!) Installed.

If you are JUST getting started, install VWD Express 2010 via the Microsoft Web Platform Installer. You can read full instructions HERE.

After starting the IDE create a new Web Site.

NOTE: if you are using Visual Studio Pro or above you won’t see “New Web Site” as an option on the start-up screen.

It’s OK – just select File->New Web Site

Then select the Default “ASP.NET Web Site” template.

Once VWD has created your new web site, use the Visual Studio Menu to select :

Tools –> Library Package Manager –> Add Library Package Reference

Read the rest of this entry »

Microsoft NuGet Package Manager for WebMatrix

Did you know that the latest version of Microsoft WebMatrix has an administrative user interface that includes a package manager which is browser based front end for NuGet ?

The default WebMatrix site template doesn’t include jQuery and since I’ve been doing a lot of jQuery content lately I thought it would be good to demonstrate the best way to include jQuery (as well as jQueryUI and any number of other libraries and resources you might use).

Start by launching WebMatrix and creating a a new web site using the Starter Site template.

Then run the site that you just created using the “Run” button in the WebMatrix IDE.

When you run the Default.cshtml page will be displayed. Note that the site is running on http://localhost and a dynamically assigned port number.

Replace Default.cshtml with “_Admin” and you will be redirected to this page.

This is a one-time-only security feature. You need to create a password file.

Enter the password of your choice (twice) and click “Create Password”.

On the next page READ the instructions.

They tell you that you need to rename a newly created file in your project.

In App_Data there is a newly created folder named “Admin”. If you don’t see it you may need to refresh the directory tree by right clicking on the root folder name and selecting the refresh option.

Delete the leading underscore from the “_Password.config” file and then go back to the browser that is running your website.

Enter the password you used in the previous step and click “Login”.

Now we can start to work with the package manager.

Read the rest of this entry »

A jQuery Color Picker for ASP.NET Apps

There are lots of “ColorPickers” out there.

I liked the way mColorPicker worked, though did make some minor modifications to the source for this demo.

Just picking a color is a bit boring so I’m adding a bit of spice.

  1. After selecting a new color client side I use that color to change the background color of the current page (no postback)
  2. Upon Server PostBack we echo the hex value of the selected color.

Here is the experience.


Note the TextBox which is an ASP.NET TextBox Server Control and the multi-color icon nect to the text box.

Clicking on the color icon displays the ColorPicker.

As you hover over the different colors the hex value of the current color is displayed in the TextBox and the TextBox background color is set to that color as well.

The “Set Color” Button is an HTML input element (Client Side) and when you click it, the background color of the page is set to the newly selected color (as you can see in the image above.)

The “Submit Form” Button is an ASP.NET Server Side Button Control and when you click it the form is posted back to the server.

The new color value is retrieved from the Color Text Box and is inserted into the Label control at the bottom of the page.

Note that after the page is submitted (and therefore redrawn) the page’s background revert to its default color. If you wanted to make the selected color permanent we would need to dynamically load the background color from somewhere and save the updated color whenever the user selected a new one.
Feel free to give that a try on your own if you need such a feature.

To implement this, begin by loading the jQuery and jQueryUI libraries.

I’ll do this in my MasterPage and load them from the Microsoft CDN (which means you’ll have to modify the following code if want to run this on a machine that is not connected to the internet.)


<script type="text/javascript" 
        src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js"></script>
<script type="text/javascript" 
        src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js">

The actual page markup look like this.
Read the rest of this entry »

A Collapsible Content Area Using jQuery UI

As I’m going though all of the Ajax Control Toolkit Controls and demonstrating ways to replace the behaviors with client side technology (JavaScript / jQuery) I can’t help but wonder if some of them are too simple to bother with but since I committed to blogging one example for each control in the ACT, I will continue and then move on to more “Ajax and UI Patterns” content.

I did a previous post on implementing an Accordion style Content Container using jQueryUI and thereby replacing the Accordion Control in the Ajax Control Toolkit.

I suppose you could use the Accurdion method that I demonstrated in that post and only use one accordion section but there is an even easier jQueryUI plugin that you can use. Check put the Simple Collapsible Panel plugin HERE.

If you have tried a number of jQuery UI Plugins using the default ASP.NET Web Site Template and ASP.NET Server controls you have probably discovered that it’s possible to discover conflicts.

Lets try it with ths Collapsible Panel Plugin.

We’re going to need jQuery and jQueryUI which I will include as follows.


<asp:Content ID='HeaderContent' runat='server' 
             ContentPlaceHolderID='HeadContent'>
<link href='Styles/diQuery-collapsiblePanel.css' rel='stylesheet' 
            type='text/css' />
<link href='Styles/jquery-ui-1.8.11.custom.css' rel='stylesheet' 
            type='text/css' />
<script src='Scripts/jquery-1.4.1-vsdoc.js' type='text/javascript'>
</script>
<script src='Scripts/ui/jquery-ui-1.8.11.custom.js' type='text/javascript'>
</script>
<script src='Scripts/diQuery-collapsiblePanel.js' type='text/javascript'>
</script>
    <script type='text/javascript'>
            $(document).ready(function() {
                  $('.collapsibleContainer').collapsiblePanel();
              });
    </script>
</asp:Content>

Now, for demo simplicity there are a few things above that you probbaly do not want to do in a production application.

  1. I used the default version of jQuery that is part of the default ASP.NET project template. You should use the LATEST version of jQuery.
  2. You probably want to load jQuery from the Microsoft CDN
  3. You also probbaly want to load jQueryUI from the Microsoft CDN
  4. It’s good practive to put all your JavaScript code in a .js file
  5. Whenever possible you want to reference your JavaScript files from the bottom of your page markup. [ Read HERE ]

Read the rest of this entry »

Steve Michelotti is an ASP.NET MVP, Active ASP.NET Community Blogger & Speaker and Principal Software Engineer at Microsoft GOLD Development Applied Information Sciences.

In this episode, Joe and Steve talk about how he became an MVP, the benefits of being a development professional immersed in the ASP.NET developer community and what it’s like consulting in the “big time”.

Resources

Listen

Get Microsoft Silverlight

Subscribe

MP3 WMA M4A Zune iPod

Download

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

Microsoft P&P – Developer’s Guide to Microsoft Prism 4

Last fall the Microsoft’s Patterns & Practices team shipped Prism 4, now you can get the companion book.

The “Developer’s Guide to Microsoft Prism 4” book.

You can get the book at O’Reilly or Amazon [ Click HERE ].

The eBook will be available for download shortly.

The MSDN online content is available [ HERE ].

What’s In The Book ?  - Here’s the official blurb.

Prism helps you to design and build flexible and maintainable WPF and Silverlight applications by using design patterns that support important architectural design principles, such as separation of concerns and loose coupling.

This guide will show you how to use Prism to implement the Model-View-ViewModel pattern in your applications, and how to use it along with commands and interaction requests to encapsulate application logic and make it testable.

It will show you how to split an application into separate functional modules that can communicate through loosely coupled events, and how to integrate those modules into the overall application.

It will show you how to dynamically construct a flexible user interface by using regions, and how to implement rich navigation across a modular application.

Reference Library and Code Samples

Accompanying the book are reference implementations and QuickStarts in C# and Visual Basic that can be downloaded from MSDN:

  • Prism 4 (includes Prism 4 source code, binaries, documentation in CHM format,
    Reference Implementations, QuickStarts, and Hands-on Labs in C#)
  • Prism 4 Visual Basic Assets (includes Reference Implementations, QuickStarts, and
    Hands-on Labs)

To learn more about Prism, see the following:

You might also be interested in this : MVVM Training

To provide feedback or to get help, please visit the Prism Community Site at http://www.codeplex.com/prism.


jQuery Modal Dialog in an ASP.NET page.

Modal dialogs are a cornerstone of modern application user interface design and web applications don’t differ from any other type of application UI in this regard.
I did a JavaScript & jQuery Modal Dialogs Roundup a little while back and though I listed a bunch, readers even added a few more. So, there are lots of options.
People seem to get freaked out about making choices. Personally I like the fact that I have so many options and, in the case of Modal Dialogs for web applications, I can pick one that most closely matches the aesthetics and behaviors that I want for my application.
For this post I’m going to use http://fancybox.net/
Which one YOU choose shouldn’t materially change your implementation strategy since, as I hope is starting to become clear, the tricky part in using these sort of jQuery features is the relationship between client side “stuff (HTML Elements, JavaScript, Data, etc.) and the ASP.NET specific things.
Next lets add the jQuery library to our masterpage.
Normally for demo code I use the static librraies that get added to my site directory by VIsual Studio, but in a prodocution wed site you probbaly want to use the Microsoft CDN.
Like this :

<head runat='server'>
    <title></title>
    <link href='~/Styles/Site.css' rel='stylesheet' type='text/css' />
    <script src='http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js'
            type='text/javascript'></script>
    <asp:ContentPlaceHolder ID='HeadContent' runat='server'>
	</asp:ContentPlaceHolder>
</head>

Why use the CDN you say?
  • The CDN has the latest released versions. The Visual Studio template has the version that was current back when Visual Studio 2010 was released.
  • Many ASP.NET sites use jQuery and load from the Microsoft CDN – the files may already be cached for your user.
  • If if the files are not cached it will likely be a bit faster.
  • Take load of YOUR server and reduce your server’s bandwidth.
The page that will display our Modal Dialog pulls in the FancyBox JavaScript and CSS files as well as our own custom JavaScript file that defines the client behavior we desire.
For learning simplicity I’ve previously implemented our custom JavaScript in-line but in practice, it’s better to abstract or JavaScript.
Now that we are getting familiar with the jQuery basics I’ll be trying to use more “best practices” in the demo code as I continue with the jQuery series.

<asp:Content ID='HeaderContent' runat='server' 
             ContentPlaceHolderID='HeadContent'>
    <link href='Scripts/fancybox/jquery.fancybox-1.3.4.css'
          rel='stylesheet' type='text/css' />
    <script src='Scripts/fancybox/jquery.fancybox-1.3.4.js' 
	        type='text/javascript'>
    </script>
    <script src='Scripts/tos.js' type='text/javascript'></script>
</asp:Content>

Our scenario is that the Modal Popup is a “Terms of Use” dialog.
Here is our page’s markup.


<asp:Content ID='BodyContent' runat='server' 
             ContentPlaceHolderID='MainContent'>
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit
        <a href='http://www.asp.net' title='ASP.NET Website'>www.asp.net</a>.
    </p>
    <div id='content'>
	<h1>Join Our Community</h1>
	<hr />
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /><br />
	Etiam quis mi eu elit tempor facilisis id et neque.
	Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare.
	Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet
	ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum,
	vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue
	laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in.
	Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc
	aliquet tempus sem, id aliquam diam varius ac.
    <hr />
    <br />
    <!-- Modal Dialog -->
    <a id='tos' href='#serviceterms' 
	   title='You must agree with our tems of service.'>
        Click HERE to Agree to our Terms
    </a>
    <div style='display: none;'>
	<div id='serviceterms' style='width:440px;height:250px;overflow:auto;'>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /><br />
	Etiam quis mi eu elit tempor facilisis id et neque.
	Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare.
	Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet
	ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum,
	vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue
	laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in.
	Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc
	aliquet tempus sem, id aliquam diam varius ac.
	<br /><br /><hr />
	<input type='button' value='Yes' onclick='ToS_Agree()' />&nbsp;&nbsp;
	<input type='button' value='No' onclick='ToS_NotAgree()' />
	</div>
	    </div>
    <br /><br />

    <asp:Button ID='SubmitButton' runat='server' Text='Submit Form' 
	            Enabled='False'
                ClientIDMode='Static' onclick='SubmitButton_Click' />
        <br /><br />
    <asp:Label ID='LabelResult' runat='server' Text=''></asp:Label>

</div>
</asp:Content>

Note the buttons on lines 39 and 40. We want our Modal Dialog to “actionable” in that the user must click YES to accept the terms of service or NO to reject them.
In order to submit the form the user must accept the terms of service. The submit button declared at line 45 is DISABLED by default to the form can’t be submitted.
When the user clicks on the “YES” button inside the Modal Dialog the button will be enabled.
Let’s look at our custom JavaScript.

$(document).ready(function () {

    $('#tos').fancybox({
    	'titlePosition': 'inside',
    	'modal': 'true',
    	'transitionIn': 'none',
    	'transitionOut': 'none'
    });
});

function ToS_Agree() {
    $('#SubmitButton').removeAttr('disabled');
    $.fancybox.close();
}

function ToS_NotAgree() {
    $('#SubmitButton').attr('disabled', 'disabled');
    $.fancybox.close();
}

We also have a bit of C# Code-Behind that does two things.

Weekly Links– 2010_12 (50 for Web Devs & Other Geeks)

Software Developer Links of the Week.
  1. ILSpy – open-source .NET assembly browser and decompiler
  2. jQuery Validation with ASP.NET
  3. HTML5 – The new input types
  4. Creating and Using a jQuery Plug-in in ASP.NET Web Forms
  5. Visual Studio 2010 enhancements
  6. Custom ASP.NET Membership Providers
  7. Unobtrusive jQuery Validation Using MVC3 and Razor
  8. Python Tools for Visual Studio – Beta
  9. T4 vs Razor – what’s the skinny?
  10. Open Source Fest at MIX11 – 30 Projects and Counting
  11. Dispelling Common C++ Class Myths
  12. Windows Phone 7 Apps at Warp Speed
  13. Browser Global Stat Counter
  14. ASP.NET MVC Editable DataTable with JQuery
  15. 8 Essential Developer Apps for Multiple Platforms
  16. Custom JavaScript Event Manager
  17. Installing WordPress on Windows
  18. Survey – Technology grads not ready for resurgent economy
  19. Free Version of Silverlight Spy
  20. Toad for SQL Server FREEWARE
  21. MVC3 control Profile with action filter
  22. MEF with ASP.NET – “Hello World!”
  23. Download a local NuGet repository using Nuget
  24. The Presentation Secrets of Steve Jobs (PDF)
  25. Tips on installing Visual Studio 2010 SP1
  26. Internet Explorer 9 Security Part 1: Enhanced Memory Protections
  27. Overview of the Windows Phone 7 Execution Model
  28. Are Apps Killing the Internet?
  29. .NET Framework: Task Parallel Library Dataflow
  30. ASP.NET OO SessionWrapper
  31. Optimizing WCF Web Service Performance
  32. WCF Request Throttling and Server Scalability
  33. WCF Performance Tuning
  34. Tips for Windows Server 2008 and IIS7 Tuning
  35. Using a Radio Button in a GridView
  36. Lync for Windows Phone
  37. SQLAuthority on Microsoft SQL Server Compact 4.0
  38. Cloud-Based Collaboration with SharePoint Online
  39. Adobe Converts Flash to HTML5 With Wallaby
  40. New XML Standard for Super-Fast, Lightweight Applications Announced by W3C
  41. All the Windows Phone 7 Development Essentials in One Guide
  42. Is Microsoft killing off the Zune hardware? Microsoft responds
  43. Master of the Web HTML 5 Game
  44. Installing 32-bit IE 9 on 64-bit Windows
  45. Asynchronous WCF HTTP Module/Handler for IIS7 for Better Server Scalability
  46. The fastest way to resize images from ASP.NET
  47. John Papa – I Missed the Visual Studio Productivity Tools
  48. The BIG browser benchmark!
  49. Lexar releases the first 128GB SDXC memory cards
  50. Microsoft Office 2010 Developer Map

POLL: Do you care if demo code REQUIRES an active internet connection ?

Sorry, this poll is closed.


Using jQuery UI DatePicker in an ASP.NET Application.

The Ajax Control Toolkit contains a Calendar Control.

jQuery UI has an amazing alternative in the DatePicker control.

When it comes to this and all jQueryUI features, do yourself a service and check out the tabs – Overview, Options, Events, Methods, Theming. In the case of the DatePicker control, not only are all the expected events exposed and hookable but the rich Options collection will let you exercise detailed control over the date and UI formatting.

If you’re new to jQuery UI you will note that when you download the jQueryUI you can select one of a collection of preexisting themes.

Let’s begin by walking through the process of getting the jQueryUI library.

Start by hoping over to http://jqueryui.com/

We need to select a theme to use for configuring our jQueryUI download, so click on the “Demos & Documentation” link at the top of the page.

AT the top right corner of the demo area of the page there is drop-down with theme previews. Select a theme to try and then run the demos to see how that particular feature looks using the selected theme.

In our case we’ll select the Redmond Theme.

Now, go to the download page.

Read the rest of this entry »