Training Buddy is an app that I wrote for Windows Phone 7, intended for anyone who likes Running, Cycling or Walking and would like to keep a log of their workouts.

The app will monitor the route you take along with various stats like speed, pace and how many calories you are burning. During the activity you can set up audio alerts to let you know how your doing and afterwards it will store a log of all the activities you have done for review later on.

For more information on the app visit www.trainingbuddyapp.com or view the app in the Zune Marketplace.

On a normal website you can have many forms each with their own submit button which becomes the default action when pressing return on one of the forms feilds. However in ASP.NET Web Forms there is only ever one form on a page, but there could be 10 different buttons each needing to be the default action for a particular text box. 

The solution as it turns out is very simple and you have two options both introduced in .NET 2.0 (yes that’s how old it is!) 

1. Default button for the form. If your page has more than one button, but there is only one that you want to fire when you hit enter then in the code behind you can just type… 

Form.DefaultButton = Button1

or it can also be specified in your aspx file 

 
<form runat="server" defaultbutton="Button1">

2. If you need to be more specific a panel can also have a default button… 

Panel1.DefaultButton = Button1

or again is can be specified in your aspx file

<asp:Panel runat="server" DefaultButton="Button1">

Which initially is a bit confusing, as your site may have just run without any problems. But even so you go to check the placeholders anyway and they look fine. Then you copy and paste the ID’s out of the Master Page just to be sure, but still no luck. Check through the Master Page itself and that also looks fine, no squiggly lines to be seen. Finally create a new WebForm linked to the master page, but even this gives the same error.

Now if you have the problem I had, look at the title tag in the Master Page. Does it say <title /> or <title></title>? If it’s the first then that’s your issue. By default VS2010 will put in the correct tag, but if like me you’ve just slapped in some HTML from an old project or from a PSD conversion that’s been done for you, then chances are you may end up overwriting the title tag as well.

Previously I have blogged about how you can create keyboard shortcuts using JavaScript. In other words being able to add functionality to your web app for someone to do a ctrl+s. My previous example wasn’t particularly hard and only used 10 lines of code, but this week I stumbled across a jQuery plugin that makes it easier.

http://code.google.com/p/js-hotkeys/

With this plugin, in just 1 line of code you can bind a function to a keyboard shortcut. What’s more you don’t even need to look up the correct keycodes as it takes a simple text parameters.

$(document).bind('keydown', 'ctrl+c', fn);

Combine this with a function that just triggers a button click and you have some very cool advanced looking functionality written in around 5 – 10 minuets.

Creating a Custom Validation Error

First your going to need a class with some static class’s that you can pass your error message to. Here I have two functions one for simply adding the error to the page and the other for adding the error to the page with a specific validation group. I am using a CustomValidator object to make this all work, another option is to implement IValidator but it’s actually more effort than’s needed. The other section to note is that I’m setting the Error.Text to a non breaking space (this is what would normally go next to the form field you’re validating). This is because if you don’t then it will default to the ErrorMessage which we only want to go into the summary. If you try setting it to a normal space it will still also default to the summary text.

 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

/// <summary>
/// Summary description for Validator
/// </summary>
public class ValidationError
{

    public static void Display(string Message)
    {
        Display(Message, "");
    }

  public static void Display(string Message, string ValidationGroup)
    {
  CustomValidator Error = new CustomValidator();
        Error.IsValid = false;
        Error.ErrorMessage = Message;
        Error.ValidationGroup = ValidationGroup;
        Error.Text = "&nbsp;";

  Page currentPage = HttpContext.Current.Handler as Page;
        currentPage.Validators.Add(Error);
    }
}

Now to trigger the error you just need to called the function as below:

ValidationError.Display("Useful error message", "ValidationGroupName");

The Code

While it’s not that hard, the amount of code that is needed is quite a lot more than you may expect. Fortunately though it’s code you going to just re-use again and again changing small bits as needed.

    //1 - Event args (use default, but eventually pass in data through here)
    public class SaveCompleteEventArgs : EventArgs
    {
        public SaveCompleteEventArgs(int inDataValue)
        {
            this.DataValue = inDataValue;
        } //end of con

        public readonly int DataValue;
    }

    //2 - define delegate
    public delegate void SaveCompleteEventHandler(object sender, SaveCompleteEventArgs e);

    //3 - define the event itself
    public event SaveCompleteEventHandler SaveComplete;

    //4 - the protected virtual method to notify registered objects of the request
    //	virtual so that it can be overridden.
    protected virtual void OnSaveComplete(SaveCompleteEventArgs e)
    {
        //if the UpdateData event is empty, then a delegate has not been added to it yet.
        if (SaveComplete != null)
        {
            //event exists, call it:
            SaveComplete(this, e);
        } //end of if
    }

    //5 - method that translates the input into the desired event
    public void TriggeringMethod(int strData)
    {

        // get new event args
        //EventArgs e = new EventArgs();
        SaveCompleteEventArgs e = new SaveCompleteEventArgs(strData);

        // call the virtual method
        OnSaveComplete(e);
    }

So to insert do something like this: 

DataClassesDataContext dataContext = new DataClassesDataContext(); 

//Create my new Movie record
Movie movie = new Movie();
movie.Name = "Tim's movie"; 

//Insert the movie into the data context
dataContext.Movies.InsertOnSubmit(movie); 

//Submit the change to the database
dataContext.SubmitChanges();

And to delete do something like this:

DataClassesDataContext dataContext = new DataClassesDataContext();

var movies = from m in dataContext.Movies
                  where m.Name == "Tim's movie"
                  select m;

dataContext.Movies.DeleteAllOnSubmit(movies);

dataContext.SubmitChanges();

What makes this issue particulalry annoying is that it only appears when you try and change the database server that your code is looking at which could end up being when it’s going live or moving to a staging server.

So we all know about connection strings, their quite simple and you just store them in your web.config file, which is how LINQ to SQL works when your using them in a Website. But as soon as you move them to a class library things change. First your connection string name is no longer that simple name you gave it e.g. ConnectionString, now it is prefixed with the namespace which is annoying but not the end of the world. Second discovery though is no matter what you do, it just doesn’t seem to pick up the connection string from the web.config file. Reason being your origional connection string has now compiled itself in the class library’s dll and that is what it is using.

The Solution

Depending when you discovered this the solution is not to bad as you either have a lot of code to change or only a small amount. You can always pass a connection string to the constructor when you are createing an instance of the data context e.g.

DataClasses1DataContext da = new DataClasses1DataContext(connectionstring);

You can also set the connection string on your LINQ to SQL model to be blank, this will remove the default contructor and force you to pass a connection string. This way you web application has the choice of what connection string to use and you can keep re-using your class library in different projects.

In this example I’m going to use jQuery but it’s just as easy in everyday JavaScript.

    var isCtrl = false;

    $(document).keyup(function (e) {
	    if(e.which == 17) isCtrl=false;
    }).keydown(function (e) {
	    if(e.which == 17) isCtrl=true;
	    if(e.which == 83 && isCtrl == true) {
		    alert("Hello World");
		    return false;
	    }
    });

What is happening here is relively straight forward. When you hold a key down, JavaScript will pick up an event that says which key was pressed by it’s number. However what it can’t do is pick up a combination, so if you do a ctrl+s what you get is two events (one for the ctrl and one for the s). So on every keydown if it’s a ctrl we set the variable isCtrl to true, then on the next keydown we know it’s a combination. The keyup detects the end of the ctrl being held down and sets the variable back to false.

The return false, when we’ve detected a ctrl+s is also very important as what this will do is stop the browser from carrying out any shortcuts it may have had for that combination.

So there we have it, in around 10 lines of code you can add some functionality to your web app, that seems really advanced but is actually really really simple.

First off if you want to use the chart’s and you haven’t downloaded them then that’s what you need to do. The chart’s shipped after .NET 3.5 so there a seperate install, .NET 4 however has them included by default. 

• Chart controls for .NET 3.5
• Add on for visual studio 2008
• Chart controls samples

Using the Chart Control

Like I said adding a chart to a page is a quick and easy thing to do. Once you have the Visual Studio add on installed you can also drag and drop everything into place. However im going to go into a bit more detail. 

To start your going to need a data source. In this example im using a SQL Data Source object for ease of use, in a production environment I heavely recomend against using them as there going to make your code a completly unmanagable mess, instead I would use something like a Entity Data Source. My chart is going to be showing a graph of mobile phone handset popularity so my SQL is simply just returning a table of phone names and how many people use them. 

Code so far: 

Next we need to add a chart, the easiest way to do this is to just drag a chart object onto the page from the toolbox, however if you do want to type it yourself it’s not particularly complex. 

First you will need to register the assembly on the page.. 

And then add the chart like so…

Now we’re ready to start customizing what type of chart we’re going to have and what data it should show from our data source.

To actually show a chart there’s two bits of information you have to describe, area’s and series’. The first area’s is used to define an area for a chart to appear, one interesting thing about the chart control is you arn’t limited to just one area. In fact in this example I’m going to have to chart’s one showing a pie chart of phone popularity that will quickly show what kind of share each phone has, and then a second bar chart making it more clear the actual numbers people have of each phone. Area’s also let you set properties on what the chart is actually going to look like as well. In this instance I’m going to set for both charts to be 3D.

The second bit of information is the Series. This is where you’re actually specifying what data is going to be shown in which area and what kind of chart it is (e.g. Pie, Column, Donut etc). My completed code then looks like this…

<asp:Chart ID=”Chart1″ runat=”server” DataSourceID=”ChartDB” Height=”400px” Width=”400px”>

<series>

<asp:Series ChartArea=”ChartArea1″ ChartType=”Pie” Name=”Series1″ XValueMember=”Name” YValueMembers=”People”>
</asp:Series>
<asp:Series ChartArea=”ChartArea2″ Name=”Series2″ XValueMember=”Name” YValueMembers=”People”>
</asp:Series>

</series>
<chartareas>

<asp:ChartArea AlignmentOrientation=”Horizontal” Name=”ChartArea1″>

<Area3DStyle Enable3D=”True” />

</asp:ChartArea>
<asp:ChartArea Name=”ChartArea2″>

<area3dstyle enable3d=”True” />

</asp:ChartArea>

</chartareas>

</asp:Chart>

Depending on your data this should give you something like this…

This is just a simple example of what you can do, but if you download the Chart Samples Project and have a look through there is no end to the possibilites with everything from different styles of charts to adding ajax functionality even with the ability to click of different parts of the carts to trigger events.