Introduction

The Final Project when running:

What Is Sencha’s MVC Application

I don’t want to spend a lot of time here explaining what Sencha does really well in there article but I feel a short explanation is helpful  (http://www.sencha.com/learn/the-mvc-application-architecture/).

So, here we go.  Basically ExtJS is a client side JavaScript framework which allows you to build the full user experience in JavaScript.  That is, all the grids, forms, tabs, etc. are all generated by a client side JavaScript library.  All that goes up and down from the server is JSON (after the JavaScript framework and code and assets are downloaded).  This means that on the client side, all the code for displaying a grid for example, reaching out for data, pushing data changes, etc. all need to be done on the client (browser).  Sencha’s ExtJS MVC pattern helps organize all these functions into a set of directories and functions that make building apps scalable.

Below is what Sencha’s app in Visual Studio looks like:

ASP.NET Implementation

The major change to the stock MVC app from Sencha is to change there Store class.  Here is the new Store Class.

And the JavaScript itself:

 1: var writer = new Ext.data.JsonWriter({

 2:     type: 'json',

 3:     encode: false,

 4:     listful: true,

 5:     writeAllFields: true,

 6:     returnJson: true

 7: });

 8:

 9: var reader = new Ext.data.JsonReader({

 10:     totalProperty: 'total',

 11:     successProperty: 'success',

 12:     idProperty: 'Id',

 13:     root: 'Data',

 14:     messageProperty: 'message'

 15: });

 16:

 17: var proxy = new Ext.data.HttpProxy({

 18:     reader: reader,

 19:     writer: writer,

 20:     type: 'ajax',

 21:     api: {

 22:         read: '/UserInfo/Get',

 23:         create: '/UserInfo/Create',

 24:         update: '/UserInfo/Update',

 25:         destroy: '/UserInfo/Delete'

 26:     },

 27:     headers: {

 28:         'Content-Type': 'application/json; charset=UTF-8'

 29:     }

 30: });

 31:

 32: Ext.define('AM.store.Users', {

 33:     extend: 'Ext.data.Store',

 34:     model: 'AM.model.User',

 35:     autoLoad: true,

 36:     paramsAsHash: true,

 37:     proxy: proxy

 38: });

The primary change is to the reader.  Notice that the API’s are defined now to point the ASP.NET controller UserInfo.  Also, the column names have been changed to start with uppercase to be consistent with public properties in ASP.NET.  That is, id,name and email are now Id,Name and Email.

Now, we need to implement the controller on the ASP.NET.  Basically, we implement GET on the read and POST on the write.  The controller class in c# is as follows: (Visual Studio Solution Explorer first, then the controller code itself)

public class UserInfoController : Controller{    public JsonResult Get(int? start, int? limit)    {        using (var db = new Db())        {            start = start.HasValue ? start.Value : 0;            limit = limit.HasValue ? limit.Value : Int32.MaxValue;            int cnt = db.Users.Count();            var recs = db.Users.OrderBy(a => a.Id).                Skip(start.Value).Take(limit.Value).ToList();            return Json(new                            {                                Data = recs,                                total = cnt                            }, JsonRequestBehavior.AllowGet);        }    }

    [HttpPost]    public JsonResult Update(UserInfo data)    {        bool success = false;        string message = "no record found";        if (data != null && data.Id > 0)        {            using (var db = new Db())            {                var rec = db.Users.Where(a => a.Id == data.Id).                    FirstOrDefault();                rec.Name = data.Name;                rec.Email = data.Email;                db.SaveChanges();                success = true;                message = "Update method called successfully";            }        }

        return Json(new                        {                            data,                            success,                            message                        });    }}

Notice that the Get method returns a JsonResult.  This conveniently returns the data in JSON format.  Part of the secret sauce here is in the Db().  This app used Microsoft’s new EntityFamework CodeFirst. Following the standard CodeFirst model, we implement the simple c# code and it automagically creates the data tables (and data) in the database (my example uses SqlServer CE because it can be run without installing any database on your windows computer, the code is all in-memory).

If we look at the Model on the ASP.NET MVC3 side, you’ll notice the c# attributes and the DbContext that do the magic for you.  There are some excellent getting started guides on the web including one from Julie Lerman (walk through video: http://msdn.microsoft.com/en-us/data/gg715119 and http://msdn.microsoft.com/en-us/data/gg685467 ).

Here is the Visual Studio Solution Explorer for the model:

and here is the model code in c#:

namespace SenchaDesignerExtension.Models{    public class UserInfo    {        [Key]        [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]        public int Id { get; set; }

        [MaxLengthAttribute(256)]        public string Email { get; set; }

        [MaxLengthAttribute(256)]        public string Name { get; set; }

    } }

and the actual repository which is in the file DbContext.cs (screen shot for brevity below, the code is attached in the example.

<system.webServer>    <validation validateIntegratedModeConfiguration="false" />    <modules runAllManagedModulesForAllRequests="true" />    <staticContent>      <mimeMap fileExtension=".json" mimeType="application/json"  />    </staticContent>    ...

This works great as long as the GET verb is used (or just enter the on the url like http://mysite.com/myfile.json).

So, what if you "need” to use the POST keyword.  Say for example, you can not change the JavaScript file to use GET instead of POST to get the file.  I was hoping to find some simple web.config parameter to set but I had no luck.  I even posted to StackOverflow and so far, the answers have been less than helpful.  Who knows, maybe by the time you read this, there will be a better answer then my solution which is to write a simple asp.net handler and register it to type json.

So, here is the simpler handler that does the trick:

public class JSONHandler : IHttpHandler    {

        public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "application/json";            string output = System.IO.File.ReadAllText(context.Request.PhysicalPath);            context.Response.Write(output);

        }

        public bool IsReusable        {            get            {                return false;            }        }    }

and the associated web.config entries

<httpHandlers>     <add verb="*" path="*.json" validate="false" type="JSONHandler" />   </httpHandlers> </system.web>

 <system.webServer>   <validation validateIntegratedModeConfiguration="false" />   <modules runAllManagedModulesForAllRequests="true" />   <staticContent>     <mimeMap fileExtension=".json" mimeType="application/json"  />   </staticContent>   <handlers>     <add verb="*" path="*.json" name="JSONHandler" type="JSONHandler"/>   </handlers> </system.webServer>

I’m assuming there is a simple way, but for now, this works for me.  Please post a better solution and reference it or just tell me in the comments.

In May of 2009 I discovered some significant performance problems that I blogged about.  In summary, I had tracked it down to the issue of LINQ2SQ having to create a full expression tree on every instantiation of a LINQ2SQL query.  I’m not a compiler write kind of guy but do respect the complexity of that and doing things like building expression trees, but still this really sucked.  Using the compile syntax in LINQ2SQL is very awkward, and IMHO takes all the fun out of using LINQ2SQL.  If you don’t remember my post, here is the graph showing the evil happening.

So, what is a Microsoft MVP to do?  I complained to everyone at Microsoft I knew.  I made this my mission for about a year.  I was told time after time that the problem was hugely complicated and no one was working on making it any faster.  I just could not believe it because I felt this was such a barrier to success to LINQ2SQL type technology (now Entity Framework really) that Microsoft just could not ignore my findings.  I was actually surprised that I was the only one screaming about this.

Well, quietly, Microsoft has announced that in .Net Framework 4.5, Entity Framework will include “Auto-Compiled LINQ Queries”.  This is awesome!   When it comes out, I’ll be testing and it giving feedback.

For now, I’m a very happy camper.

Scott Hanselman posted a while back about a browsers definition problem with some ASP.NET sites that causes problems.  Microsoft has articles on this also.  Having just received my BUILD tablet that includes IE10, I tested the Silicon Valley Code Camp web site and discovered that when you login, then switch to another page, the login did not stick.  After uploading the two files Scott mentions (firefox.browser and ie.browser), the problem goes away.

Thanks Scott for the heads up.

I know this is old hat, but after recently having a conversation with one of the ASP.NET Team guys about how easy Web Forms is to use, I thought I’d just post a simple example of that.  Here is the scenario.  You have a simple GridView with just three columns (Select,Id,TagName).  You want to be able to capture what happens when the user pressed the Select command and capture the Id.  It looks like this:

And has an aspx page like this:

<asp:GridView ID="GridViewNotSelected" runat="server" AllowSorting="True"         AutoGenerateColumns="False"         DataSourceID="SqlDataSourceTagsNotSelected"         onrowcommand="GridViewNotSelected_RowCommand">    <Columns>        <asp:TemplateField ShowHeader="False">            <ItemTemplate>                <asp:LinkButton ID="LinkButton1" runat="server"                     CausesValidation="False" CommandArgument='<%# Eval("Id") %>'                    CommandName="Select" Text="Select"></asp:LinkButton>            </ItemTemplate>        </asp:TemplateField>        <asp:TemplateField             HeaderText="&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;">        </asp:TemplateField>        <asp:TemplateField>            <ItemTemplate>                <asp:Label ID="Label1" Text='<%# Eval("TagName") %>' runat="server"></asp:Label>            </ItemTemplate>        </asp:TemplateField>    </Columns></asp:GridView>

Notice that in the TemplateField there is LinkButton with a CommandArgument that simply extracts the TagName with the current Id of the SqlDataSource.  Now, all you need is the RowCommand event and you are done.  Here it is in C#.

protected void GridViewNotSelected_RowCommand(object sender, GridViewCommandEventArgs e){    int tagsId = Convert.ToInt32(e.CommandArgument);}

And finally, the proof!

Very very simple.  HTH’s.

I’ve got a small project (1 table) that I’d like to include in an asp.net website project so I decided to give it a try.  For the most part, things have gone smoothly, however I did have a couple hiccups I’d like to mention.  One cost me $9 because I was doing this implementation on an airplane and immediately, I had a failed connection with a confusing error that I needed Bing to lookup  (more details below).

Method Names Changed

I have to wonder why Microsoft decided to change the names of the methods in ADO.NET.  Seems to me that all the names should be the same whether I’m using Sql Server, Sql Server Express or Sql Server CE.  My expectation was that the statement:

using (var connection = new SqlConnection(testDataContext.ConnectionString)) {..

A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: SQL Network Interfaces, error: 26 – Error Locating Server/Instance Specified)

using (var connection = new SqlCeConnection(connectionString)) {...

And things now work (my connection string is actually what I’ve pasted below).

<connectionStrings>  <add name="ConnectionStringMxMessage" connectionString="Data Source=|DataDirectory|\MxMessageDb.sdf"       providerName="System.Data.SqlServerCe.4.0" /></connectionStrings>

Bottomline, all ado.net commands need the Ce in them.

Getting Identity Column After Insert Fails

My expectation is that what has worked for a very long time in Sql Server for me should work in Sql Server CE.  The most simple pattern of inserting a row and getting back the value of the identity column does not work the same.  My original code looks like this (which fails):

using (var connection = new SqlCeConnection(testDataContext.ConnectionString))    {        connection.Open();        using (var sqlCeCommand =            new SqlCeCommand(                "INSERT INTO message (Name, Subject, Header, Body, Footer) Values                     (@Name);SELECT @@IDENTITY",                connection))        {            sqlCeCommand.Parameters.Add("@Name", SqlDbType.NVarChar).Value = Name;            // problem, need to do separate select to get this to work            sqlCeCommand.Parameters.Add                (new SqlCeParameter("@IDENTITY", SqlDbType.Int)                                            {                                                Direction =                                                    ParameterDirection.Output                                            });

            using (var reader = sqlCeCommand.ExecuteReader())            {                while (reader.Read())                {                    message.Id = reader.IsDBNull(0) ? 0 :                       Convert.ToInt32(reader.GetDecimal(0));                }            }        }    }}

To fix it, it seems that you can not send two sql commands on the same execution (separated by semicolon).  That is, after the first command (without the SELECT @@IDENTITY) you need to do another SqlCeCommand as follows:

using (var sqlCeCommand2 =    new SqlCeCommand(        "SELECT @@IDENTITY",        connection)){    message.Id = Convert.ToInt32(sqlCeCommand2.ExecuteScalar());}

 

Conclusions

Well, things are working, but I have not done much and I’ve had a couple of stumbles.  Hopefully I’m done with stumbling for now.

Introduction and Problem

Converting Data Formats back and forth between browser and back end servers can be a little confusing.  In my case, I have a simple Sencha ExtJS 4.0 form that the user types a date into.  That date gets passed through an ajax request to the Microsoft asp.net controller, then that dates updates the SqlServer Database.  When the Date is displayed on a Grid Panel, again, an ajax request is made that grabs the date from the controller, then formats it using the MS dateFormat from ExtJS and hopefully, the same date the user typed in gets re-displayed.

So, let’s look at the details.

Posting the Date To the Server (View From JavaScript)

First, we need to define an ExtJS Model that has the date in it.  That codes looks like this in my case.

Ext.define('EvMgr.model.SponsorListJobListing', {    extend: 'Ext.data.Model',    fields: [        'Id',        'SponsorListId',        'JobName',        'JobLocation',        'JobURL',        'JobBrief',        'JobTagline',        'JobButtonToolTip',        { name: 'EnteredDate', type: 'date', dateFormat: 'MS' },        'JobCompanyName',        { name: 'StartRunDate', type: 'date', dateFormat: 'MS' },        { name: 'EndRunDate', type: 'date', dateFormat: 'MS' },        { name: 'HideListing', type: 'boolean' },        'Notes'    ],    idProperty: 'Id',

    proxy: {        type: 'ajax',        api: {            read: 'SponsorListJobListing/Get',            update: 'SponsorListJobListing/Update',            create: 'SponsorListJobListing/Create',            destroy: 'SponsorListJobListing/Delete'        },        reader: {            type: 'json',            root: 'Data',            successProperty: 'success'        }    },

    belongsTo: 'EvMgr.model.SponsorList'});

Notice the StartRunDate field has dateFormat of ‘MS”.

Now, we have an ExtJS Window that we use to collect the data from the user.  The code is as follows:

Ext.define('EvMgr.view.sponsorlist.ListJobListingsEdit', {    extend: 'Ext.window.Window',    alias: 'widget.sponsorlistjoblistingsedit',    title: 'Edit Job Listing',    layout: 'fit',    width: 1000,    autoShow: true,

    initComponent: function() {

        this.items = [            {                xtype: 'form',

                items: [                    {                        xtype: 'textfield',                        name: 'JobName',                        fieldLabel: 'JobName',                        width: 850                    },                    {                        xtype: 'textfield',                        name: 'JobLocation',                        fieldLabel: 'JobLocation',                        width: 850                    },                     {                         xtype: 'textfield',                         name: 'JobURL',                         fieldLabel: 'JobURL',                         width: 850                     },                     {                         xtype: 'textfield',                         name: 'JobBrief',                         fieldLabel: 'JobBrief',                         width: 850                     }, {                         xtype: 'textfield',                         name: 'JobTagline',                         fieldLabel: 'JobTagline',                         width: 850                     },                     {                         xtype: 'textfield',                         name: 'JobButtonToolTip',                         fieldLabel: 'JobButtonToolTip',                         width: 850                     },                     {                         xtype: 'textfield',                         name: 'JobCompanyName',                         fieldLabel: 'JobCompanyName',                         width: 850                     },                     {                         xtype: 'textfield',  // checkbox makesthe value not come back for some reason                         name: 'HideListing',                         fieldLabel: 'HideListing',                         width: 850                     },                     {                         xtype: 'datefield',                         name: 'StartRunDate',                         fieldLabel: 'StartRunDate',                         width: 850                     },                     {                         xtype: 'datefield',                         name: 'EndRunDate',                         fieldLabel: 'EndRunDate',                         width: 850                     },                    {                        xtype: 'textfield',                        name: 'SponsorListId',                        fieldLabel: 'SponsorListId',                        width: 850                    }                ]            }        ];

        this.buttons = [            {                text: 'Save',                action: 'save'            }, {                text: 'Cancel',                scope: this,                handler: this.close            }        ];

        this.callParent(arguments);    }});

Posting the Date To the Server (View From ASP.NET)

I’m over simplifying a little because it’s calculating UTC based on the Servers time zone, not the browsers.  It would be better to send the timezone of the browser also and then calculate UTC correctly in JavaScript, but I just want to give you the idea here.  In my case, I’m always running this app from California and my server is always inCalifornia so at least things stay consistent.  I do realize I’m simplifying and you need to make sure you think this through.

Now, when I query the server for the returned data using the same ExtJS data model, the data comes down as follows.  In ASP.NET it looks like this:

Which is actually different than what was pushed up.  It seems though that when ExtJS displays this, it converts it to local time.

Our browser Grid shows it like this (as we would expect)

Hope this helps!

<add name="MyConnName" connectionString="Server=.;Database=mydbcatalogname;Trusted_Connection=True;"     providerName="System.Data.SqlClient" />

Notice that I’m using the “.” as the server name.  This allows me to reference the local system where my sqlserver lives. Not necessarily a best practice, but often is the case.

Upside

One big benefit is if you fall victim to a disk scraping attack, or someone gets a hold of your source (maybe from version control?), you don’t give up your passwords.

Downside

If you SqlSever is not on the system system as your web project or application, then this become more tricky because of the cross system authentication issues.  If you have active directory installed on both systems, then this works also.

To build fully-featured web applications that support complex interaction in a reasonable amount of time requires a high-end JavaScript library. Someday, maybe JQueryUI will be good for this, but for now, the choices are few and include ExtJS, Dojo, YUI and a handful of others. This session will use ExtJS as the example. We will use Microsoft’s ASP.NET MVC as the data / CRUD layer and from that, we will build a typical LOB (line of business) application using complex UI elements. Those elements include layout managers, data grids, extensive validation, spinner controls and other advanced UI features. To get an idea of what I’m talking about, spend five minutes looking at the examples on the ExtJS web site demonstrating these advanced web UI features http://www.sencha.com/products/js/. You will be convinced that spending hundreds of hours trying to build something not nearly as well done as this is a waste of time when there are such excellent libraries already built for you.

The source attached below for my demos.

Final ExtJS4 JavaScript (that didn’t quite work, but working now)

// Load dependenciesExt.require([    'Ext.data.*',    'Ext.button.*',    'Ext.form.*']);

Ext.onReady(function () {

    // Date renderer    var dateConvert = function (val, record) {        if (val.split('(').length == 2) {            var dateObj = new Date(parseInt(val.substr(6)));            return Ext.util.Date.format(dateObj, 'm/d/Y');        } else {            return val;        }

    }

    Ext.regModel('Users', {

        fields: [            { name: 'Id', type: 'int' },            { name: 'Username' },            { name: 'CreationDate' },            { name: 'FirstName' },            { name: 'LastName' },            { name: 'PlanExpirationDate' }        ],        // Proxy        proxy: {            type: 'ajax',            url: '/Users/JsonData',            api: {                read :    '/Users/JsonData',                create :  '/Users/Create',                update :    '/Users/Edit',                destroy : '/Users/Delete'            },            // Json Reader            reader: {                type: 'json',                idProperty: 'Id',                totalProperty: 'total',                root: 'data'            },            writer: {                type: 'json',                encode: false,                listful: true,                writeAllFields: true            },            headers: { 'Content-Type': 'application/json; charset=UTF-8' }                            }

    });

    var usersStore = new Ext.data.Store({        model: 'Users',        autoLoad: true,        pageSize: 10    });

    var gridForm = Ext.create('Ext.form.FormPanel', {        id: 'userFormPanel',        frame: true,        title: 'Users Data',        store: usersStore,        bodyPadding: 5,        width: 910,        layout: 'column',    // Specifies that the items will now be arranged in columns

        fieldDefaults: {            labelAlign: 'left',            msgTarget: 'side'        },

        items: [{            columnWidth: 0.65,            xtype: 'gridpanel',            id: 'usersGrid',            store: usersStore,            height: 410,            title: 'Users',

            headers: [        {            text: 'User Name',            flex: 1,            sortable: true,            dataIndex: 'Username'        },        {            text: 'CreationDate',            width: 100,            sortable: true,            renderer: dateConvert,            dataIndex: 'CreationDate'        },        {            text: 'First Name',            width: 100,            sortable: true,            dataIndex: 'FirstName'        },        {            text: 'Last Name',            width: 100,            sortable: true,            dataIndex: 'LastName'        },        {            text: 'Plan Expiration Date',            width: 120,            sortable: true,            renderer: dateConvert,            dataIndex: 'PlanExpirationDate'        }    ],

    listeners: {        selectionchange: function (model, records) {            if (records[0]) {                var recordToLoad = {                    Username: records[0].data.Username,                    CreationDate: dateConvert(records[0].data.CreationDate),                    FirstName: records[0].data.FirstName,                    LastName: records[0].data.LastName,                    PlanExpirationDate: dateConvert(records[0].data.PlanExpirationDate)                }                this.up('form').getForm().setValues(recordToLoad);            }        }    },    bbar: new Ext.PagingToolbar({        store: usersStore    })        }, {            columnWidth: 0.35,            margin: '0 0 0 10',            bodyStyle: {                margin: '4px'            },            xtype: 'form',            id: 'userForm',            title: 'Add / Edit User Details',            defaults: {                width: 260,                labelWidth: 120,                margin: '7px'            },            defaultType: 'textfield',            items: [{                fieldLabel: 'User Name',                name: 'Username'            }, {                xtype: 'datefield',                fieldLabel: 'Creation Date',                name: 'CreationDate'            }, {                fieldLabel: 'First Name',                name: 'FirstName'            }, {                fieldLabel: 'Last Name',                name: 'LastName'            }, {                xtype: 'datefield',                fieldLabel: 'Plan Expiration Date',                name: 'PlanExpirationDate'            }],            buttons: [{                text: 'Update Record',                scale: 'medium',                handler: function (btn, e) {                    var userSelectionModel = Ext.getCmp('usersGrid').getSelectionModel();                    if (userSelectionModel.hasSelection()) {                        // get the form                        var formCmp = Ext.getCmp('userForm');                        // get the form field values                        var formValues = formCmp.getForm().getValues();                        // get the selected record                        var recordSelection = userSelectionModel.getLastSelected();                        // update the record with the form fields                        recordSelection.set(formValues)                        // sync store                        usersStore.sync();                    }                }            }, {                text: 'Add As New Record',                scale: 'medium',                handler: function (btn, e) {                    // get the form                    var formCmp = Ext.getCmp('userForm');                    // get the form field values                    var formValues = formCmp.getForm().getValues();                    // add to the the store                    usersStore.add(formValues);                    // sync with the store                    usersStore.sync();                }            }, {                text: 'Delete Record',                scale: 'medium',                handler: function (btn, e) {                    // get the user grid selection model                    var userSelectionModel = Ext.getCmp('usersGrid').getSelectionModel();                    // check if there's a selection                    if (userSelectionModel.hasSelection()) {                        // remove the selected record                        usersStore.remove(userSelectionModel.getLastSelected());                        usersStore.sync();                    }                }            }]        }],        renderTo: 'extjs-grid'    });

});

The big difference is that GetTempFileName actually creates a file where as GetTempPath simply tells you where the file is going to be.

Here are some words out of MSDN for Path.GetTempFileName

This method creates a temporary file with a .TMP file extension.

And For Path.GetTempPath

The path to the temporary folder, ending with a backslash.

Subtle, but clear when you read the doc.  If you read the community content, there is a humorous discussion with someone saying “you might as well use the other one, it does the same thing”.  All I can say to that is read the docs!  I got stung today, but never again.

I’m now creating my filename with a string as follows which kind of does the same thing, but not really. 

public static string GetTempFileWithGuid(string filePrefix){    string retFileName = string.Format("{0}{1}{2}.crsync",         Path.GetTempPath(), filePrefix, Guid.NewGuid());    return retFileName;}

HTH’s.

Two of the sections I feel are particularly well written or the ones that talk about Storage and Tables (chapters 7 and 8).  The application I’ve been working on heavily uses blob storage and I spend lots of times re-reading those sections.  Azure tables is a hard topic to get a sql server programmer like me to get my head wrapped around.  Sriram does a great job of talking directly to someone like me to help me understand how and when to use tables.

Again, I whole heartedly recommend this book.

This post shows a very simple technique for processing a gzip compression on a background thread using c# with Visual Studio 2010.  What is unique here is we are using no statics to do it.  I’m not totally against using statics, but in general, it is best to avoid them.  I’ve heard the notorious Ward Bell say statics are evil and have had many cases where they have bitten me.  Since I heard Ward say this, I’ve been trying to avoid them where I can.

The Simple Problem

The problem is to simply compress a file to bytes and return to us the compressed, uncompressed and byte array of the result.  We can pass parameters into a thread, however we can not return them (when I say thread, I mean the anonymous method that processes our data).

Some Code

So, to that end, Let’s create a main method as below.  Notice that it creates a very simple anonymous method which executes the code cryptoCopress.CompressFile(…), then simply starts that thread.  Once the thread starts, it simply waits for the thread to end by looping every 50 milliseconds on the thread.IsAlive method.  Finally, when it returns, it simply looks at the cryptCompress object for the results.  No Statics!

private static void Main(string[] args){    var cryptCompress =        new CryptCompress();    var thread =        new Thread(            () =>            cryptCompress.CompressFile                (@"G:\NoBackup\ext-3.2.1\ext-all-debug-w-comments.js"));    thread.Start();

    int cnt = 0;    while (thread.IsAlive)    {        cnt++;        Console.WriteLine("Waiting... " + cnt);        Thread.Sleep(50);    }    Console.WriteLine("Before Compression KBytes: {0}",                        cryptCompress.BeforeCompressionBytes/1000);    Console.WriteLine("After Compression KBytes: {0}",                        cryptCompress.AfterCompressionBytes/1000);}

Now, Lets look at the CryptCompress class.  Notice that it’s basically got one public method (CompressFile) and 3 public properties that will be used to hold the return values.  This way, the main method that started the thread can get the results.  Again, notice that there is no word static any place in this project.

public class CryptCompress{public byte[] CompressedBytes { get; set; }public long BeforeCompressionBytes { get; set; }public long AfterCompressionBytes { get; set; }

public void CompressFile(string fileName){    using (var fileStream =         new FileStream(fileName, FileMode.Open, FileAccess.Read))    {        var uncompressedBytes = new byte[fileStream.Length];        fileStream.Read(uncompressedBytes, 0,             (int) fileStream.Length);        CompressedBytes = CompressGzip(uncompressedBytes);        BeforeCompressionBytes = fileStream.Length;        AfterCompressionBytes = CompressedBytes.Length;        fileStream.Close();    }}

/// <summary>/// Take a simple stream of uncompressed bytes and compress them/// </summary>/// <param name="uncompressedBytes"></param>/// <returns></returns>public byte[] CompressGzip(byte[] uncompressedBytes){    using (var memory = new MemoryStream())    {        using             (var gZipStream =                 new GZipStream(memory, CompressionMode.Compress, true))        {            gZipStream.Write                (uncompressedBytes, 0, uncompressedBytes.Length);        }        return memory.ToArray();    }}}

The Results

When we run this, notice that it takes 3 iterations (or 150 milliseconds) to complete. I’m only compressing a small file so no surprise.  The file is actually 2.7 Megabytes and compress to .7 Megabytes.

That’s it for now! Hope this helps.

Background And Conclusion

In my very last post I talked about how using SHA256 seemed to not be affected by whether you use Buffered or Not Buffered streams.  An astute reader (Samuel Jack) referenced an article by one of my favorite ex MIcrosoft employees (Brad Abrams) saying that almost all the .Net streams have buffering built in.

Well, I think SHA256Managed does not.  One of the challenges I’ve been facing lately with my current project is to provide feedback while doing all kinds of byte piping (stream stuff).  While figuring out how to do this, I inadvertently figured out that buffering makes a huge difference.  Briefly, let me show my results first, then talk about the code that went into it.

Notice that when I use a 64MB Buffer, the memory used for the process is 77MB and when I use an 8MB buffer, the memory used is 17MB.  Clearly the buffer allocated matters.  Just for information, I’ve also included the code that does not break the SHA256 hash into blocks, and it has the same results based on the size of the Memory Buffer declared.  That is, small buffer, small use, big buffer, big use.

The Code

The code that I wrote to do this basically does a nice job of splitting up the processing so that you can log progress as it runs. I’m attaching the Visual Studio 2010 project here as well as pasting the relevant source code.  It’s a good base to experiment with.  Feel free to comment on interesting things you find experimenting with it.

Visual Studio 2010 Project:      

/// <summary>/// Used so we can get MD5Hash and get progress on calculation/// </summary>/// <param name="streamIn"></param>/// <returns></returns>public static string GetSha512Buffered(Stream streamIn){    Process process = Process.GetCurrentProcess();    const int bufferSizeForMd5Hash = 1024*1024*8; // 8MB    Console.WriteLine("-----------------------------------");    Console.WriteLine("Memory Buffer Size {0} MB", bufferSizeForMd5Hash/1000);    Console.WriteLine("-----------------------------------");    string hashString;    using (var md5Prov = new SHA256Managed())    {        int readCount;        long bytesTransfered = 0;        var buffer = new byte[bufferSizeForMd5Hash];        while ((readCount = streamIn.Read(buffer, 0, buffer.Length)) != 0)        {            // Need to figure out if this is final block            if (bytesTransfered + readCount == streamIn.Length)            {                md5Prov.TransformFinalBlock(buffer, 0, readCount);            }            else            {                md5Prov.TransformBlock(buffer, 0, bufferSizeForMd5Hash, buffer, 0);            }            bytesTransfered += readCount;            Console.WriteLine("GetSha512Buffered:{0}MB/{1}MB.   Memory Used: {2}MB",                                bytesTransfered/1000000,                                streamIn.Length/1000000,                                process.PrivateMemorySize64/1000000);        }        hashString = BitConverter.ToString(md5Prov.Hash).Replace("-", String.Empty);        md5Prov.Clear();    }    return hashString;}

I’m building a file synchronization with the cloud application and I want to store a checksum with the file so that I can verify later that the file is what I think it is. I’m not a crypto guy so I searched around the internet for a solution.   I found lots of examples and settled on this one that uses SHA256 for the job.  I also found some comments saying that it would be more efficient to wrap it in a BufferedStream rather than processing the entire file at once.

Example Links: http://efreedom.com/Question/1-1345851/MD5-File-Processing ; http://stackoverflow.com/questions/1177607/what-is-the-fastest-way-to-create-a-checksum-for-large-files-in-c/1177744#1177744

My intention for this post was to show how much more efficient it would be to use BufferedStream, however my results don’t show that.  I’m guessing that somehow, the efficiency is happening under the covers in a place I don’t see.

If anyone knows this space well, please feel free to comment and suggest a better method.  I’m publishing my source below for the test and my surprisingly similar results whether I used buffering or not.

Looking forward to the responses.

using System;using System.Diagnostics;using System.IO;using System.Security.Cryptography;

namespace ConsoleApplicationMD5test{    internal class Program    {        private static void Main(string[] args)        {            //const string fileName = @"g:\tempjunk\BlobSyncClient.zip";            const string fileName =             @"g:\msdn\en_visual_studio_2008_service_pack_1_x86_dvd_x15-12962.iso";

            var stopwatch1 = new Stopwatch();            stopwatch1.Start();            string str1 = ""; // GetChecksum(fileName);            stopwatch1.Stop();

            var stopwatch2 = new Stopwatch();            stopwatch2.Start();            var fileStream = new FileStream(fileName, FileMode.OpenOrCreate,                FileAccess.Read);            string str2 = GetChecksumBuffered(fileStream);            stopwatch2.Stop();

            Console.WriteLine(str1 + " " + stopwatch1.ElapsedMilliseconds);            Console.WriteLine(str2 + " " + stopwatch2.ElapsedMilliseconds);

            Console.ReadLine();        }

        private static string GetChecksum(string file)        {            using (FileStream stream = File.OpenRead(file))            {                var sha = new SHA256Managed();                byte[] checksum = sha.ComputeHash(stream);                return BitConverter.ToString(checksum).Replace("-", String.Empty);            }        }

        private static string GetChecksumBuffered(Stream stream)        {            using (var bufferedStream = new BufferedStream(stream, 1024 * 32))            {                var sha = new SHA256Managed();                byte[] checksum = sha.ComputeHash(bufferedStream);                return BitConverter.ToString(checksum).Replace("-", String.Empty);            }        }    }}

Just so we now have an example, I’ve put together a simple windows form app that let’s you set a few variables in your app.config to point at your azure storage and container, let you view your app as a tree as well as see the code how it can be done.  I have not commented the code much, just thought it would be good to get it out there.  The running application shows you the data as follows.

So, for the details, I’m pasting below the meet of the code.  Basically, it does what you would expect in terms of iterating through the directories recursively to build the list.  Again, just set your parameters in your app.config as follows:

and you can run it for yourself and see how it goes.

I’m pasting some code below, as well as including the project source code.  The main reason I’m pasting the code is so that the search engines can find it better.  It’s really just easier to download the project and load it into Visual Studio 2010 and run it yourself.

Good Luck, and hope this helps!

That is, if you have code like this:

private void backgroundWorker1_DoWork(object sender, DoWorkEventArgs e){    backgroundWorker1.ReportProgress(0,"starting...");    for (int i = 0; i < 10;i++ )    {        if (i > 5)        {            throw new ApplicationException("any error here");        }        backgroundWorker1.ReportProgress(i, "working...");    }}

and you run it in the debugger, it will not stop by default when the exception is thrown (like it would in single threaded code).

So, I recommend doing the following and setting a break point to see the error.

Another thing you can do is bump up where debug’s stops uisng the dialog:

goes to:

Then, you will get an error you expect.

HTH’s!

The End Result

Motivation

As you can imagine, The Silicon Valley Code Camp web site has lots of “back end” functions that need to be done. That is, things like doing mailings, assigning roles to users, making schedules, allocating rooms and times and literally  hundreds of other tasks like that.  Over the 5 years of code camp, I’ve always built simple protected asp.net web pages to do this.  I’ve always used the simplest asp.net control I could find, such as GridView, DetailsView, DropDownList, and SqlDataSource.  The interfaces usually basically work but are very clumsy and lacking in both functionality and aesthetics.

Why Now

I’ve seen lots of short demos on LightSwitch for Visual Studio and recently read on someone else’s blog that they are now building all their simple applications using LIghtSwitch.  Also, my friend Beth Massi has been running around the world espousing the greatness of this product and I knew if I ran into any dumb issues that she’d bail me out (I’m the king of running into dumb issues.  I’ve found that given two choices that seem right, I always pick the wrong one which is what actually happened here along the way, and Beth did bail me out).

First Blood

First thing to do (after installing LightSwitch) is to say “File/New/Project”.  My plan is to add this project right off my SV Codecamp solution.  So, here goes.

So far so good.  Next step is to choose attach to an external database

Continuing, but don’t get tripped up here like I did.  You will use WCF RIA Services under the covers but you don’t want to select that choice.  You want to say that you want to connect to a database and let LightSwitch do the work for you.

PIck your database and connection strings.

Now, pick the tables you plan on working with.  If this were Linq2sql, I’d be choosing them all, but now that I’m in RIA Services land, I’m hoping I can  have separate “Domains” and not have to reference all the tables all the time.  Jury is still out on that one but for now, I’m following the advice of the team and just picking the tables I want to manage now.

And, I’m going to name the Data Source “svcodecampDataJobs”.  I’ll have to see how this goes and report later.  I’m doing this live so I really don’t know where I’ll end up.

click finish, then rebuild all and it  all works.  It comes up with this screen showing me my relationship between the tables. It is showing me a Company table with a link to a JobListing table which is what I have. Here is what LightSwitch shows me.

The reality of my database is that I also have a JobListingDates table that is now shown here.  Taking a step backwards to explain my database, I have a simple company table, the company has a detail table associated with it called JobListings, and the JobListings table has a details file associated with it called JobListingsDates.  That is, a company may run an ad for 30 days, take it down for 30,and bring it back up again.

Here is what that schema actually looks like in SqlManager from EMS.

One thing I like about great software is that it has things that are discoverable.  So, just now, I double clicked on the little table called JobListings and the view changed to having JobListing as primary and if you look on the bottom right, it shows JobListingDate.  Very cool.  I have no idea where this is all going but I’m starting to get excited.  Here is what I’m looking at now.

Building a Screen

So now, let’s push the “Screen” button and see what happens (while looking at the Company View).

This is nice, I get a list of sample screens.  How about if we build an Editable Grid Screen with the hope of editing and adding new Companies.  Notice that I’m naming it EditableGridCompany and chosing the Company for the data in the dropdown.

You now get a screen that is a little scary looking so rather than actually try and understand it, I thought “maybe I’m done, maybe this will just run”.  So, here goes, Debug/Start Without Debug.  Here is the scary screen, followed by what happens after the run.

And the Run:

Wow!  Paging, Fancy editing including date pickers, exporting to Excel, Inserts, Updates and Deletes on the company table.  This is amazing.  Let me add another Grid so that I can add JobListings to the company.  To do that, go back to the solution explorer and choose add screen.

Then again, I have choices.

I choose Details Screen and check Company in the dropdown, Company Details and Company JobListings for the additional data.

Another intimidating screen, but simply do Debug/Debug Start.

Well, that’s it for now.  Code Camp is 4 days away and I don’t really have time to take this to the next level.  You can see from the screen at the top of the post that this is pretty amazing for the effort!  I’m sure I’ll be back to this.

So, here is basically what I want on the left side bar of the home page of Silicon Valley Code Camp:

First, I’ll attach my simple project I build to do this standalone so you can run it yourself, then, I’ll do a quick step through of the key code. 

All that is really in this project is a simple c# class file that contains a business object and one get method to retrieve the list.  That file is called RSSFeed.cs.  I’ve pasted all the code of that class below:

using System.Collections.Generic;using System.ComponentModel;using System.Linq;using System.Xml.Linq;

namespace App_Code{    [DataObject(true)]    public class RSSFeedObject    {

        [DataObjectMethod(DataObjectMethodType.Select, true)]        public List<RSSItem> Get(int numberToGet)        {            XDocument feedXML = XDocument.Load              ("http://blog.siliconvalley-codecamp.com/feed/");

            var feeds = feedXML.Descendants("item").                Select(feed => new                   {                       PostTitle = feed.Element("title").Value,                       PostURL = feed.Element("link").Value                   });            var rssItems = new List<RSSItem>();            int id = 0;            foreach (var rec in feeds)            {                rssItems.Add(new RSSItem                                (id,rec.PostTitle,rec.PostURL));                id++;                if (id >= numberToGet)                {                    break;                }            }            return rssItems;                            }

    }

    public class RSSItem    {        [DataObjectField(true)]        public int Id { get; set; }

        [DataObjectField(false)]        public string PostTitle { get; set; }

        [DataObjectField(false)]        public string PostURL { get; set; }

        public RSSItem(int id, string postTitle,                        string postURL)        {            Id = id;            PostTitle = postTitle;            PostURL = postURL;        }    }}

Then, in the Default.aspx page, you can simply reference this object with a Repeater and an ObjectDataSource and you are done!  That is it, very simple.  Below is the page code.

<asp:ObjectDataSource ID="ObjectDataSourceRSS" runat="server"   SelectMethod="Get" TypeName="App_Code.RSSFeedObject">   <SelectParameters>       <asp:Parameter DefaultValue="5" Name="numberToGet" Type="Int32" />   </SelectParameters></asp:ObjectDataSource><asp:Repeater ID="RepeaterRSS" runat="server" DataSourceID="ObjectDataSourceRSS">   <HeaderTemplate>       <ul>   </HeaderTemplate>   <FooterTemplate>       </ul>   </FooterTemplate>   <ItemTemplate>       <li>           <asp:HyperLink ID="HyperLinkURL" runat="server"                NavigateUrl='<%# Eval("PostURL") %>'               Text='<%# Eval("PostTitle") %>'></asp:HyperLink>       </li>   </ItemTemplate></asp:Repeater>

I’m sure someone is going to point out how this could have been done in three lines of code.  Until then, I’ll keep this in the Silicon Valley Code Camp site.

BTW, if the site looks different, it’s because a wizard html/css guy has come by and cleaned it up to look good. What you see in the top screen shot is what it looks like without any formatting.  Just unordered list and listitems with no formatting.

HTH’s!

So, here is an example class that does that.

public class DbProgressReport{    public string ScopeNameProgress { get; set; }    public string SourceOrDestination { get; set; }    public string TableName { get; set; }    public int TotalRecords { get; set; }    public int ChangesApplied { get; set; }    public int ChangesFailed { get; set; }    public int ChangesPending { get; set; }    public int Deletes { get; set; }    public int Inserts { get; set; }    public int TotalChanges { get; set; }    public int Updates { get; set; }    public DateTime LastChangeDate { get; set; }

    public override string ToString()    {        string readableDbProgressReport =            string.Format(                "{0} ScopeName {1},Table {2},TotalRecords {3}"                SourceOrDestination, ScopeNameProgress, TableName);

        return readableDbProgressReport;    }    ...

Now, all you have to do when accessing this class is use the ToString property.

That is:

DbProgressReport dbProgressReport =   new DbProgressReport("source","scopename","tablename");string str = dbProgressReport.ToString();

and the output will be:

source ScopeName scopename,  Table tablename

Simple as that!

Hope this helps.

I posted on the Umbraco forums and got some tips, but I thought I’d document the process here because I’m sure I’m going to be doing this again and thought it best to have some notes I can go back to (and that might help others newbie’s to Umbraco while I’m at it).

So, let’s assume you have an Umbraco installation up and running.  First thing you want to do is drop the sqlserver database you assigned to umbraceo (in my case umbracodb), re-add it and make sure you set the umbracoUser to have rights to that database.  I’ll skip those steps because they don’t have much to do with umbraco.

Now, let’s assume you have done the above and now launch WebPI and chose Umbraco CMS again.

Continue to the first step after accepting the install options and make sure you select the name of your existing web site (mine is umbraco) and name the application name (which can be different than it was before).

Ignore this warning by saying “Yes”

Now, fill in the next page with your db details (same as before)

I changed the default to “Use Existing Database” and updated my databasename correctly (as well as put the name of the server, W500, that has my sqlserver installed).

Saying continue, causes it to run for a few minutes (without much feedback or warning so be patient).

Then, Success!

For some reason, I need to go back to inetmgr (IIS Manager) and make the umbraco web site started and stop all the others running on port 80 (see my last post for this).  Once you do that, I found that I need to go into the web.config and comment out the version number so that the umbracoConfigurationStatus line looks like this:

<add key="umbracoConfigurationStatus" value="" />

After doing that, I could browse to the URL:  http://localhost/install/default.aspx

Get a screen:

Chose Next and then go through the same screens as before.

etc., then finally get to a screen that correctly tells me I have work do do because I have not added any pages.

That’s it!  Again, I’m still new to this and I’m sure making lots of mistakes.  Please correct me if I’m wrong by making comments and make suggestions of the correct way to do it.

HTH’s!