Archive for April, 2011

ContosoKarate WM – Site Registration

I started building ContosoKarate (WebMatrix) by creating a site using the default WebMatrix Default Site Template.

The default template includes a collection of account related pages.

After modifying the _SiteLayout.cshtml the Register.cshtml looked pretty good.

So there are two things I need to do.

  1. Enable Captcha
  2. Make the formatting pretty.

First, I modified the Login Box markup to include a link to the Register.cshtml page.

<ul>
   <li><a href='#'>Forgot your password?</a></li>
   <li><a href='#'>Forgot your username?</a></li>
   <li><a href='@Href('~/Account/Register.cshtml')' /'>
          Create an account</a></li>
 </ul>

So I did a bit of clean up in the formatting and lined up form fields using a table. I know, I know – but for something this simple a table is perfect and easy.

Next, next enable Re-Captcha. To do this we’ll need to use the WebMatrix Package Manager (which is a front end to NuGet) to download and install some of the basic WebMatrix Razor Helpers.

Before we install he Re-Captcha Helper itself, we’ll need a Re-Captcha Key.

You can get one by going here https://www.google.com/recaptcha/admin/create and following the steps as in the screen shots below.

Save the ReCaptcha keys and start your WebMatrix application then add _Admin to the url in the browser.

ie: http://localhost:9999/_Admin

Read the rest of this entry »

Podcast- Dave Ward Encosia

Dave Ward runs what, for me, is one of the most usefull developer blogs on the Web. http://encosia.com/

Though Dave does both front end and back end web development, his UI and jQuery blogging has been especially interesting to me so I though “why not talk to Dave out loud!’

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

ContosoKarate (WM) – The HTML Theme and ASP.NET Web Pages Integration

Monday I posted that I was starting a series of demo applications [ Read HERE ]

Please keep the suggestions and comments coming.

I’ve been asked about the theme for the site.

Since I have NO artistic ability myself ad I have no budget to hire a designer, I purchased Artisteer (with my own money !)

Artisteer is an interesting tool. Not perfect, but well worth the money for me.

For the “aesthetically challenged” like mem it offer complete theme suggestions and then you can have the tool suggest design changes on a section by section basis.

If you explore the tool you find that you can have a pretty detailed control over the look of your design.

I wanted a pretty standard “portal” style design to start with so I added a custom background and header graphic and settles on this.

Since I’m using a generated theme, in the future I’ll see how hard it will be to try to “plug” in theme variations.

Next, I needed to separate the UI “frame” into a template and the core for the default page into the Default.cshtml page

I’ve done this and formatted the markup. There is still lots to do with the Template but those details will take care of themselves as features get implemented.

The first bit of functionality we need to add is a customized site registration.

I doubt the state of the code would be useful to anyone at this point so I won’t bother to post it but if anyone wants it just email me and I’ll send it to you.

If you are new to WebMatrix of haven’t wrapped your head around PageTemplates yet you can find that and lots of other info [ HERE ]

ASP.NET How-Do-I Video Archive

I’ve been seeing a rise in inbound searches from Google and Bing of people looking for “Joe Stagner Videos”.

The ASP.NET web site team has been doing a lot of reorganizing on the www.asp.net web site and some of the older videos, while still there, are not as easy to find. (They need to make room for the “new” stuff.)

So I’ve started to index my ASP.NET, Microsoft Ajax, and Ajax Control Toolkit Videos here.

You can find them using the Video menu item at the top of my blog or the Videos menu to the right side.

I’ll try to add some every night until I’ve got them all.

Hopefully this will make them easier to find.

Beginning the Contoso Karate WebMatrix Sample App

Today I began work on a new Sample Application called Contoso Karate

My proposed “design” is as follows:

The idea will be to create a production ready web site that represents your kids Karate School.

So, not a big production B2B or B2C Ecommerce site but still something with nice features, community and social functionality.

I intend to build the WebMatrix Version first and then perhaps an ASP.NET MVC 3 version. (Maybe even a MODERN WebForms version if there is interest.)

So, please take a moment to comment below on the features, methods, etc that you would like to see in a learning application with this context.

My goal is that folks will be able to use this to learn Web Site Development with Microsoft WebMatrix or modify the application to host any “club” based web site (Kids Soccer team, bowling league, etc.)

THANKS

Developers ! Join the UN-Contest and Win, well, nothing !

This spring I wanted to run a contest for ASP.NET developers to drive contributions to Open Source projects.

I found a couple of xBox 360s, Kinects, and a bunch of software to give away to the winners.

Because there are lots of laws around how contests need to be run in order make sure everything is on the up-and-up, I contacted Microsoft’s legal department just to make sure I would be in compliance.

Ouch……

Now, I’d really like to inject a lawyer joke or two here or add a wisecrack about the attorney’s genetic proclivity to prevent anyone around then from getting any work done, but I’ve been trying to be more socially correct this year.

However, in the interest of protecting the company’s “six” I single person can not run a contest. In fact, what the lawyers told me I had to do was hire a third party to host and run the contest for me.

Duh !

So, I can’t have a contest, but I still want to rally .NET developers around some new Open Source contributions.

So, I thought I’d see if YOU ALL would agree to participate in an UN-CONTEST !

UNCONTEST – As in NOT a conference !

WIN NOTHING !

But maybe as a community we can do something cool.

HERE ARE THE RULES :

Wait…..  Since it’s not a contest, there are no rules.

But here is what I hope you will do…..

Write something open source !

A theme, module, plugin, etc. for any application that is (or will be after you write it) deployed with Microsoft WebMatrix, The Microsoft Web Platform Installer or Nugget.

Then EMAIL ME !

Once I get the first one I’ll create a page to post the new creations, I’ll blog and tweet about your work and get other folks at Microsoft to do the same.

You can even put a PayPal badge on your blog/site so anyone who really loves your work can decide to give you a dollar !

Readers of my blog will be able to decide which submissions they like best.

I’ll show them off all around Microsoft.

You’ll become a (more) famous developer.

So, pick an application like Orchard, BlogEngine.net, Umbraco, etc and create a theme or module or create a NuGet Package and email me the details.

I’ll blog and tweet about the submissions and I’ll do blog posts about my favorites.

Are you up to the challenge of a bit of Microsoft based Open Source ?

Please Tweet this & Blog it, pass it along. Lets see how many new “things” we can list by the end of June !

jQuery Confirm Buttons and Dialogs for ASP.NET

The ASP.NET Ajax Control Toolkit includes an “Confirm Button” control extender.
In this series I’ve been demonstrating ways to implement the features of the MS Ajax Toolkit with jQuery and in this post I’ll address the “Confirm Button Extender”.
You might think that doing this is so trivial that it wouldn’t warrant a blog post but there is more to it that you might guess at first glance.
In ASP.NET WebForms there is a definite abstraction of the underlying web application mechanics and, for the purposes of this subject there some issues we must consider.
  1. By default, ASP.NET WebForms is a SERVER side programming model and therefore all UI elements (ASP.NET Controls) with user interactions are assumed to have server-side logic.
  2. We are integrating Client AND Server Development Models.
  3. An ASPX (Web Forms) page is assumed to contain only ONE HTML form. (Though we can use advanced manual techniques to bypass this limitation)
  4. Given the above items 1 & 3, all <asp:button> controls render as HTML Submit elements.
So what does that mean ?
HTML actually has three button types :
  • <INPUT TYPE=BUTTON> // A button with a click event.
  • <INPUT TYPE=SUBMIT> // A button whose click posts the html form
  • <INPUT TYPE=RESET> // A button that causes form fields to be reset
So, ASP.NET Buttons all render to HTML SUBMIT buttons.
We can divide button triggered dialogs into two groups:
  • Ones that display something but have no need to SUBMIT The form
  • Ones that take user input and MIGHT submit the form.
Perhaps the most straight forward way to implement both of these categories of button click dialogs is to use input type=”button” for all our buttons and programmatically submit the form when appropriate.
I’ve created a collection on customized buttons with OnClick dialogs:
Each of these will implement different usages of the jQuery.Alert plugin you can find [ HERE ]
The first button is wired to an information only dialog that will display for (in our case) 3 seconds.
Lets look at the markup, the CSS and the page specific JavaScript and then we’ll enumerate the rest of the button behaviors.
The Markup 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'>
<link href='Styles/jqdialog.css' rel='stylesheet' type='text/css' />
</asp:Content>
<asp:Content ID='BodyContent' runat='server' 
             ContentPlaceHolderID='MainContent'>
<br />
<button ID='btnotify' type='button' class='CustomButton'>
        Notification Popup
</button><br /><br />
<button ID='btalert' type='button' class='CustomButton'>
        Alert Popup
</button><br /><br />
<button ID='btconfirm' type='button' class='CustomButton'>
        Confim Dialog
</button><br /><br />
<button ID='btprompt' type='button' class='CustomButton'>
        Input Prompt
</button><br /><br />
<button id='btcontent' type='button' class='CustomButton'>
        Any Custom Content
</button><br /><br />

<script src='http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js'
        type='text/javascript'></script>
<script src='Scripts/jqdialog.min.js' type='text/javascript'></script>
<script src='Scripts/jQueryDialogs.js' type='text/javascript'></script>
</asp:Content>

Note that the concise markup does not reflect the rich functionality associated with the buttons.
The CSS class designation [class="CustomButton"] is responsible for the styled appearance of the buttons but not the behavior. Often when using jQuery we will use a data attribute or a class identifier to connect the desired jQuery code to the HTML elements but since button dialogs are likely to be very specific (one dialog for each button), the jQuery behaviors in this demo will be connection via the button element ID.
The CSS is as follows. Note that the Custom Button class is at the bottom and all the rest of the CSS defines the visuals for the various dialogs. In your app you would only include the classes that you use on your pages.

Using jQuery for ASP.NET Styled DropDown

The ASP.NET Ajax Control Toolkit includes an “Styled Dropdown” control extender.
In this series I’ve been demonstrating ways to implement the features of the MS Ajax Toolkit with jQuery.

HTML has the <select> element for drop down lists and ASP.NET has the DropDownList control, but the styling is pretty plain.

Luckily, we can us a jQuery plugin to change the styling of both <select> and <asp:DropDownList>
By default the DropDownList looks like this:

While this works fine we might want to style the DropDown to match our UI of to obviate the context of our dropdown.

You can find the plugin we will use here:
The custom styling will consist of a combination css and the following background image.

The page markup is as follows:

<%@ 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'>
    <link href='Styles/Selectbox.css' rel='stylesheet' type='text/css' />
	<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js'
            type='text/javascript' charset='utf-8'></script>
	<script type='text/javascript' src='Scripts/jquery.selectbox-0.5.js'>
	</script>
    <script src='Scripts/PageScript.js' type='text/javascript'></script>
</asp:Content>
<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>

    <p>
    <asp:DropDownList runat='server' name='Items' id='Items'
                      class='StyledDD' ClientIDMode='Static'>
      <asp:ListItem>One</asp:ListItem>
      <asp:ListItem>Two</asp:ListItem>
      <asp:ListItem>Three</asp:ListItem>
      <asp:ListItem>Four</asp:ListItem>
    </asp:DropDownList>
    </p>
</asp:Content>

Read the rest of this entry »

Using jQuery for ASP.NET Textbox Autocomplete

The ASP.NET Ajax Control Toolkit includes an “Autocomplete Extender“.

In this series I’ve been demonstrating ways to implement the features of the MS Ajax Toolkit with jQuery.

jQuery UI makes “AutoComplete” very straight forward (Read the plugin spec here.)

Here is the behavior.

After the user enters 2 or more characters, then the UI starts to suggest values for the textbox.

In the case fo the jQuery UI Autocomplete plugin, the data can come from inside the page’s Document Object Model (DOM) or from a JavaScript callable web service.

For small data sets you may want to just send all the possible values to the browser with the rest of the page but AutoSuggest fields are most helpful when the number of possible value choices are too numerous to fit in a page’s dropdown control.

In this case, supplying the values via a service method is your choice and that’s what we’ll do in our example.

After creating a new website using the default ASP.NET Web Site Template, I’ll include a jQuery UI template CSS file and 3 JavaScript files.

  • jQuery
  • jQuery UI
  • a custom JavaScript file that contains my page specific code.

Then I’ll add an ASP.NET TextBox filed and associated label for the user to enter an email address in.

The markup for my default.aspx page is as follows:


<%@ 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'>
<link href='http://ajax.aspnetcdn.com/ajax/jquery.ui/
                   1.8.10/themes/redmond/jquery-ui.css'
      rel='stylesheet' type='text/css'/>

</asp:Content>
<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>
    <hr /><br />

    <div>
            <label for='tbAuto'>Enter Email: </label>
             <asp:TextBox ID='tbAuto' class='autosuggest' runat='server'>
             </asp:TextBox>
    </div>
    <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'>
    </script>
    <script src='Scripts/PageScript.js' type='text/javascript'></script>
</asp:Content>

Next we need a service that will take a few characters of string as in input argument and return a collection of emaill addresses that match the beginning characters that the user entered.

SO, I’ll add an .ASMX service called EmployeeList.asmx

The service codebehind looks like this:



using System.Collections.Generic;
using System.Linq;
using System.Web.Services;
using System.Web.Script.Services;

[WebService(Namespace = &quot;http://tempuri.org/&quot;)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class EmployeeList : System.Web.Services.WebService
{
  [WebMethod]
    public List GetEmailSuggestions(string mail)
    {
    var emp = new Employee();
    var suggestionList = emp.GetEmployeeList()
    .Where(m => m.Email.ToLower().StartsWith(mail.ToLower()));
        return suggestionList.ToList();
    }
}

If you are new to service programming in ASP.NET you will note the [WebMethod] attribute on the GetMailSuggestions method will cause the method to be exposed via HTTP and the class itself is decorated with the [ScriptService] attribute which will make the class callable my JavaScript and provide facilities like JavaScript proxy generation.
Read the rest of this entry »