Eric Fickes » .net

Injecting javascript into asp.net via code

Eric Fickes — Sat, 19 Feb 2011 04:13:50 +0000

Microsoft has a great MSDN article on using javascript along asp.net, but they didn’t mention a technique I like to use, put it in a Literal control. While there are many ways to add javascript to a page, I find putting the javascript in a literal much less stressful. Using a Literal control placeholder is also a good way to add messaging to a page after postback, but we’re just going to look at adding javascript.

Let’s take a simple example. Say you’ve got a comment form that you want to auto close, or reload after the form was posted. Below is a simple single file style asp.net page with a simple javascript function that reloads this page.

<%@ Page Language="C#" %>







	Comments
	







	Comments
	
	



	Your name

If you look just under the form tag you’ll see the key to this technique, an asp literal wrapped by an open and close script tag.

When you load your page and view the source you’ll just see an empty script tag, so it shouldn’t interfere with the execution or rendering of your page.

The last part of this technique is simple, in your server code just set your Literal control’s .Text value to your javascript code. In this case when I post my comment form, after handling the input data I display a thank you message, then set some javascript to reload the page.

ltl_js.Text = "setTimeout('reload()', 3000);";

That’s all there is to it. Drop a literal in an empty script block and BAM!, you have an easy way to add javascript to your asp.net page.

Endless Mural wins FWA site of the day

Eric Fickes — Sat, 20 Nov 2010 06:55:25 +0000

FWA site of the day" src="http://ericfickes.com/wp-content/uploads/2010/11/endlessmural-fwa.png" alt="FWA Site of the day > Nov 22 2010" width="600" height="395" />

Endless Mural wins FWA for HTML5

I’m ecstatic to announce the Endless Mural HTML5 project has won the prestigious FWA Site of the day award. While this isn’t the first project I’ve worked on that has won the FWA, it is the first NON-Flash, HTML5 and ASP.NET project that has. No Flash, and we still got the FWA site of the day, SWEET!.

I need a SQL Ninja

On Friday July 23rd I got the chance to skateboard with my good buddy and personal hero Joshua Davis. I feel lucky being able to say we’ve actually been skating together for a few years now, but this was certainly my favorite session we’ve had so far. We started out at Broomfield’s new park because I had to show Josh the new mini bowl.

Two hot dogs ( http://yfrog.com/n3hs5j )

After Broomfield we made a quick stop for lunch, and then on to the Denver Skatepark in downtown. It was great showing Josh the lines at my hometown skateparks, as well as a few radical maneuvers.

Now that Josh had seen my non-frontside airs, it was time to wrap things up. As we were saying our goodbyes I decided to ask about work. Normally I don’t talk about work at the skatepark, but I was thinking about going indie again, and figured what the heck.

Turns out Josh was about to start a project for Microsoft ( WHAT?!?! ) and he need to “find a SQL Ninja” ( DOUBLE WHAT?!?! ). I’ve been actively working with MS SQL Server since version 6.5, so I let him know he was looking at his sql ninja. Josh was interested, but gave me the “just cause we’re bros, doesn’t put you on the team”.

HTML5 drawing tool in one night

Driving home from the skatepark I called my wife super giddy. ”Honey, I may be going indie sooner than we planned”. I gave her the rundown of the potential project Josh and I just spoke about, and let her know I had some homework to do. That night I went home and built out a distant cousin of the endless mural project.

HTML5 drawing tool powered by ASPX and MySQL

EFDRAW is a really simple HTML5 drawing tool powered by ASP.NET and MySQL. It has most of the features of the mural ( draw, save, replay, share ), but this was only a proof of concept. This was my first dive into HTML5 development, and it’s pretty sweet.

If you’re interested in HTML5 drawing tools, feel free to play around with EFDRAW, view source, help yourself.

There’s one thing…. Azure

A few days after building EFDRAW my band The Compilers played at Ignite Denver 7. Right before starting our first set my phone rings and it’s Josh! OMG I think, this is either the “you got it” or the “sorry bud, we’ll skate again” call. I decide to take the call even though we were locked and loaded, standing on stage with our gear waiting for the house music to go down. I answer and it’s Josh, but not the usual hyperactive Josh I’m accustomed to. I ask about the gig and he says “Well, there’s one thing. We have to use Azure”.

I let him know I’ve worked with other cloud platforms already, just not Microsoft’s. So we talk a little more and Josh passes the phone to Branden so we can talk 0s and 1s. After talking to Branden “mega brain” Hall for a few minutes he asks if I can do this. I tell him yes, he says yes, I get excited, he gets excited. Branden passed me back to Josh and I’m in shock at this point.

Now the boring stuff

So that’s the story of how I landed the Endless Mural gig, now the boring technical details.

The drawing portion of the mural was built by Branden Hall of Automata Studios. I did the backend which is made up of ASP.NET ( C# ), SQL Azure, and Windows Azure. We’re using Azure blob storage to save and serve up the PNGs created at the mural. To access SQL server, I wrote a super lightweight data access library using all native .NET.

For the most part the backend was very much like every other .NET SQL Server project I build, but Azure did introduce a few gotchas.

The publishing and management of your cloud site mainly goes through http://windows.azure.com/.
You can deploy your site from Visual Studio which proved to be immensely helpful after my Azure deploy package grew beyond 100 MB.
You can access SQL Azure directly from SQL 2008+ management tools.
You can not FTP single files up to the cloud, only the full ball of wax.
You can still use web.config for configuration storage, but Azure also has it’s own version of web.config.
If you need to edit your settings after deploying, store those settings in your Azure service config, not web.config
SQL Azure requires all tables to use clustered indexes
SQL Azure has it’s own TSQL restrictions ( not many, but be aware )
On average, doing a full republish of an Azure site took a full hour.

I could probably ramble on and on about Azure, but I’ll cut it short. If you happen to have any questions about Azure feel free to hit me up or leave a comment. I would also like to say that I know Microsoft is and has been actively improving Azure by the day. The state of Azure today is most likely even better than when we built the mural, so my experiences may not be your own.

The toolbox

Windows Azure SDK
Windows Azure Platform Kit June 2010
Windows Azure Tools for Visual Studio ( v1.2 )
Microsoft Seadragon Ajax library
Microsoft SQL Server 2008 R2
Microsoft SQL Azure
ASP.NET 4 ( C# )
Windows Azure
Azure Storage Explorer

Here is the toolbox that Branden used on the client side.

Hotlinks from the server guy

It’s a wrap

This project was the most concentrated five weeks I’ve had in quite some time. I still wonder if we were only given five weeks because this was an HTML5 project. Either way, the mural team made some magic and now you can too. If you’re like me and just want to doodle, go make some art at the mural. If you’re a developer interested in HTML5 and Javascript programming, go check out the javascript library okapi.js which Branden Hall recently open sourced.

Also be sure to visit the magicians, I mean artists, who made the amazing patterns you see when using the mural. I’m a life long doodler, but can’t art myself out of a paper bag.

Evgeny Kiselev

Evgeny Kiselev - www.ekiselev.com

Guilherme Marconi

Guilherme Marconi - brain.marconi.nu

Joshua Davis

Joshua Davis - www.joshuadavis.com

Matt Lyon

Matt Lyon - www.c8six.com

And lastly I put up a photo album on Facebook of all my camera phone pictures from the trip. Check out the endlessmural photo album.

How to add new Role to existing Azure Cloud Service

Eric Fickes — Thu, 19 Aug 2010 19:58:09 +0000

I know this is an easy one, but I’ll forget it if I don’t write this down.

When working with Azure projects in Visual Studio, you can add new Roles to existing Service projects like this.

Right click the Roles folder in your service project
Left click Add >
Left click on the type of Role you want to add to your project

Permalink

| Leave a comment

Upload to ASP.NET from HTML, Flash, or Flex clients

Eric Fickes — Thu, 12 Aug 2010 03:18:49 +0000

File uploading has been a hot topic during my time as an internet programmer. In the classic ASP days this was a bit of a task to build and get correct. Nowadays both Adobe’s Coldfusion and Microsoft’s ASP.NET both have built in file uploader tags ( server controls ) that handle this with ease.

This is great, but what happens when you have a mixed bag of clients that all need to upload to the same location? Sometimes I work with completely ASP.NET or CF web apps, but more often than not I’m dealing with Flash clients as well as HTML clients.

Recently I ran into this upload scenario and built this simple ASP.NET uploader script. This feels a bit old school since it uses .NET’s built in Request.Files collection, instead of a fancy new ‘all in one’ server control, but I actually prefer this method.

Here’s all you need :

// Check for posted files
for (int xx = 0; xx < Request.Files.Count; xx++)
{
    // UPLOAD FILE
    HttpPostedFile _file = Request.Files[xx];

    // make sure we're not finding empty filename
    if (_file.FileName.Trim() != string.Empty)
    {
        // NOTE : IE < 8 reports full path of file, not just filename
        // Parse out filename, then create full upload path
        var fileName = _file.FileName;
        if (fileName.Contains("\\"))
        {
            var aFile = fileName.Split('\\');
            fileName = aFile[ aFile.Length - 1 ].ToString();
        }

        // create full save path for uploaded file
        var full_file_path = Server.MapPath( UP_FOLDER ) + "\\" + fileName;

        try
        {
            // save file to server
            _file.SaveAs(full_file_path);
        }
        catch (Exception exc)
        {
            var emsg = "Unable to upload file : " + exc.Message;

            Response.Write( emsg );
            Response.Flush();
            Response.End();
        }

        // show result
        Response.Write( _file.FileName + " uploaded! 
" );
    }
}

That’s all there is to it codewise. Before using this code you will need to give the NETWORK SERVICES user write permissions to your upload folder. Other than that, that’s all she wrote!

Here is a zip of all the code for you to download.

Inside this zip you will find :

flashclient.fla – Flash upload client ( *be sure to update the upload path before building )
flexclient.mxml – Flex upload client ( *also update upload path before building )
uploader.aspx - ASP.NET file upload handler
uploadform.html - sample HTML upload form ( again, update path )

Hope somebody finds this useful.

How to show line numbers in Visual Studio 2010

Eric Fickes — Tue, 03 Aug 2010 19:11:35 +0000

I’ve been using Visual Studio since forever, yet it always takes me a while to remember how to show line numbers. It’s especially hard to remember after a fresh install of Visual Studio. Assuming you have it installed and open, here’s how to display line numbers in your code.

Click Tools in the menu bar
Options
Expand Text Editor ( in the popup window )
Click ‘All Languages’
Check the ‘Line numbers’ box under the Display heading ( on the right )
Click OK
Happy Happy Joy Joy!

Add Eclipse’s Open Resource to Visual Studio 2010

Eric Fickes — Wed, 16 Jun 2010 19:34:12 +0000

One of my favorite features of the Eclipse IDE is ‘Open Resource’ ( Ctrl + Shift + R ).

opens this sweet timesaver" width="615" height="515" />

Don't point and click to your files, just type their name

If you’re unfamiliar with this, it’s a File Open dialog that let’s you type the name of the file you’re looking for, instead of requiring you to point and click your way to the file. This is one of the few features I still can’t believe Visual Studio doesn’t have built in. Now I’ve had other MS experts show me similar “quick find” features of Visual Studio, but it’s still not as easy as Ctrl+Shift+R > type the filename.

When I was using Visual Studio 2008 I came across the Sonic File Finder plugin and I was hooked. Then I upgraded to Visual Studio 2010 and my plugin went away. Today I solved my quick open plugin issue by browsing the Visual Studio Gallery and installing Quick Open File. This quick open plugin does exactly what Eclipse’ Open Resource does, and it’s a good bit simpler than Sonic File Finder. Now that I’ve got the plugin installed, the next step is to configure Visual Studio to open this plugin when I hit the Ctrl + Shirt + R keyboard combination.

Add Ctrl+Shift+R to Visual Studio

Fire up Visual Studio
Click Tools > Options > Environment > Keyboard
You should now be at the window for assigning keyboard shortcuts
Tools > Options > Environment > Keyboard" src="http://ericfickes.com/wp-content/uploads/2010/06/vs2010-options-keyboard-Quick.png" alt="This is where you edit keyboard shortcuts in Visual Studio" width="771" height="458" />
Type “Quick” into the Show commands containing box
Click inside the “Press shortcut keys” box, and then press Ctrl + Shift + R on your keyboard
Assuming you’ve set this to Global, you are now good to go.

**NOTE : When assigning a keyboard shortcut in Visual Studio, you want to make sure your new shortcut isn’t already assigned to a different command. If this is the case, you should remove your shortcut assignment from the other command before assigning to your new command. This dialog will show you what is already assigned to a keyboard combination like so.

Assuming you made it this far, pressing Ctrl + Shift + R in Visual Studio should now show you this Quick File Open dialog.

There you go, quick open in Eclipse and Visual Studio!

Use SQL to insert a label in front of a DataBound list

Eric Fickes — Thu, 10 Jun 2010 02:35:27 +0000

Here’s a clever little solution I would like to add to the book of ‘get it done’. While this particular example uses ASP.NET controls, this concept really applies to any language that supports DataBinding to a control.

The base concept is using your knowledge of SQL’s UNION operator to add a temp value to the beginning of a list of data from a sql query. In the past I’ve done this countless times via code, and recently I didn’t have the time to do this, so I updated the query to a UNION, and I was good to go.

Now I’m not selling this as a ‘best practice’, but I do consider this one more reason why it’s good to know SQL.

Problem : Using a SQLDataSource to populate a DropDown component, how do you inject a spacer value in position 0? EX : “- select value -”

Solution : Inject your spacer value in your SelectCommand via sql’s UNION operator

ComboBox

DataSource

What this solution gets you.

1. Your spacer value shows up in position 0 ( because the first character is – and not alphanumeric )

2. Auto ViewState caching ( EG : going straight .NET solution, .NET handles persisting your dropdown selection between postbacks )

* in this sample, the connectionString for the SqlDataSource is set in code.

DataBind a List of custom classes to an ASP:ListBox control

Eric Fickes — Fri, 09 Apr 2010 20:09:16 +0000

Recently I was scratching my head at this error from the .NET Framework

DataBinding: ‘MyApp.vo.customVO’ does not contain a property with the name ‘Name’

I was stumped because my custom VO class did in fact have a public property called Name. After many trials and tribulations I figured out that .NET didn’t like how I structured my custom class.

Here is what my original custom class looked like.

namespace MyApp.vo
{
    public class customVO
    {
        public Int32 id  = 0;
        public DateTime time  = new DateTime();
        public string Name  = string.Empty;
        public string DeviceType  = string.Empty;
        public string ObjectIDs  = string.Empty;
    }
}

Luckily I have JetBrains ReSharper installed, and it suggested using C#’s Auto-Implemented properties. This is the one thing I hadn’t thought about trying, and it ended up being the fix! My new custom VO class now looks like this.

namespace MyApp.vo
{
    public class customVO
    {
        public Int32 id { get; set; }
        public DateTime time { get; set; }
        public string DeviceType { get; set; }
        public string ObjectIDs { get; set; }
        public string Name { get; set; }
    }
}

So if you find yourself running into this error while trying to DataBind a collection of custom classes to a ListBox or similar control, have a look at your custom class and see if you can convert it over to using auto-implement properties as well.

Now I’m not suggesting this is the only way to DataBind a List of custom classes to a ListBox, but it solved my problem and let me do direct databinding from my service call without having to do any pre-processing on my list.

Hope this helps someone else.

How to TWEET from a SQL CLR Stored Procedure

Eric Fickes — Thu, 04 Mar 2010 01:10:58 +0000

Here’s another SQL Server 2005 geek out moment, a CLR SPROC that tweets to Twitter. Big shoutout to Danny Battison for sharing the C# code to post to Twitter. This is what got me started on the C# side of things. Also, you can skip all my ramblings here and just download code here and fire it up. The zip file contains all the source code, the compiled assembly file, and install.sql that shows you how to hook this up.

Being the SQL junky that I am, I was interested in trying out SQL Server’s new CLR Stored Procedures. A CLR sproc is a stored procedure that is able to use .net code that you’ve compiled into an assembly file. For you classic ASP heads out there, think of the ASP page being the sproc, and the .net assembly being your COM object ( cringe, let’s talk about classic ASP ). While there are plenty of great articles on writing CLR stored procedures, I’m going to breeze through the code that makes up this project.

First make a .net class library that will be compiled into an assembly file.

using System;
using Microsoft.SqlServer.Server;
using System.Data.SqlTypes;
using System.Net;
using System.IO;
using System.Text.RegularExpressions;

/// 
/// This assembly will be used by a SQL2005 SPROC to communicate
/// with twitter.com
/// 
public sealed class tweetsproc
{
    /*
     * TWITTER CODE BORROWED FROM :
     *  http://www.dreamincode.net/code/snippet2556.htm
     *
     * A function to post an update to Twitter programmatically
     * Author: Danny Battison
     * Contact: gabehabe@hotmail.com
     */

    /// 
    /// Post an update to a Twitter acount
    /// 
    /// The username of the account
    /// The password of the account
    /// The status to post
    [Microsoft.SqlServer.Server.SqlProcedure(Name = "PostTweet")]
    //public static void PostTweet( string username, string password, string tweet)
    public static void PostTweet(   SqlString username,
                                    SqlString password,
                                    SqlString tweet)
    {
        try
        {
            // encode the username/password
            string user = Convert.ToBase64String(System.Text.Encoding.UTF8.GetBytes(username.ToString() + ":" + password.ToString()));
            // determine what we want to upload as a status
            byte[] bytes = System.Text.Encoding.ASCII.GetBytes("status=" + tweet.ToString());

            // Create a WebPermission.
            WebPermission myWebPermission1 = new WebPermission();

            // Allow Connect access to the specified URLs.
            myWebPermission1.AddPermission(NetworkAccess.Connect,new Regex("http://www\\.twitter\\.com/.*",
              RegexOptions.Compiled | RegexOptions.IgnoreCase | RegexOptions.Singleline));

            myWebPermission1.Demand();

            // connect with the update page
            HttpWebRequest request = (HttpWebRequest)WebRequest.Create("http://twitter.com/statuses/update.xml");

            // set the method to POST
            request.Method = "POST";
            request.ServicePoint.Expect100Continue = false; // thanks to argodev for this recent change!
            // set the authorisation levels
            request.Headers.Add("Authorization", "Basic " + user);
            request.ContentType = "application/x-www-form-urlencoded";
            // set the length of the content
            request.ContentLength = bytes.Length;

            // set up the stream
            Stream reqStream = request.GetRequestStream();
            // write to the stream
            reqStream.Write(bytes, 0, bytes.Length);
            // close the stream
            reqStream.Close();

            // Let's get the Response from Twitter
            var webresp = request.GetResponse();
            // Let's read the Response
            var sread = new StreamReader( webresp.GetResponseStream() );

            // Use SqlContext to return data to the QueryAnalyzer results window
            SqlContext.Pipe.Send( sread.ReadToEnd() );

        }
        catch (Exception exc)
        {
            // send error back
            SqlContext.Pipe.Send(exc.Message);
        }
    }
}

Here’s the app.config for this assembly.

Once you build this project, you should have your assembly ( tweetsproc.dll ) which will be used by your CLR Sproc. Now it’s time to do some SQL server work.

Enable CLR access for SQL server

EXEC sp_configure @configname = 'clr enabled', @configvalue = 1
RECONFIGURE WITH OVERRIDE
GO

Create the SQL Assembly

CREATE ASSEMBLY tweetsproc_clr_assembly from 'C:\Users\eric\Desktop\blog\tweetsproc.dll'
WITH PERMISSION_SET = EXTERNAL_ACCESS
GO

Create your SPROC

CREATE PROC tweetsproc_tweet(	@username as nvarchar(50),
								@password as nvarchar(50),
								@tweet as nvarchar(140)
							)
AS
	-- [Assembly Name].[Class Name].[CLR function Name]
	EXTERNAL NAME tweetsproc_clr_assembly.tweetsproc.PostTweet
GO

Tweet from a sproc

EXEC tweetsproc_tweet 'TwitterUsername', 'TwitterPassword', 'Hey @ericfickes, I''m tweeting from my database too!'

Running this sproc returns the XML response from Twitter.

Tweetsproc returns the full Twitter response

That’s one sample CLR SPROC in the bank! Feel free to download this code and try it out yourself. I’d love to get some feedback on anybody looking to use this for real. While tweeting from a stored procedure probably isn’t a hot topic for anybody, this is a nice teaser for what you can do with CLR sprocs now.

Download code here.

Inside this zip you’ll find this.

install.sql is everything you need to install this on your database
tweetsproc.dll is the twitter assembly used by the sproc
tweetsproc folder is the .net class library project

Everything you need to get TWEETING from a sproc

Coldfusion and ASP.NET coexisting on IIS, where’d WebResource.axd go?

Eric Fickes — Mon, 22 Feb 2010 19:33:39 +0000

My Monday morning WTF comes from IIS7 on Windows 7. I recently installed Coldfusion9 on this machine which has a handful of existing ASP.NET 3.5 web applications. The problem I ran into came after installing Coldfusion9 and electing to configure all IIS websites to work with CF. While that is convenient, it ended up breaking one of my ASP.NET applications that was using ASP Validation controls on a login form. Now that things are figured out, here are the details.

Firing up my ASP.NET application gives me the error message :

The WebResource.axd handler must be registered in the configuration to process this request

WebResource.axd handler must be registered

Obviously all I could think is WTF?!?!? since this application worked on Friday and now it is broken. The first thing I want to point out is that in my situation, the suggested solution of mapping WebResource.axd in the httpHandlers section of my web.config did not help this problem. After some googling I cam across this post on the IIS.NET forums which put me on the right track. You can read the details there if you want a good background on MS’ response and other users running CF and ASP.NET on the same box.

I’m happy to say I have three workarounds for this issue. Hopefully these will help you as well.

1. Change your AppPool to run in Classic Mode

In inetmgr, put your web application into it’s own Application Pool ( unless it’s already in it’s own pool )
Change that AppPool’s Managed pipeline mode to “Classic”
You should be good to go

Managed Pipeline Mode" src="http://ericfickes.com/wp-content/uploads/2010/02/change-apppool-2-classic-300x266.png" alt="Change Managed Pipeline Mode to Classic" width="300" height="266" />

Classic mode is for compatibility ( think IIS6 )

2. Stop using ASP Validation controls

All ASP.NET Validation controls are hosted by WebResource.axd. If you stop using ASP Validator controls, the server will stop asking for WebResource.axd.

Removing ASP Validator controls should remove this error

3. Remove Coldfusion handler mappings from your ASP.NET site

If your ASP.NET app isn’t using Coldfusion, I would suggest doing this as your solution. Even if you do need Coldfusion in your ASP.NET app, you could still host your CF app in it’s own Virtual Directory and request if via ASP.NET.

Open inetmgr
Select your web app on the left ( under Default Web Site )
In Features View on the right, double click Handler Mappings
Sort your Handler Mappings by Name, and remove all entries titled “AboMapperCustom-*”
Now your ASP.NET should work like a champ.

IIS7 Handler Mappings

Coldfusion9 Handler Mappings

Monday WTF solved. Now to get back to pushing buttons.