Bryan Sampica

Async File Uploads in MVC 4

2013-01-15T20:03:00Z

Once and a while, I come across a problem that requires some "solving". It's a different scenario that the typical "I've done this before, lets do it again", where you may make something better, or more efficient, or refactor it in some way.

Async file uploads have always been tricky, there are out of the box controls that work well, but the good ones aren't all free. Some of them dont work, or only work in specific scenarios, and to be honest, anything requiring the swfUpload component is just a pain inside an ASP.NET application - as it operates completly out of band and process.

Enter: Ajax and Jquery, and a little component / framework called the Jquery-File-Upload by BlueImp (https://github.com/blueimp/jQuery-File-Upload)

It took me a day or two to get the whole thing working as I would expect, while there are some limitations, I decided I could live them them (IE less than version 10 wont support true progress).

Overall, here's the important bits:

We needed a good way to drop this control into any page as needed, and have it work
It had to work within the MVC framework, without anything crazy like generic handlers
It had to be asyncronous in nature and not require a page postback
It had to be customizable from an HTML / CSS standpoint so that we can easily fit the look into our application

So, how did we accomplish all this? Overall, it wasn't to difficult, the hardest part was dealing with the inconsitancies of each browser, and the way it reported progress and other such things

Here it is running in IE:

Here it is running in Chrome: (Note: In Chrome, Firefox, and Safari you'll get a multiple file selection, in IE 9 and under, you wont. IE 10 you will)

Source code is available:

DOWNOAD: MvcTesting.zip - note, I removed the nuget packages from the root of the solution folder (to keep the size down), please resolve reference issues by installing the appropriate package.

Credits:

ASP.NET MVC 4 w/ Razor View Engine

Twitter Bootstrap

jQuery & jQuery UI

jQuery-File-Upload (Blue Imp)

Silverlight 4 Scrollviewer & Keeping items in view

2010-10-14T22:02:10Z

Just a short note today – mostly so I can look up later what I’ve done to get this working, but also to share the knowledge!

The Problem:

When using Silverlight 4 and a Scrollviewer (not sure if WPF has the same issue, but the fix should be similar), if your tabbing through the form, or have some type of validation summary, which allows clicking the error in the summary to focus the item, the scrollviewer does not inherently bring an item into view.

The Solution:

The good news, this is fixed quite easily, using Silverlight 4’s behaviors, which I absolutely love to work with.

The Setup:

<ScrollViewer Height="300">
        <StackPanel>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
            <Grid Height="Auto">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Label" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,15,0" />
                <TextBox Grid.Column="1" />
            </Grid>
        </StackPanel>
    </ScrollViewer>

This creates a LONG Form – that will scroll if we display it in a page, I know, I probably went overboard on my example. That’s what happens when you copy and paste a grid over and over, it’s kinda fun.

The Code:

Ok, so now we get to where we need to create our behavior. It’s pretty simple, so I wont go into depth in explaining it. It’s actually borrowed from an internet example, and modified for my use: If you created it, let me know and I’ll credit you.

    public class ScrollIntoView : Behavior<ScrollViewer>
    {
        protected override void OnAttached()
        {
            base.OnAttached();
            this.AssociatedObject.Loaded += new RoutedEventHandler(AssociatedObject_Loaded);
        }

        protected override void OnDetaching()
        {
            base.OnDetaching();
            this.AssociatedObject.Loaded -= new RoutedEventHandler(AssociatedObject_Loaded);
            var controls = this.AssociatedObject.Descendants();
            foreach (FrameworkElement control in controls)
            {
                control.GotFocus -= new RoutedEventHandler(control_GotFocus);
            }
        }

        private void AssociatedObject_Loaded(object sender, RoutedEventArgs e)
        {
            var controls = this.AssociatedObject.Descendants();
            foreach (FrameworkElement control in controls)
            {
                control.GotFocus += new RoutedEventHandler(control_GotFocus);
            }
        }

        private void control_GotFocus(object sender, RoutedEventArgs e)
        {
            FrameworkElement element = e.OriginalSource as FrameworkElement;
            ScrollViewer sv = this.AssociatedObject;
            GeneralTransform gt = element.TransformToVisual(sv);
            Point offset = gt.Transform(new Point(0, 0));
            Double controlTop = offset.Y;

            if (controlTop < 0 || controlTop + element.ActualHeight > sv.ViewportHeight)
            {
                double newOffset = controlTop + sv.VerticalOffset;
                if (newOffset > (sv.ViewportHeight / 2))
                {
                    newOffset -= (sv.ViewportHeight / 2);
                }
                else
                {
                    newOffset = 0;
                }

                if (sv.VerticalOffset != newOffset)
                {
                    sv.ScrollToVerticalOffset(newOffset);
                }
            }
        }
    }

I should note, that this code requires the LinqToVisualTree library found and explained @ http://www.scottlogic.co.uk/blog/colin/2010/03/linq-to-visual-tree/

If you don’t use the LinqToVisualTree library in your projects, you’re making your life very difficult.

Now that we’ve got our behavior written, which allows us to wire it up to a scrollviewer (which is nice! We don’t have to attach it to every single element inside the scrollviewer), we can simply add it to the scrollviewer as such:

Declare the namespace in the page / usercontrol where you intent to use it:

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

Add the behavior to the scrollviewer in question:

<i:Interaction.Behaviors>
         <IQ_Client_Helpers:ScrollIntoView/>
 </i:Interaction.Behaviors>

Good luck! Have fun with this one.

Bryan

Silverlight 4.0 Wizard Custom Control

2010-07-21T14:27:30Z

It’s common in my LOB applications to come across situations where I invent something, and later think…this would be useful for the community.

This is one of those cases. Most line of business applications require some sort of Linear process, or stepped process, and while there are about 8 billion ways to accomplish this, having a custom control that encapsulates most of the work of actually “stepping”, loading the correct page, etc – is nice.

Enter….the Silverlight Wizard Control

It’s pretty thin, in this demo implementation. It provides a base class to define a wizard step, the Wizard Custom Control, and a WizardManager that exposes some standard process operations and properties.

This is provided as source control, to use and modify as you see fit. To get you started, the control is attached to a demo Silverlight 4.0 project.

Requires:

Visual Studio 2010

Silverlight 4.0

-Good Luck: Post back with your implementations, I’d love to see them!

Download Demo App

Global BusyIndicator for DomainContext

2010-07-09T19:18:00Z

Just a short post to help out some poor soul dealing with some of the same issues I did before it hit me like a cream pie (right in the face).

The Scenario:

I’ve got a Silverlight 4 LOB Application, that will need to heavily use a BusyIndicator during loading operations (when I cant do them in the background) to keep users from clicking things and getting confused.

When I fired up the application months and months ago, I had the foresight to include the busy indicator in a global accessible place to use it as part of the main application framework.

If you have not done this before, you can implement it as follows:

Open your App.xaml.cs file inside your project. The overall idea is pretty simple. Rather than loading a “Grid” into the Silverlight object container, we are going to load a Busy Indicator, and then put our main loading page inside that. Here’s how:

First, lets wire up an BusyIndicator

public partial class App : Application

        private BusyIndicator progressIndicator;

There are several ways you could do this, this is just the way I chose to. You’ll need to make sure you have a reference to, and a using statement to the following assembly

using System.Windows.Controls;

Once we have our indicator wired up, it’s pretty easy to shift things around a little, and load that into a reserved property setup for us by the nice Silverlight Developers, called the “RootVisual”

public App()
{
      this.Startup += this.Application_Startup;
           
      InitializeComponent();
}

private void Application_Startup(object sender, StartupEventArgs e)
{
        InitializeRootVisual();            
}

 protected virtual void InitializeRootVisual(bool isStartup)
{
            this.progressIndicator = new BusyIndicator();
            
            this.Resources.Add("MainProgress", this.progressIndicator);
            this.progressIndicator.HorizontalAlignment = HorizontalAlignment.Stretch;
            this.progressIndicator.VerticalAlignment = VerticalAlignment.Stretch;

            //Replace new MainPage() with the name of your starting xaml page;
            this.progressIndicator.Content = new MainPage();
        

            this.RootVisual = this.progressIndicator;
 }

Ok, so now that we have this wired up to use, you can test its working by setting the progressIndicator.IsBusy property to either “true” or “false” to toggle it, and see it running in application.

At this point though, it’s far from useful, we need it to be semi aware of what’s going on, when it needs to show, and when it should go away.

Wiring it to your domain context:

If your application is like mine, I’m not using any fancy context managers, or factory context handlers giving me an operating instance. Rather I instantiate a context in a page when I need to do something, and terminate and dispose it when I’m done. To keep hold of what’s going on with my context on the client side, I monitor calls coming into the server and make sure none of them go errant, but thats another post, and that does not help a client side progress bar. So what do we do? Good question:

The "reference” that we get through generated code, is lucky made partial so we are able to get our fingers into it on the client side. We can’t do a whole lot, but we can do what we need to do:

So here’s how I got started. In my Client Side (Silverlight) project, I create a new class with the same name as my server side context. In this case we’ll refer to it as “MyDomainContext”

using System;
using System.Windows.Controls;
using IQ.Client;

namespace My.ServerProject.Services
{
    public partial class MyDomainContext
    {
        BusyIndicator busy = (BusyIndicator)App.Current.RootVisual;
        public override System.ServiceModel.DomainServices.Client.LoadOperation Load(System.ServiceModel.DomainServices.Client.EntityQuery query, System.ServiceModel.DomainServices.Client.LoadBehavior loadBehavior, Action<System.ServiceModel.DomainServices.Client.LoadOperation> callback, object userState)
        {
            this.PropertyChanged -= new System.ComponentModel.PropertyChangedEventHandler(MyDomainContext_PropertyChanged);
            this.PropertyChanged += new System.ComponentModel.PropertyChangedEventHandler(MyDomainContext_PropertyChanged);
              
            return base.Load(query, loadBehavior, callback, userState);
        }

        void MyDomainContext_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (e.PropertyName == "IsLoading" && this.IsLoading == true)
            {
                busy.IsBusy = true;
            }
            else if (e.PropertyName == "IsLoading" && this.IsLoading == false)
            {
                busy.IsBusy = false;
            }
        }
    }
}

Keep in mind, this is ALL on the client side. Dont forget to change your namespace to the server side namespace. If you’re a little confused as to what’s going on, don’t feel bad. It took me a minute to wrap my head around it too. You are NOT sharing a partial class across a service boundary.

This works because of the Proxy class generated code that having a RIA services project throws into the Silverlight application. The partial class gets generated in a hidden file, and we are going to extend the partial.

You can see by the class extension, that we are waiting for a load operation to be called, and then tapping into the PropertyChanged Callback. We remove an existing reference of the callback and wire up a new one so we don’t keep adding callbacks on each subsequent call.

Note:

This is just a quick example external to my actual running project, I am well aware that adding and removing event handlers like that will not work when there is more than one calling thread…etc. Use this to create your own implementation that works in your scenario.

Good Luck!

Bryan Sampica

Twtpoll auto voter

2010-06-24T23:50:10Z

Just a short entry today on a fun little project I came across. I had a friend that for “educational purposes” wanted to know how to write a little WPF program that would Auto Vote on a twtpoll poll that was enabled for a 24 hour period.

To plug twtpoll a little, it’s a pretty neat system. It allows a user to simply fire up a poll and get it running with instant results rather quickly, and allows short urls with no login voting. I like the system.

www.twtpoll.com

Normally, a project like this isn't worth of a blog, but primarily doing Silverlight development these days,I found myself using lots of skills that I hadn’t touched in a while, as a good refresher, it was kind of fun to hack through it.

Ok, so to get started, the tools I used:

Fiddler 2 : http://www.fiddlertool.com/fiddler/version.asp

IE 8 Developer Extensions

Visual Studio 2010: http://www.microsoft.com/visualstudio/en-us/visual-studio-2010-launch?CR_CC=100340688&WT.mc_id=SEARCH&WT.srch=1&CR_SCC=100340688

C# / .NET 4.0 / WPF

Really the .NET 4.0 and the WPF components aren’t required, a windows forms app using .NET 2.0 would have been fine, but why go backwards.

So my first step in this process, was to head out to the Polls URL and take a look at the HTML. I did this using IE 8 and “View Source” - IE 8 has a great html source viewer that allowed me to see we were using a typical form post method to submit the poll without any weird javascript callbacks or anything strange.

I’ve created a temporary poll just to test the application located here:

http://twtpoll.com/ov097x

Here we see the line of HTML we were looking for

Once we know that we can actually do the form post. It’s time to fire up Fiddler, this gives us all the info we need to actually create our application to do the submission automatically.

Submitting the form out on twtpoll, we can see that we get a Fiddler response line of the form post. This is exactaly what we were looking for, which exposes all the form variables that were submitted as part of the post.

Great, now on to our program! Keep track of these form variables, you’ll need them when we do the FORM POST through our C# application

At this point, I fire up Visual Studio 2010 and open a brand new WPF project.

The meat of the project is accomplished in this little class, which is nothing new or revolutionary. It wires up a new web request through the System.Net namespace, and uses some URL encoding to make sure there is no weirdness when adding the form variables to the post.

In this example the posting URL is hardcoded, but this could absolutely be configurable.

 public class WebPostRequest

        WebRequest theRequest;

        HttpWebResponse theResponse;

        ArrayList theQueryData;

        public WebPostRequest(string url)

            theRequest = WebRequest.Create(url);

            theRequest.Method = "POST";

            theQueryData = new ArrayList();

        public void add(string key, string value)

            theQueryData.Add(String.Format("{0}={1}", key, HttpUtility.UrlEncode(value)));

        public string GetResponse()

            theRequest.ContentType = "application/x-www-form-urlencoded";

            string Parameters = String.Join("&", (String[])theQueryData.ToArray(typeof(string)));

            theRequest.ContentLength = Parameters.Length;

            StreamWriter sw = new StreamWriter(theRequest.GetRequestStream());

            sw.Write(Parameters);

            sw.Close();

            theResponse = (HttpWebResponse)theRequest.GetResponse();

            StreamReader sr = new StreamReader(theResponse.GetResponseStream());

            return sr.ReadToEnd();

Once you’ve got this class implemented into your project, it’s pretty simple to utilize: In my example I’ve enabled some threading to vote LOTS. :)

Here’s the code behind the form.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

using AutoVoter.Members;

using System.Threading;

using System.Collections.ObjectModel;

namespace Voter

    /// <summary>

    /// Interaction logic for MainWindow.xaml

    /// </summary>

    public partial class MainWindow : Window

        int voteCount = 0;

        ObservableCollection<Thread> threads;

        private delegate void UpdateTextBox(string newValue);

        UpdateTextBox textUpdate;

        public MainWindow()

            InitializeComponent();

            threads = new ObservableCollection<Thread>();

            textUpdate = new UpdateTextBox(DoTextUpdate);

            this.Loaded += new RoutedEventHandler(MainWindow_Loaded);

        void MainWindow_Loaded(object sender, RoutedEventArgs e)

            lb1.ItemsSource = threads;

        private void DoTextUpdate(string newValue)

            this.Title = voteCount.ToString();

        private void Button_Click(object sender, RoutedEventArgs e)

            for (int i = 0; i <= 20; i++)

                Thread t = new Thread(DoVote);

                t.Name = i.ToString();

                t.Priority = ThreadPriority.Normal;

                t.IsBackground = true;

                threads.Add(t);

                t.Start();

        private void DoVote()

            while (true)

                WebPostRequest myPost = new WebPostRequest(@"http://twtpoll.com/php/form_handler_20.php");

                myPost.add("1_am_id", "738051");

                myPost.add("1_q", "86107");

                myPost.add("2_am_id", "738056");

                myPost.add("2_q", "86110");

                myPost.add("3_am_id", "738054");

                myPost.add("3_q", "86109");

                myPost.add("4_am_id", "73057");

                myPost.add("4_q", "86111");

                myPost.add("s", "837");

                myPost.add("psi", "102409");

                myPost.add("tt", "edq0ru");

                myPost.add("sif", "0");

                myPost.add("qt", "0,0,0,0");

                myPost.add("rf", "0,0,0,0,0");

                Thread.Sleep(100);

try

                    myPost.GetResponse();

                    voteCount++;

                    Dispatcher.BeginInvoke(textUpdate, voteCount.ToString());

                catch

                    //Ignore the Exception

And finally, the least important part. My horrendous UI, wired up specifically to get the job done, no more and no less:

<Window x:Class="Voter.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ListBox Margin="0,0,0,90" x:Name="lb1" />
        <Button Margin="123,227,138,12" Content="Vote" Click="Button_Click" />
    </Grid>
</Window>

Have fun with this, good luck and happy coding,

Bryan

Silverlight 4 Container Control

2010-01-23T00:27:02Z

Today I went looking for a simple skinable container control that I could use in Silverlight 4. I of course checked the framework first, and didn’t find exactly what I was looking for. I then checked the Silverlight Toolkit for Silverlight 4, which has some really cool container controls, but again, nothing specifically like I was looking for.

My requirements weren’t complicated or lengthy:

Colorable Header
Header Text Area controllable outside the control
Flexible content area, capable of hosting other XAML Controls

My first attempt lead me towards a usercontrol, with some clever dependency property binding. This method requires quite a bit of work, but I believe is the most flexible. Capable of hosting templated controls inside it, and able to host a codebehind file capable of responding to custom properties, events, or other goodies specific to the containers interactivity.

Keeping in mind, we could have rolled a fully custom control in a Silverlight Class Library for this requirement, which I’ve done often in the past to extend the framework, this isn't the solution I was looking for in this simple circumstance.

The basic usercontrol gets something something like this. Pretty thin, but thats just the way I like it. no clutter to get in the way of what we are trying to accomplish.

Grid x:Name="LayoutRoot" Background="White">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</Border>

</Border>

</Grid>

With a few clever dependency properties, and a little binding magic, we enable some “Container Like” functionality.

public static readonly DependencyProperty HeaderTextProperty = DependencyProperty.Register("HeaderText", typeof(string), typeof(Container), null);

public string HeaderText

{

get { return (string)GetValue(HeaderTextProperty); }

set { SetValue(HeaderTextProperty, value); }

}

public static readonly DependencyProperty HeaderColorProperty = DependencyProperty.Register("HeaderColor", typeof(object), typeof(Container), null);

public object HeaderColor

{

get { return (object)GetValue(HeaderColorProperty); }

set { SetValue(HeaderColorProperty, value); }

}

public static readonly DependencyProperty ContentAreaProperty = DependencyProperty.Register("ContentArea", typeof(object), typeof(Container), null);

public object ContentArea

{

get { return (object)GetValue(ContentAreaProperty); }

set { SetValue(ContentAreaProperty, value); }

}

public static readonly DependencyProperty BodyColorProperty = DependencyProperty.Register("BodyColor", typeof(object), typeof(Container), null);

public object BodyColor

{

get { return (object)GetValue(BodyColorProperty); }

set { SetValue(BodyColorProperty, value); }

}

These will enable some backend binding in the Usercontrol so we’ll be able to flesh out some functionality, to customize the container, from outside the usercontrol itself.

Now we need to setup some bindings inside the XAML above, so that our Layout Elements conform to the values we’d like exposed to the parent of the usercontrol.

The finished XAML inside the usercontrol looks like this:

Obviously, we could expose as many dependency properties as we’d like, and bind to them inside this control. This would expose them, as we’ll see – when we use the control later.

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</Border>

</Border>

</Grid>

Now, out on our mainpage, where we’d like to use this control, we just need to declare a namespace to point it towards the usercontrol in our project, and we’re ready to fly.

xmlns

:local="clr-namespace:CustomContainer"

Grid x:Name="LayoutRoot" Background="White">

<local:Container BodyColor="White" HeaderText="Content Space 1">

<local:Container.HeaderColor>

<LinearGradientBrush.RelativeTransform>

</TransformGroup>

</LinearGradientBrush.RelativeTransform>

</LinearGradientBrush>

</local:Container.HeaderColor>

<local:Container.ContentArea>

</local:Container.ContentArea>

</local:Container>

</Grid>

As you can see, the dependency properties we exposed, become available in the XAML, but we also get access to them in the designer.

Which is cool that Blend (And Visual Studio) will inspect the property bag and enumerate over custom dependency properties behind the scenes.

Our finished object:

Since I started writing this, I’ve also found a lightway to use the ContentControl which is provided in the Silverlight Framework. It’s harder to work with, and isn’t nearly as configurable as a usercontrol. You use TemplateBinding inside a style property (ContentControls allow you to set a template). I like this method, and it seems to work well. I can see a case for each.

Hope this makes someones day a little easier.

--Bryan

Custom Explicit and Implicit Operators in C#

2010-01-07T15:09:56Z

I recently had a friend ask me about my use of implicit operators. I’ve been using them for a while now, but don’t think they’ve gained much traction for some reason, as I rarely come across code where they’ve been implemented.

Using implicit or explicit operators at their base implementation is quite easy, there’s a few simple rules to follow when implementing them:

The operator must be enclosed in the class or partial class that it converts
It must accept only 1 parameter

There’s a few other rules, but those are the two important ones to follow when getting started.

Implicit Operator

     public class CustomerDTO

       {

           public static implicit operator CustomerDTO(Customer entityObject)

           {

           }

       }

Pretty easy to implement, and you implement explicit operators the same way. The major difference being the required explicit call on an explicit operator such as:

CustomerDTO.ToCustomer()

For this example, I’ve created a very small model of a customer object, with addresses. This model is not connected to a database, and utilizes the model designer of the Entity Framework 4.0.

I’ve also wired up to POCO (Plain old CLR Objects) objects, as DTO’s (data transfer objects). The scope of this entry is not to describe why you’d use POCO or transfer objects, but if you’re using them, and doing manual conversions this will save you a LOT of headache. :)

    public class CustomerDTO

       {

           int id { get; set; }

           string name { get; set; }

           string taxid { get; set; }

           Status active { get; set; }

           IEnumerable<AddressDTO> addresses { get; set; }

       }

       public enum Status

       {

           Inactive, //=0

           Active //=1

       }

    public class AddressDTO

        {

            int id { get; set; }

            string address1 { get; set; }

            string city { get; set; }

            string state { get; set; }

            string zip { get; set; }

            int Customerid { get; set; }

        }

Once we have our model in place, and our POCO objects created, we can get into the meat of the operators we want to implement.

Lets start with the CustomerDTO operator:

    public static implicit operator CustomerDTO(Customer entityObject)

            {

                return new CustomerDTO

                {

                    taxid = entityObject.TaxID,

                    name = entityObject.Name,

                    id = entityObject.Id,

                    addresses = entityObject.Addresses,

                    active = (Status)Enum.Parse(typeof(Status), entityObject.Active)

                };

            }

You’ll notice that when you implement this code, you receive this error:

This is exactaly where implicit operators come in! When we go and define the implicit operator for the Address, we’ll solve our problem here:

    public static implicit operator AddressDTO(Address entityAddress)

           {

               return new AddressDTO

               {

                   id = entityAddress.Id,

                   address1 = entityAddress.Address1,

                   city = entityAddress.City,

                   state = entityAddress.State,

                   zip = entityAddress.Zip,

                   Customerid = entityAddress.CustomerId

               };

           }

The finished CustomerDTO implicit operator:

    public static implicit operator CustomerDTO(Customer entityObject)

            {

                CustomerDTO returnObject = new CustomerDTO()

                {

                    taxid = entityObject.TaxID,

                    name = entityObject.Name,

                    id = entityObject.Id,

                    active = (Status)Enum.Parse(typeof(Status), entityObject.Active)

                };

                // Do this longhand for visibility

                // Without the implicit operator for AddressDTO we could not use the ().Add(e) without an implicit cast error

                entityObject.Addresses.ToList().ForEach(e => returnObject.addresses.ToList().Add(e));

                return returnObject;

            }

Now all that would be left, would be to extend the partial classes of our Entity Framework objects, such as the Customer and Address to return DTO objects

Now, anywhere in our business logic we can use implicit converstion such as

AddressDTO = Address

Address = AddressDTO

Customer = CustomerDTO

CustomerDTO = Customer

Hope that makes life easier ---

Code happy!

Silverlight 4

2009-11-19T01:26:00Z

So the Silverlight platform has been quite interesting for some time in concept, and had some niche abilities that made it perfect for streaming media, or writing simple rich applications. Around the time of Silverlight 3 things started to get interesting; as the tools developed, and the platform matured!

Enter, Silverlight 4!

For those of you that have been waiting to adopt this technology into your own development lifecycle, I truly believe your wait is over. Difficult or downright impossible things inside Silverlight applications have now been overcome. Limitations such as Printing, Local File Access, mouse scroll wheel support, and out of browser experiences.

There has been a huge stir of Silverlight 4 activity at PDC09 this year (where they handed out free multi-touch windows 7 laptops to every attendee!!!) - yea, I know. And some very cool demo's being displayed. Watching the live stream (http://microsoftpdc.com/) during conference hours, left me intrigued enough to want to fire up and start to prototype some applications on the Silverlight 4 platform.

As I went looking, it took me a little longer than I would have liked to find all the things I needed to get started and give it an accurate test drive, so below is the link (link aggregation) on how to get started.

http://silverlight.net/getstarted/silverlight-4-beta/#tools

I know...the silverlight site. Unfortunatly as a developer and MVP I'm used to finding what I need published under the MSDN downloads section, linear thinking FTW.

Dont forget as you get started to pop over to the videos located here: All VERY good information

http://silverlight.net/learn/videos/silverlight-4-beta-videos/

I'm in process of wiring up an artist (photo) gallery currently, using Silverlight 4, RIA Services, and the new Toolkit, using Visual Studio 2010 of course. So far I'm VERY impressed with the platform and where it's gone - it's finally at the point where I just dont feel like there's anything missing as previously.

Good luck!

Windows 7 RC

2009-04-27T13:00:55Z

The Windows 7 RC has been officially announced.

http://windowsteamblog.com/blogs/windows7/archive/2009/04/24/windows-7-release-candidate-update.aspx

I for one am very excited about this release. I’ve been using Windows 7 Beta on my laptop for some time now, and other than stuff easily chalked up to Beta bugs, there isn’t a single thing I’ve been disappointed with.

Prish Image Resizer

2009-03-30T14:17:00Z

Ok, this is just too cool.

Quote

Talking about Prish Image Resizer – new “Power Toy” replacement for Windows Vista/7/XP

Choose your flavor (64 bit/32 bit)

Current build: 2519

* Added custom resize to context menu.
* Control quality of JPG produced.

Previous build: 2513
* Fixed 64bit
* Fixed Unicode issues.

I just installed it today (Thanks Scott Hanselman for the link) – which takes a lot of pain out of the process. I generally run with Photoshop cs3 installed for the heavy lifting, but have been looking for something like this for a while.

Jamcast Official Beta

2009-01-30T15:12:00Z

A good friend of mine recently revealed to me that he's released a beta to the public of a neat piece of software. Jamcast allows the user to stream their digital audio across their network to devices with built in support like Playstation 3, XBox 360. I can't do the description justice, so swing over to his site and read about it. Sounds like wicked code. Even better is, it's entirely built with a .NET foundation!

http://www.sdstechnologies.com/

Building a Composite WPF Application

2008-10-30T15:48:04Z

Jeff Brand (Microsoft Evangelist from Minneapolis) has put together the start of an excellent screen cast on throwing up composite applications using the Microsoft Composite Application Library and WPF.

It's worth the 20 minutes or so to watch it -

http://slickthought.net/post/2008/10/Building-a-WPF-Composite-Application-Series-Part-1.aspx

HDC Omaha 2008 - Code and Slides

2008-10-17T15:12:00Z

This is the application I demonstrated during my WPF Line of Business presentation, as well as my slide deck.

Demonstrated:

WPF Commanding

Provider based Data Source Handling

Validation

Collections and Binding (ObservableCollection<T>)

LINQ to XML

Iowa Code Camp - Des Moines

2008-09-25T01:56:00Z

I'm proud to announce the second coming of the Iowa Code Camp. This sequence follows the amazingly successful event held in Iowa City of May of this year. Nearly 200 people attended for 90% of the event, we gave away upwards of $20,000 dollars in prizes and software and had a generally great time talking code, eating, drinking coffee and meeting our local peers.

The sucesss of version 2 is sure to rival the event - I'll see you there!

More information can be found at:

http://www.iowacodecamp.com

If you are connected to the media in any way, or would like to help sponser this amazing event - plese drop me a line, or use the contact form on the Iowa Code Camp website.

{ T }rite - Source Code Release

2008-05-20T14:20:00Z

I've had a few ask for the source control to this project, and amidst my objections, I tried to come up with a good reason not to release it and couldn't find one. :)

The goal of this project was really to push through the app and get a working model up. There are some things that still aren't implemented, or known bugs.

The refresh button does nothing!
Update gives no notification
160 char limit vs 140 (the API says 160!)
No startup notification
Weak threading model (background worker)
No friend interaction
No timeline interaction
I could go on forever on this...those are the big ones
Oh yea, no settings window at all. :)

So without further ramblings by the estranged coder....here's the source. You'll need to modify the settings to reflect your own, if you aren't sure how to do that, read the Twitter documentation on the API.

This is a source code release - this is not a finished, nor a working product and is not intended for end users.

This release includes a precompiled version of FluidKit - more information on FluidKit is available HERE.

If you modify this source, and release something of your own, I only ask that you keep the name the same and add your own spin - such as { T }rite | by Johnson or { T }rite | by Freakyuno....etc

You will need Visual Studio 2008 AND / OR Microsoft Expression Blend March 2.5 Preview installed to work with this project, and knowledge of WPF (XAML) and C#.

Source Code HERE

Good luck, feel free to get in touch with questions.

Bryan Sampica (freakyuno)