Here’s how to implement the ASP.NET Color Picker Control

(1) Download the library and add it to your project

First, download the library from the ASP.NET Color Picker Control website. Make sure to download the latest binary release from the website. Currently that version is ASP.NET Color Picker v.1.4.10423.1 Binary. Once you get the zip file, it will contain a library that you should extract to the /bin/ folder of your website.

(2) Register the library on your page

ASP.NET provides a set of standard controls that you can add to a page that start with the “ASP” prefix, such as “<ASP:TextBox runat=”server” id=”txtBox” />. Any custom controls will have their own prefix that you specify by registering the library on the page. It’s another line of code that you add to the top of the page next to your page definition. It should look something like this:

<%@ Register Assembly=”Karpach.WebControls” Namespace=”Karpach.WebControls” TagPrefix=”cc1″ %>

(3) Add the control to your page

Now that you have the library referenced, you can add the control to your page and make use of it.  For the purpose of this demo, I’m going to set the AutoPostBack property to true and run a function whenever the color is changed. This will show us the color that we picked inside of a label (also shown below) after we select a new color.

<cc1:ColorPicker ID=”colorBackgroundColor” runat=”server” AutoPostBack=”true” OnColorChanged=”chngColor” />
<br /><br />
<asp:Label ID=”lblResults” runat=”server” Text=”"></asp:Label>

(4) Create Your C# Function

After we choose a color, we have to do something with it. With the ColorPicker control above, I’m using the OnColorChanged property to call the “chngColor” function, which in C# will look something like this. This will also demonstrate how to programmatically read the color chosen with the .Color property of the ASP.NET Color Picker Control

protected void chngColor(object sender, EventArgs e)
{
lblResults.Text = “<div style=’background-color:#” + colorBackgroundColor.Color.Replace(“#”, “”) + “;height:50px;width:80px;text-align:center;padding-top:35px;’>Sample Text</div>”;
}

(5) Success

So far, we’ve added the library to our project, registered the library on the page, added the control to the page, and done something with the color chosen by the user. Your page should look something like this:

You can download my sample program here.

Essentially, they’ll give you an image of a virtual machine that contains the web-server software, as well as the server-side software you are testing. Everything will be pre-configured and ready to go. You’ll download a copy of the virtual machine, get it running with VirtualBox, and you’re good to go. Some of the virtual machines do cost money, but fortunately for us, the image for Joomla is free for download from Joomla.org.

Normally, I’d post a walk through of going through the process of installing the software and getting it up and going, but the folks at Joomla.org have already done that for us:

Run Joomla in 5 min with JumpBox and VirtualBox from Sean Tierney on Vimeo.

The Output Cache

Using the output cache is probably the easiest implementation of caching in ASP.NET because all you need to do is add a line to your header. This will essentially cache the entire page. This way, when you load the page a second time, it will serve up the generated HTML of the cached page rather than by going through the page lifecycle and reloading the page.

Here’s the line of code you need to add  to the top of your .ASPX pages to implement the Output Cache:

<%@ OutputCache Duration="60" VaryByParam="*" %>

The “Duration” property indicates the number of seconds that the cache is good for. The “VaryByParam” property allows you to create separate cached versions of the page if it’s given different querystrings. For example, if you had a content management system where your Page’s looked like http://www.example.org/Default.aspx?PageID=85, you wouldn’t want that to show up the same as http://www.example.org/Default.aspx?PageID=92. They’re separate dynamic pages on the site that’s generated from the page. You don’t want to cache one sub-page then serve that cache for the entire site.

The Data Cache

If you need to cache any sort of information in ASP.NET, such as a DataSet, a DataTable, or even a variable, you can use the ASP.NET DataCache. This works a lot like a session or application variable, but it has some added cache-related methods as well.

Here’s how to store something in the cache in C#:

DataTable dtToBeCached = new DataTable();
Cache["CachedTable"] = dtToBeCached;

Here’s how to turn that cached object back into a DataTable:

DataTable dtToBeCached = new DataTable();
if(Cache["CachedTable"] != null)
{
dtToBeCached = (DataTable)Cache["CachedTable"];
}

If you would like to remove something from the cache at a later time, you can simply use the Cache.Remove() method.

Partial Page Caching:

There are some cases, such as when having a website that allows for users to login, that you would want to cache some parts of page but not the entireity. Let’s say that you cached a page where one user was authenticated and that paged was cached. Then, the authenticated version of that page would be served to everyone, including individuals that aren’t logged in. In that case, you don’t want to use the Output cache onthe entire page. 

Instead, you want to make use of the DataCache to store shared data that would be frequently read from the database. The other strategy you can use in this case is to cache ASP.NET user controls that you develop. You cache these much in the same way that you would cache a page on a website, but instead you would add that code to the user control’s header instead of the page’s header.

You might also want to read these articles related to ASP.NET Caching:

• ASP.NET Caching: Techniques and Best Practices (MSDN)
• Advanced Caching Techniques in ASP.NET 2.0 (DevCity)
• Caching Techniques in ASP.NET 2.0 (Bean Software).
• Caching with ASP.NET (4 Guys From Rolla)

So What’s LINQ?

LINQ stands for Language Integrated Query. It’s a technology developed for Microsoft’s .NET platform which make it easier to query databases and XML files. Here’s how Wikipedia describes LINQ:

Microsoft LINQ defines a set of proprietary query operators that can be used to query, project and filter data in arrays, enumerable classes, XML (XLINQ), relational database, and third party data sources. While it allows any data source to be queried, it requires that the data be encapsulated as objects. So, if the data source does not natively store data as objects, the data must be mapped to the object domain. Queries written using the query operators are executed either by the LINQ query processing engine or, via an extension mechanism, handed over to LINQ providers which either implement a separate query processing engine or translate to a different format to be executed on a separate data store (such as on a database server as SQL queries (DLINQ)). The results of a query are returned as a collection of in-memory objects that can be enumerated using a standard iterator function such as C#’s foreach.

Getting Started:

Before we can do any LINQ queries, we must first have a data source to access it. To start out, I created a new ASP.NET/C# website in Visual Studio 2008. Then, I created a two table database using the built in version of SQL Express that comes with visual studio. One table called “Users” with an ID field, a username, a password, and then an “Account Type” feature which is a foreign key of the second table “AccountTypes”. The AccountTypes table simply has an ID field that’s the primary key then a “Title”. I went ahead and added some sample data into the database as well.

The LINQ to SQL Class:

After creating a database, the first step is to create a “LINQ to SQL” class. This class will map your class to the tables in the database. It’s actually an optional step, but doing so will allow you better control over the class. By doing this, you can rename tables and properties from within the class. To do this, Right click on the folder of your website in the Solution Explorer, and click “Add New Item”. Then pick out “LINQ to SQL Class”. Open the class after creating it.

The next step is to add your database tables to the “LINQ to SQL” class. Have your “LINQ to SQL” class file open in your main window, then in your database explorer, drag the tables you want to add to the class (in our case, users and accounttypes) over to the “LINQ to SQL” class.

At this point, you should have something that looks like this:

Before closing out of your DBML file / Linq to SQL class, I recommend that you give the class a new name. The default name is “DataClassesDataContext”, Let’s change that in the properties window to “UserContext”. At this point, you could implement a lot more of the sophisticated features that LINQ offers, but for now, we’ll leave it as is.

Creating the Query:

Now that we have our “LINQ to SQL” class made, The next thing we’ll want to do is create our query. We can just use the “Default.aspx” and “Default.aspx.cs” that came with our project for this part. Go to the PageLoad method of our Default.ASPX.CS file and we’ll start our coding there. The first thing we need to do is create an instance of the class we created:

UserContext thisContext = new UserContext();

The next thing we need to do is write our query. This will get all users from the users table that have an account type of “Admin”:

var UserResults = (from u in thisContext.Users
where u.AccountType1.Title == "User"
select u);


At this point, we have everything we need to do to make use of the database. The SQL isn’t generated and ran until we actually do something with the results, so let’s do something simple and write each username that is returned to the page:

foreach (var ThisUser in UserResults)
{
Response.Write(ThisUser.Username + "<br/>");
}


And that’s really all it takes to get started with LINQ.  If all is well in the world and your code is as it should be you should get something that looks a lot like this:

Click here to download the example project I made (829 KB)

You might also want to read:

• Getting Started with LINQ and C# (Microsoft.com)
• Using Linq to SQL by Scott Guthery (ASP.NET)
• Introduction to LINQ (DotNetSlackers)

I thought I would give a shot at doing a screencast and demoing off the multi-site functionality of the system. I used Screencast-O-Matic to make it (and I was very impressed with their solution).

Here’s a tradition way to read data from a database and put it in a table. (There’s also the Data Reader Method that some would argue is more efficient)

//create command
SqlCommand cmdMyQuery = new SqlCommand("Select * From Users where username=@username");
cmdMyQuery.Parameters.AddWithValue("@username", "Matt");

//Get connection string
string ecmsConnectionString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
SqlConnection SQLDatabaseConnection = new SqlConnection(ecmsConnectionString);

//Perform Command
cmdSQLQuery.Connection = SQLDatabaseConnection;
DataSet dsPageInfo = new DataSet();
SqlDataAdapter daPageInfo = new SqlDataAdapter(cmdSQLQuery);
SQLDatabaseConnection.Open();
daPageInfo.Fill(dsPageInfo);
SQLDatabaseConnection.Close();
DataTable dtResults = dsPageInfo.Tables[0];

That’s a lot of code to do something that you’re probably going to do on a very regular basis. If you wanted to run a SQL command such as an INSERT, UPDATE or DELETE, you traditionally would have to do something like this:

//create command
SqlCommand cmdMyQuery = new SqlCommand("update users set Active=1 where username=@username");
cmdMyQuery.Parameters.AddWithValue("@username", "Matt");

//get connection string
string ECMSconnString = ConfigurationManager.ConnectionStrings["csWebCMS"].ConnectionString;
SqlConnection SQLDatabaseConnection = new SqlConnection(ECMSconnString);

//execute command
CommandToExecute.Connection = SQLDatabaseConnection;
SQLDatabaseConnection.Open();
CommandToExecute.ExecuteNonQuery();
SQLDatabaseConnection.Close();

This isn’t nearly as bad as doing a SQL Select statement, but there’s an easier way to redo these two things. We can create a static class with two functions, run to do SQL Select statements, and one to do INSERTS, UPDATE’S, and DELETE’s. We want to do a static class with static methods because that mean a new copy of the class won’t be made each time it’s run, meaning that it’ll take less memory and be more efficient.

Here’s what the code will look like:

using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web;
/// Abstracts Database connectivity and provides SQL Injection Prevention Mechanism
public static class DBUtils
{
/// Returns the results of a SQL Query in the form of a DataTable
public static DataTable SQLSelect(SqlCommand cmdSQLQuery)
{
//Get connection string
string conConnectionString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
SqlConnection SQLDatabaseConnection = new SqlConnection(conConnectionString);
//Perform Command
cmdSQLQuery.Connection = SQLDatabaseConnection;
DataSet dsPageInfo = new DataSet();
SqlDataAdapter daPageInfo = new SqlDataAdapter(cmdSQLQuery);
SQLDatabaseConnection.Open();
daPageInfo.Fill(dsPageInfo);
SQLDatabaseConnection.Close();
return dsPageInfo.Tables[0];
}
/// Executes a SQL Command
public static void ExecuteSQLCommand(SqlCommand CommandToExecute)
{
//get connection sring
string conConnectionString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
SqlConnection SQLDatabaseConnection = new SqlConnection(conConnectionString);
//execute command
CommandToExecute.Connection = SQLDatabaseConnection;
SQLDatabaseConnection.Open();
CommandToExecute.ExecuteNonQuery();
SQLDatabaseConnection.Close();
}
}


Now, when you want to run a SQL Select Command and put the results in a DataTable for use, you can just do this:

SqlCommand cmdMyQuery = new SqlCommand("Select * From Users where username=@username");
cmdMyQuery.Parameters.AddWithValue("@username", "Matt");
DataTable dtResults = dbutils.SQLSelect(cmdMyQuery);


If you want to run a command, just do this:

SqlCommand cmdMyQuery = new SqlCommand("insert into users (username) VALUES (@username)");
cmdMyQuery.Parameters.AddWithValue("@username", "Matt");
DataTable dtResults = dbutils.ExecuteSQLCommand(cmdMyQuery);


Hopefully creating a data access class will make your coding experiences in .NET just a little bit easier. To download a copy of this class in C#, click here (1.86KB).

In the near future, I’m hoping to post about the C# code-generation tool that I created which works with class. Essentially, you point it at any table in the database, and it’ll give you full CRUD (Create, Read, Update Delete) functionality for any given row in that table. It makes data-access a heck of a lot easier.