In the first article, a very simple updater was build using Sencha’s ExtJS and Microsoft’s Entity Framework Code First.  The focus was really on the server side while the client side project was included for reference.  The client side app was barely discussed.  In this article, we are going to discuss in more detail what is happening on the client side and how the Sencha ExtJS JavaScript library helps us to implement these updates.

The Basics

Let’s start out with some basics rather than jump right in to the real project.   I think we can all assume the displaying of the data is pretty simple. We just create a store, add some fields, hook it up to a Ext.grid.Panel and set the store to autoload and it all just works.  Updating though does add a little more complexity and for that, we are going to add some structure.  So, let’s take a look at the very basics without any UI at all.

Just by way of reminders, we create two simple services in our project.  One that reads and the other that updates.  For the purpose of this article, those are the three (of four) CRUD operations we are going to implement (read,insert and update).  Let’s first implement those operations directly.  Below is a very straight forward JavaScript which basically represents a completely working ExtJS app with a single button in the viewport.  Here is the code below.

Ext.Loader.setConfig({ enabled: true });
Ext.require('Ext.container.Viewport');

Ext.application({
    name: 'AM',

    controllers: [
        'Users'
    ],

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'border',
            items: [
                {
                    xtype: 'button',
                    region: 'center',
                    text: 'Insert a Record',
                    handler: function () {
                        var writer = new Ext.data.JsonWriter({
                            type: 'json',
                            encode: false,
                            listful: true,
                            writeAllFields: true,
                            returnJson: true
                        });

                        var reader = new Ext.data.JsonReader({
                            totalProperty: 'total',
                            successProperty: 'success',
                            idProperty: 'Id',
                            root: 'Data',
                            messageProperty: 'message'
                        });

                        var proxy = new Ext.data.HttpProxy({
                            reader: reader,
                            writer: writer,
                            type: 'ajax',
                            api: {
                                read: '/UserInfo/Get',
                                create: '/UserInfo/Create',
                                update: '/UserInfo/Update',
                                destroy: '/UserInfo/Delete'
                            },
                            headers: {
                                'Content-Type': 'application/json; charset=UTF-8'
                            }
                        });

                        Ext.define('MyModel', {
                            extend: 'Ext.data.Model',
                            fields: ['Id', 'Name', 'Email'],
                            proxy: proxy
                        });

                        Ext.define('MyStore', {
                            extend: 'Ext.data.Store',
                            model: 'MyModel',
                            autoLoad: true,
                            paramsAsHash: true,
                            proxy: proxy
                        });

                        var myStore = Ext.create('MyStore', {
                        });

                        myStore.add({
                            Name: 'TestName',
                            Email: 'TestEmail@Test.com'
                        });

                        myStore.sync();
                    }
                }
            ]
        });
    }
});

Without going into to much detail, basically, what has been done above is a to create a simple model (myModel) which contains a JsonReader and JsonWriter and proxy of course. This model has a couple fields in it (Id,Name and Email), then a simple store is created that uses this model called myStore.  Once this store has been created, we simply call the store’s “add” method with a config object that represents the data, then calling sync() on that store forces an insert (or create) to be executed through the proxy.  If I look at Chrome’s JavaScript debugger (network tab), you can see from the picture below that indeed, the servers UserInfo/Create method has been called passing in the parameters Name and Email.

It’s important to understand these steps because we will be using the store and model in a similar way when we update the data in our next section.

Implementation in Grid and Editor Panel

We are using the ExtJS MVC architecture for this app so all our procedural code is in the controller.  For the Ext.grid.Panel, all we have for the view is the following (app/view/List.js).

Ext.define('AM.view.user.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',

    title: 'All Users',
    store: 'Users',

    columns: [
    { header: 'Name', dataIndex: 'Name', flex: 1 },
    { header: 'Email', dataIndex: 'Email', flex: 1 }
    ]
});

Then, in our controller (app/controller/Users.js) we have the working code that actually does the editing and updating of the record.  the code is below:

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
    stores: ['Users'],
    models: ['User'],
    views: ['user.Edit', 'user.List'],
    refs: [
        {
            ref: 'usersPanel',
            selector: 'panel'
        }
    ],
    init: function() {
        this.control({
            'viewport > userlist dataview': {
                itemdblclick: this.editUser
            },
            'useredit button[action=save]': {
                click: this.updateUser
            }
        });
    },
    editUser: function(grid, record) {
        var edit = Ext.create('AM.view.user.Edit').show();

        edit.down('form').loadRecord(record);
    },
    updateUser: function(button) {
        var win    = button.up('window'),
            form   = win.down('form'),
            record = form.getRecord(),
            values = form.getValues();
        record.set(values);
        win.close();
        this.getUsersStore().sync();
    }
});

Basically, this follows the exact same method we described above for implementing the CRUD.  Note getUsersStore().sync.  This does the same thing as shown above to force the appropriate call the back end.

Remarks

Hope this helps give you a little more understanding into updating with the ExtJS library. If you are looking for the source, it’s in part 1 of this series.

Introduction

This three part series demonstrates a very simple example of using Entity Framework Code First (Version 4.3) to create a SqlServer Table and populate it with data (that is part 1).  Part 2 adds two new columns to the table a populates the data conditionally (while migrating from a non migration enabled project), and Part 3 adds a new column with a default value to a migration enabled code first project.

As it happens, I watched President Obama drive by me in San Francisco yesterday so he will be the star of the post.  The table we will use is called Presidents, and the columns we will add are Year Elected and Current.  We will obviously only have one current president so we will have to have our migration conditionally set CurrentPresident to true for Obama.

 

What To Do

namespace ConApp
{
    internal class Program
    {
        private static void Main()
        {
            Database.SetInitializer<SiteDB>(new SiteDBInitialize());
            using (var myContext = new SiteDB())
            {
                var x = myContext.Presidents.ToList();
            }
        }
    }

    public class SiteDB : DbContext
    {
        public DbSet<Presidents> Presidents { get; set; }
    }

    public class Presidents
    {
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public long Id { get; set; }
        public string LastName { get; set; }
    }

    public class SiteDBInitialize :
        DropCreateDatabaseIfModelChanges<SiteDB>
    {
        protected override void Seed(SiteDB context)
        {
            context.Presidents.Add(new Presidents { LastName = "Reagan" });
            context.Presidents.Add(new Presidents { LastName = "Bush" });
            context.Presidents.Add(new Presidents { LastName = "Obama" });
            context.SaveChanges();
        }
    }

}

I won’t go into details of all the steps because this is all very well documented on the EF site at this url among others:

http://msdn.microsoft.com/en-us/library/gg696189(v=vs.103).aspx

What is interesting to note is that I am implementing the interface DropCreateDatabaseIfModelChanges.  What stumped me for a while was that in my main console, we always call new SiteDBInitialize), however what that class implments determines the action on creation.  There are three choices.

1. DropCreateDatabaseIfModelChanges
2. DropCreateDatabaseAlways
3. CreateDatabaseIfNotExists

The meaning is self explanatory, you just need to derive from the appropriate class depending on what your intention is.  All the calls can be seen here in the MSDN documentation:  http://msdn.microsoft.com/en-us/library/gg696142(v=vs.103).aspx

Hope this helps, read on to part 2 to find out how to add some columns and conditionally populate them.

Introduction

This three part series demonstrates a very simple example of using Entity Framework Code First (Version 4.3) to create a SqlServer Table and populate it with data (that is part 1).  Part 2 adds two new columns to the table a populates the data conditionally (while migrating from a non migration enabled project), and Part 3 adds a new column with a default value to a migration enabled code first project.

As it happens, I watched President Obama drive by me in San Francisco yesterday so he will be the star of the post.  The table we will use is called Presidents, and the columns we will add are Year Elected and Current.  We will obviously only have one current president so we will have to have our migration conditionally set CurrentPresident to true for Obama.

Goal

In this post, we will show the steps necessary to add a single column (Party) to the Presidents table.  Because in Part 2 we enabled Code Migrations, this will be a lot simpler than in Part 2. 

Let’s Do it!

Now, we have a stable project that is running correctly with the database table Presidents defined as follows:

We want to add a new column “Party” so let’s update the model file (it’s in our original programs.cs file).  It will now be changed as follows:

public class Presidents
{
    [Key]
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public long Id { get; set; }
    public string LastName { get; set; }

    // New Columns for first migration
    public int YearElected { get; set; }
    public bool CurrentPresident { get; set; }

    // New Column for second migration
    public string Party { get; set; }
}

We now have to create the .cs files in the MIgration folder that will know about this change.  So, we simply execute the command from the package manager Add-Migration AddNewColumnParty and we get the following results:

PM> Add-Migration AddNewColumnParty

Scaffolding migration ‘AddNewColumnParty’.

The Designer Code for this migration file includes a snapshot of your current Code First model. This snapshot is used to calculate the changes to your model when you scaffold the next migration. If you make additional changes to your model that you want to include in this migration, then you can re-scaffold it by running ‘Add-Migration 201202171832107_AddNewColumnParty’ again.

Now, we want to add some customization because we know that Bush and Reagan are republicans and Obama is a democrat.  So, we add to the “Up()” method the following:

public override void Up()
{
    AddColumn("Presidents", "Party", c => c.String());

    Sql("UPDATE Presidents SET Party = 'Republican' WHERE LastName='ReaganX'");
    Sql("UPDATE Presidents SET Party = 'Republican' WHERE LastName='BushX'");
    Sql("UPDATE Presidents SET Party = 'Democrat' WHERE LastName='ObamaX'");
}

Now, we run the package manager command: Update-Database –Verbose and the work is done for us.

PM> Update-Database -Verbose

Using NuGet project ‘ConApp’.

Using StartUp project ‘ConApp’.

Target database is: ‘agelessemail’ (DataSource: ., Provider: System.Data.SqlClient, Origin: Configuration).

Applying explicit migrations: [201202171832107_AddNewColumnParty].

Applying explicit migration: 201202171832107_AddNewColumnParty.

ALTER TABLE [Presidents] ADD [Party] [nvarchar](max)

UPDATE Presidents SET Party = ‘Republican’ WHERE LastName=’ReaganX’

UPDATE Presidents SET Party = ‘Republican’ WHERE LastName=’BushX’

UPDATE Presidents SET Party = ‘Democrat’ WHERE LastName=’ObamaX’

[Inserting migration history record]

Now, looking at the generated data we have:

Keep in mind that “Update-Database” figured out what database we were on and just did the appropriate update.  The beauty of this is if some developer in the group is on a different version, all she has to do is say “Update-Database” and there database will be brought up to date along with whatever version was current at the time.

Conclusions

All I can say is “Congrats!” to the Microsoft engineers.  I’ve been doing ORM’s for a long time and have my doubts along the way about some Microsoft has rolled out, but this time, I think they really have listened and done what we need.

Introduction

This three part series demonstrates a very simple example of using Entity Framework Code First (Version 4.3) to create a SqlServer Table and populate it with data (that is part 1).  Part 2 adds two new columns to the table a populates the data conditionally (while migrating from a non migration enabled project), and Part 3 adds a new column with a default value to a migration enabled code first project.

As it happens, I watched President Obama drive by me in San Francisco yesterday so he will be the star of the post.  The table we will use is called Presidents, and the columns we will add are Year Elected and Current.  We will obviously only have one current president so we will have to have our migration conditionally set CurrentPresident to true for Obama.

Our Goal

Here We Go

public class SiteDBInitialize :
        CreateDatabaseIfNotExists<SiteDB>
    {

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Text;
using System.Data.Entity;

namespace ConApp
{
    internal class Program
    {
        private static void Main()
        {
            Database.SetInitializer<SiteDB>(new SiteDBInitialize());
            using (var myContext = new SiteDB())
            {
                var x = myContext.Presidents.ToList();
            }
        }
    }

    public class SiteDB : DbContext
    {
        public DbSet<Presidents> Presidents { get; set; }
    }

    public class Presidents
    {
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public long Id { get; set; }
        public string LastName { get; set; }

        // New Columns:
        public int YearElected { get; set; }
        public bool CurrentPresident { get; set; }
    }

    public class SiteDBInitialize :
        CreateDatabaseIfNotExists<SiteDB>
    {
        protected override void Seed(SiteDB context)
        {
            context.Presidents.Add(new Presidents
                                       {
                                           LastName = "Reagan",
                                           CurrentPresident = false,
                                           YearElected = 1984
                                       });
            context.Presidents.Add(new Presidents
                                       {
                                           LastName = "Bush",
                                           CurrentPresident = false,
                                           YearElected = 1992
                                       });
            context.Presidents.Add(new Presidents
                                       {
                                           LastName = "Obama",
                                           CurrentPresident = true,
                                           YearElected = 2008
                                       });
            context.SaveChanges();
        }
    }

}

In our case, the initializer will only be called if the database does not exist.  Let’s change the data in the database just so we know that our data has been migrated and not simply replaced.  Here is a screen shot of what I’ve changed it to (notice I’ve added an “x” to the end of each LastName).

Now, if I run this, I get an error that says I need to run migrations.  The error is as follows:

Unhandled Exception: System.InvalidOperationException: The model backing the ‘Si

teDB’ context has changed since the database was created. Consider using Code Fi

rst Migrations to update the database (http://go.microsoft.com/fwlink/?LinkId=23

8269).

   at System.Data.Entity.CreateDatabaseIfNotExists`1.InitializeDatabase(TContext

context)

This is great!  It is telling me my model has changed and telling me where I need to go look to learn what to do.  So, after looking there, I discover (with a little digging) that I need to –EnableAutomatic.

After doing this, I’m surprised to get this error (OK, I admit I’m learning this new feature, it just came out this week) as I’m writing this blog post.

PM> Enable-Migrations

Detected database created with a database initializer. Scaffolded migration ’201202171606443_InitialCreate’ corresponding to current database schema. To use an automatic migration instead, delete the Migrations folder and re-run Enable-Migrations specifying the -EnableAutomaticMigrations parameter.

Code First Migrations enabled for project ConApp.

What I see happened is that Enable-Migrations create a new folder structure as follows:

Basically, what has happened is “Enable-Migrations” did the following:

1. Create a file Migrations/Configuration (determines how migrations behave for the current context, one in this case, DBSite).
2. 201..443_InitialCreate.cs was created because our initial database was created before migrations were enabled.  It represents just the table before the latest columns were added.

Now, we run the package manager commanda: 

Add-Migration AddingNewColumnsElectedYearAndCurrentPresident

And, from that we get the message:

The Designer Code for this migration file includes a snapshot of your current Code First model. This snapshot is used to calculate the changes to your model when you scaffold the next migration. If you make additional changes to your model that you want to include in this migration, then you can re-scaffold it by running ‘Add-Migration 201202171748276_AddingNewColumnsElectedYearAndCurrentPresident’ again.

Now, we have some new files in our Migrations folder as follows:

This file: 201202171748276_AddingNewColumnsElectedYearAndCurrentPresident.cs has code in it that both upgrades and downgrades our database.  Very nice Microsoft!

public partial class AddingNewColumnsElectedYearAndCurrentPresident : DbMigration
    {
        public override void Up()
        {
            AddColumn("Presidents", "YearElected", c => c.Int(nullable: false));
            AddColumn("Presidents", "CurrentPresident", c => c.Boolean(nullable: false));
        }

        public override void Down()
        {
            DropColumn("Presidents", "CurrentPresident");
            DropColumn("Presidents", "YearElected");
        }
    }

Then, to the Up method, let’s add our custom datacolumn settings:

public override void Up()
{
    AddColumn("Presidents", "YearElected", c => c.Int(nullable: false));
    AddColumn("Presidents", "CurrentPresident", c => c.Boolean(nullable: false));

    Sql("UPDATE Presidents SET CurrentPresident = 0,YearElected = 1980 WHERE LastName='ReaganX'");
    Sql("UPDATE Presidents SET CurrentPresident = 1,YearElected = 1992 WHERE LastName='BushX'");
    Sql("UPDATE Presidents SET CurrentPresident = 1,YearElected = 2008 WHERE LastName='ObamaX'");
}

Not forgetting, we need to enable automatic migrations as follows in the Configuration.cs file

internal sealed class Configuration : DbMigrationsConfiguration<ConApp.SiteDB>
    {
        public Configuration()
        {
            AutomaticMigrationsEnabled = true;
        }

Now, Build your app (probably necessary) and run the update database package command:

PM> Update-Database -Verbose

And you’ll get this nice output showing you the sql generated:

Using NuGet project ‘ConApp’.

Using StartUp project ‘ConApp’.

Target database is: ‘agelessemail’ (DataSource: ., Provider: System.Data.SqlClient, Origin: Configuration).

Applying explicit migrations: [201202171748276_AddingNewColumnsElectedYearAndCurrentPresident].

Applying explicit migration: 201202171748276_AddingNewColumnsElectedYearAndCurrentPresident.

ALTER TABLE [Presidents] ADD [YearElected] [int] NOT NULL DEFAULT 0

ALTER TABLE [Presidents] ADD [CurrentPresident] [bit] NOT NULL DEFAULT 0

UPDATE Presidents SET CurrentPresident = 0,YearElected = 1980 WHERE LastName=’ReaganX’

UPDATE Presidents SET CurrentPresident = 1,YearElected = 1992 WHERE LastName=’Bush’

UPDATE Presidents SET CurrentPresident = 1,YearElected = 2008 WHERE LastName=’ObamaX’

[Inserting migration history record]

And when you look at the data, you will of course see:

Conclusions

OK, this was a little more involved than I thought it would be.  Primarily because we were going from a project that did not have code migrations enabled to one that does (I am glad I went through the exercise though).  In Part 3 (which I was not planning on doing) I’ll look at what it takes to add YAC (yet another column) to the Presidents Table now that we have Automatic Code Migrations enabled.

Hope this helps!  Move on to part 3 now.

I’ve also run bootcamp native and had some hanging also, but not as bad as Fusion.

Anyone else have similar experiences?  Any suggestions?  I’ve heard that macbook’s are awesome at running windows 7.  So far, I have not experience that. 

Some Background

Years ago, my friend Bill Venners of Artima told me a life long lesson that I always seem to forget.  He said that when people design installation programs, they always thoroughly test the “default” installation but not all the corner cases around custom options.

Today, while configuring my new MacBook (Best Windows 7 Computer Laptop they say), I learned this lesson all over again.  So, here is the story.

How To Split Your Hard MacBook Primary Drive 50/50, IOS Lion and Windows 7

My thinking is that I need to first allocate a NTFS partition on the MacBook that takes half my hard drive and let the OSX Lion install take over the rest.  After about 10 iterations of IOS complaining that it did not have enough resources, I finally decided to take a step backwards and ask myself “how would my mom be able to do this?” and we all know that Mac’s are designed for my mom.  So, with that thinking, I just let the IOS Lion install take over the entire disk.  Then I ran the Boot Camp Assistant.  It asked me how much of my hard drive I wanted for Windows, I said 50% and everything ran perfect.  No partition magic, no special setup, just take the defaults with bootcamp!

So, I know it’s hard to believe, but I am actually considering getting a Macbook to use as my main development computer.  The reason is I’m using some beta mobile development tools that only support the Mac.  The problem is that if I don’t use these tools and incrementally build my app with them, I will get my app far out of wac (wac being a technical term) that I will never be able to get it back in wac again. 

So, I have a good friend who is a Mac wizard and I thought I’d ask him a question.  Below is my question and his answer.  Keep in mind, my friend is very technical in the Mac world.

Question from me (PC Guy):

I’ve been trying to figure that out for myself which Mac model to get.  If I get one, I want SandyBridge or later.  I think that’s quad core, but hard to tell.  Apple just seems to give dates on the refurbished site for their computers.  It’s also good to know they work with 16gb ram.  I need that because I run big fat windows VM’s.  The other thing I can’t quite figure out is if the 15’s support 2 drives internally if you are willing to forego the optical drive.  I like to run the boot drive as SSD (SATA3) and the secondary drive as just a normal SATA2 or SATA3.

My Friends answer (MAC Guy)

You’re talking like a pc guy. Pick the prettiest one.

My 700+ twitter buddies to the rescue.

I tweet: 

And, within about 5 minutes comes back:

Not to mention from Facebook, another one because my tweets go to Facebook also.

At any rate, I had 3 different people testing my app on an Ipad1 within 15 minutes.

Totally awesome and thank you social buddies!

We have new page on the under the // ABOUT menu on the Silicon Valley Code Camp web site. It’s called “Live Referral Links” and essentially, it’s real time tracking of referral traffic into the code camp web site. We normally get thousands of requests a day processed by our servers. Most of these requests come from search engines, peoples email links, stored favorites, or just typing in the url themselves. However, if a person arrives by clicking on the Silicon Valley Code Camp link at the site http://www.json.org/, that is called a referring link and it is passed to us along with the first request to display our home page. In the code camp program, we are now capturing those referral links, putting the in a database and storing them to be presented.

That’s really only half the story. Now that we have them, we need the author of that link (like Douglas Crockford in the case of http://www.json.org) to log into there code camp account, go to a special page called “My Referral Links”, find from a list of incoming url’s the ones that are his, then essentially take credit for them. Once he has done that (as below), when any user goes to the // ABOUT page, then selects Live Referral Links as is pointed to by the first red arrow, they will see all the referrals to code camp’s site along with how many referrals there were and the user taking credit for those links.

Because the Silicon Valley Code Camp web site is known by the search engines as a very reliable source of knowledge, those sites listed in the Live Referral Links page will get ranked higher and will more often be found. Also, users may directly click on those links and return to the site.

This is good for everyone! Win-Win.

For the Attendees who create links to our site, they get great SEO in return as described above, and for Code Camp, well, we get more traffic and attention which is what we want. Read on for how to setup your own referral links.

Getting Your Links To Show

Put a link on your Blog Post, Company Web Site, Facebook Page, etc.

The first thing you need to do (if you have not done so already) is to put a link to http://www.siliconvalley-codecamp.com/ on one of your pages. Lots of people have done that by simply making a blog post about the event and in the post make sure you include plenty of hyperlinks to the code camp site. No matter where on the site your link goes, you’ll get credit when someone clicks it. That is, if you put a link directly to your sessions or track such as: http://www.siliconvalley-codecamp.com/Sessions.aspx?track=25, the person will land on the mobile track at code camp, but as far as you are concerned, you will get a “Referral Count” accumulated on your link. For example, if you look at http://www.json.org (as pictured below), you can see a Silicon Valley Code Camp link right in the middle of the page. I just started counting referrals this morning and since then, 70 people have clicked on the link.

Once People Click On Your Link, Now What

The Code Camp database is accumulating those links in the background waiting for someone to come and claim them. The way to claim them is to first, make sure you are logged into your account, then go to the // ABOUT menu on the Silicon Valley Code Camp web site and choose the option next to Live Referral Links called My Referral Links. See the screen shot at the top of this post. If you don’t have the My Referral links, it most likely means you are not a speaker and we will need to enable that feature on your account. Email to service@siliconvalley-codecamp.com and we will enable your account so you can chose this option (and promise us you will not be advertising your drug company online here ).

Now, you will be presented with a page that looks like this. For the purpose of this demonstration, I’m going to log in as myself and “claim” some of the SEO I’ve been generating for code camp. Here is the screen you should see.

Notice that there is dropdownlist that contains all the unspoken for incoming referral links. We are all on the honor system here so please only look for ones that belong to you. If you drop the list down (as shown below), you’ll see the full list. Currently, we are only showing referrals that have generated more than 3 hits, however later, we will probably up this number so the list does not get too long.

You can see that I’ve selected my site and the count is 18. that means, since this morning, 18 people have gone to http://peterkellner.net, and on the right side of my blog, I have a link I generated from the Silicon Valley Code Camp “Spread The Word” page and lots of people (18) have clicked on it. BTW, that’s a hint. Go to that page and get a really cool chunk of HTML that you can paste into your post or page and you will have the same thing as me. Several people actually put that right in there post about code camp. It’s very convenient. Just for reference, here is a picture of my http://peterkellner.net site that includes the link to http://www.siliconvalley-codecamp.com.

So, once I’ve selected that from the dropdown, I see a scrren that let’s me push a button saying “Claim the Item Selected in the Above Dropdown as Your Own”. When I press that, I now have claimed it and I’m rewared with this screen below.

If this is all you do, you are in pretty good shape. If you go back to the “Live Referral Links” page, you will immediately see that your link is now being tracked for the world to see. Here is what it looks like now.

If you wanted, you could have pressed the “Edit” button on the previous screen and put a more descriptive name for the URL to show as well as the name of the group you posted in. For example, say this was the home page of bay.net. You could put Bay.Net as the name of the link rather than the ugly link created by the referral. Your credit is still the same. Also, the last column shown is from your registration page (web site).

That’s it for now. Start Posting!!!

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.

Well, I’m sure that .Net is a part of Windows 8. I also now know that if you want to continue to write c# or vb code for the “new” part of Windows 8 (Metro) you can, however Microsoft has created a new API they are calling WinRT.   WinRT does have a full CLR and the languages c# and vb will be supported.  However, the API you call has changed.  Miguel has a great article that explains much of this here:  http://tirania.org/blog/archive/2011/Sep-15.html

It’s a brave new world!  Much has changed, much is the same.

Something that may not be obvious is if are creating an asp.net WebForms project and you put a datasource such as SqlDataSource or ObjectDataSource for example on the page, how can you prevent the SqlSelect associated with that datasource from being triggered.

The answer is to set the control’s visible property to false.  That’s it!

The Why

The reason you might want to do this is for a case where you have a public facing web page that might be easily subjected to a denial of service attach.  If that web page is always causing some SqlDataSource to fire, you could easily find your SqlServer overloaded.  At least by checking to see a user is logged in before firing the sql statement, you buy yourself a little bit of protection.

The Code

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void
        GridView1_SelectedIndexChanged(object sender, EventArgs e)
    {

    }

    protected void Page_Init(object sender, EventArgs e)
    {
        if (!Context.User.Identity.IsAuthenticated)
        {
            GridView1.Visible = false;
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:CodeCampSV06 %>"
            SelectCommand=
            "SELECT [Id], [Username], [Email] FROM [Attendees] ORDER BY [Id] DESC">
            </asp:SqlDataSource>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
            DataKeyNames="Id" DataSourceID="SqlDataSource1"
            onselectedindexchanged="GridView1_SelectedIndexChanged">
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False"
                    ReadOnly="True" SortExpression="Id" />
                <asp:BoundField DataField="Username" HeaderText="Username"
                    SortExpression="Username" />
                <asp:BoundField DataField="Email" HeaderText="Email"
                SortExpression="Email" />
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>

(AKA, how to not use templates to do a simple GridView Column Formatting)

This post is inspired by another post on did on GridView date formatting years ago.  It’s still very popular.

If you are like me, you don’t like using GridView Templates because it makes you write ugly verbose code.  In this post, I’ll show you how to do a quick customization of the BoundField asp.net  server control.  That is, the one you typically see in GridView as follows:

What we plan to do, is to create a custom control that looks like the following:

and will end up displaying data in a table that looks like the following:

So, one approach could be to simply convert the second column into a template with GridView and build a function to call that converts the column from numbers like 267030000 to 267.3 MB.  To do that, the code on the GridView will look like the following:

And, the code behind will be as follows:

namespace GridViewExtendedBoundField{    public partial class WebForm2 : System.Web.UI.Page    {        protected void Page_Load(object sender, EventArgs e)        {

        }

        protected string FormatToBytes(long bytes)        {            return FormatBytes(bytes);        }

        public string FormatBytes(long bytes)        {            const int scale = 1024;            var orders = new string[] { "GB", "MB", "KB", "Bytes" };            var max = (long)Math.Pow(scale, orders.Length - 1);            foreach (string order in orders)            {                if (bytes > max)                    return string.Format("{0:##.##} {1}", decimal.Divide(bytes, max), order);                max /= scale;            }            return "0 Bytes";        }    }}

<%@ Register Assembly="CustomControls"  Namespace="BoundControls" TagPrefix="cc1" %>...<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"            DataKeyNames="Id,Bytes" DataSourceID="ObjectDataSource1">  <Columns>    <asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True"        SortExpression="Id" />    <cc1:BoundFieldBytesDisplay DataField="Bytes" FormatAsFancyBytes="true"   >    </cc1:BoundFieldBytesDisplay>

The actual custom control you have to include is simply in library reference by the Assembly CustomControls (where you can put other stuff like this).  That code is as follows:

using System;using System.Web.UI.WebControls;

namespace BoundControls{    public class BoundFieldBytesDisplay : BoundField    {        public bool FormatAsFancyBytes        {            get            {                if (ViewState["FormatAsFancyBytes"] == null)                {                    return false;                }                return (bool) ViewState["FormatAsFancyBytes"];            }            set { ViewState["FormatAsFancyBytes"] = value; }        }

        protected override string FormatDataValue(object dataValue, bool encode)        {            if (!FormatAsFancyBytes)            {                return base.FormatDataValue(dataValue, encode);            }            else            {                return FormatBytes(Convert.ToInt64(dataValue));            }        }

        /// <summary>        /// http://sharpertutorials.com/pretty-format-bytes-kb-mb-gb/        /// </summary>        /// <param name="bytes"></param>        /// <returns></returns>        public string FormatBytes(long bytes)        {            const int scale = 1024;            var orders = new[] {"GB", "MB", "KB", "Bytes"};            var max = (long) Math.Pow(scale, orders.Length - 1);            foreach (string order in orders)            {                if (bytes > max)                    return string.Format("{0:##.##} {1}", decimal.Divide(bytes, max), order);                max /= scale;            }            return "0 Bytes";        }    }}

That’s basically it!  Notice that in the custom control, all we have done is defined a property named “FormatAsFancyBytes” so we can set that to true.  Once that happens, we simply call the FormatBytes method and it does the job we expect. If we have “FormatAsFancyBytes” false, or left out, then this control will perform identically to a BoundField control because we are calling the base class.

Keep in mind, you can add all kinds of special properties now to this control to handle all sorts of formatting that might be common to your business.

Here is the sample project build with Visual Studio 2010 that demonstrates the above code.

In this article, we will  build from scratch, using Visual Studio 2010 Beta 2 a simple application that lets us view Silicon Valley Code Camp Attendees that have authorized us to share their data.  We will be using no special RIA Services Visual Studio 2010 design tools to do this.  We will:

• Create the Entity Framework Repository
• Create the Domain Service
• Wire up an Appropriate Get Method that Returns in IQueryable
• Call From the Client Code the Domain Service
• Show The Results
• Observations

First, we need to create a new Visual Studio Project.  We do that by using the File/New Project and chose “Silverlight Business Application”.

Create The Entity Framework

Then, we need to create an Entity Framework Repository that will be the target of our Domain Service.  We do that by adding to the web project (not the top, Silverlight project), we just created and “ADO.NET Entity Data Model”.  We’ll call it ModelSVCC for Model Silicon Valley Code Camp.

We use the option “Generate From Database” as follows:

Choose the appropriate connection (in our case svcodecamp on our local Sql Server 2008 database).

For simplicity, choose all tables and views as follows.

Do a Rebuild/All to make sure all the template code get’s generated and we are done with our first step.

Create the Domain Service

Next, create the Domain Service.  This is done by adding again to the web project the Domain Service as follows.

Name it DomainServiceSVCC.cs again for Silicon Valley Code Camp.

Next check all tables and views, make sure “Enable Client Access” is checked and also “Generate associated classes for meta data”.  Enable Client Access adds an attribute to the generated domain class which tell Visual Studio (on building) to generate the same domain classes on the client (Silverlight) side.  This means that you are writing both your client and server code at the same time!  Very convenient.

Now, to the method generated in the Domain Service class add an OrderBy Linq command so that the method GetAttendeesWithShare has an implicit order and Skip and Take LINQ will work and the total number of records can be easily obtained (notice the yellow highlighing is the code we added, the rest was there before).

Finally, Rebuild/All again and we are done creating the domain service class for this example.

Wire up an Appropriate Get Method that Returns in IQueryable

Now that we have our Domain Service built on the Server side (and of course it get’s exposed on the client side with Visual Studio 2010 template generating magic), we can go to one of the pages built in the default template, add a Silverlight DataGrid and assign our Domain Context to that. Let’s add the list of attendees to our Home Page.  We do that by going to the View\Home.xaml file and simply add a DataGrid tag to the page (see below highlighted in yellow, we simply typed that in or could have dragged it from the toolbar if we are so included).

Then, we go to the code behind of this page and add the following code to the “OnNavigateTo” enent of the Home.xaml page.

 var context = new DomainServiceSVCC();
 dataGrid1.ItemsSource = context.AttendeesWithShares;
 context.Load(context.GetAttendeesWithSharesQuery());

Now, when we rebuild all and run, we get:

When we click on the Id’s column header, we get the data sorted in reverse Id order, even though we never code an event for that!

Observations

So, what have we done?  Well, we’ve done a lot. first, we’ve create a Domain Service that uses WCF on the server side.  We created code on the Silverlight client that called this domain service.  We got databinding right through to our output.  Be very clear that in our code we added to the OnNavigate Event (repeated here)

we made a clear step across the network boundary.  We created the DataService context and when we loaded it, all the async magic just happened for us.  No wsdl’s, proxies to code, keep updated, etc.  All that actually happens for us, but we don’t have to worry about it.  I think I’m in love.

In this article, we will use the the Visual Studio 2010 Beta2 Tooling to create a Sessions DataGrid.  We will add a Pager to it as well as a Silverlight busy indicator which will show while the data is loading.  In Article 1, we build a simple DataGrid with code behind, in this article, it will all be declarative in XAML built with the Visual Studio 2010 designer.

First thing we need to do is add a new Silverlight Navigation Page to the Silverlight project (not the web project) in the Views folder.

Then, copy the code from the Home Page to get the top two default sections that appear on every page as follows:

And the actual code:

<StackPanel x:Name="ContentStackPanel"
            Style="{StaticResource ContentStackPanelStyle}">
    <TextBlock x:Name="HeaderText" Style="{StaticResource HeaderTextStyle}"
               Text="{Binding Path=ApplicationStrings.HomePageTitle,
               Source={StaticResource ResourceWrapper}}"/>
    <TextBlock x:Name="ContentText" Style="{StaticResource ContentTextStyle}"
               Text="Home page content"/>
    <Image Height="393" Name="image1" Stretch="Uniform" Width="467"
               Source="/Presentation1;component/Images/IMG_1504.JPG" />
</StackPanel>

Change text to “Speaker page content” and change the resource string to ApplicationString.SpeakerPageTitle and update the ApplicationStrings.resx file as follows:

Then, drag a DataGrid to the Speaker.xaml design surface (after removing the image tag which was the picture on the home page we copied over).

Now, we do what Microsoft calls “Connect the Dots DataBinding”.  That is, we go to the Data Sources Tab

Drag the SpeakersShort2009 box (shown in yellow below) to the DataGrid showing on the design surface.

That automatically creates a bunch of xaml including the RIA Domain DataSource, which includes a reference to the correct query method and the correct Domain Context.  Very nice!

<riaControls:DomainDataSource AutoLoad="True" Height="0"
                                      LoadedData="speakersShort2009DomainDataSource_LoadedData"
                                      Name="speakersShort2009DomainDataSource"
                                      QueryName="GetSpeakersShort2009Query" Width="0">
            <riaControls:DomainDataSource.DomainContext>
                <my:DomainServiceSVCC />
            </riaControls:DomainDataSource.DomainContext>
        </riaControls:DomainDataSource>

Now, we do the same thing with the DataPager (which may have to add to the toolbox with “Choose Items” That gives us some xaml that looks like the following.

<data:DataPager Height="26"
                HorizontalAlignment="Left" Margin="720,325,0,0"
                Name="dataPager1" VerticalAlignment="Top"
                Width="200"
                PageSize="10"/>

Notice that I put PageSize in.  That does not happen by default, and in my presentation, I forgot this and for a while could not figure out why the paging was not working.  Try and not make the same mistake!

Then, drag the same DataSource as we dragged to the DataGrid and drop it on the Paging control as follows:

That automatically binds the DataPager to the same DomainDataSource as the DataGrid’s DomainDataSource.  Here is the XAML created.

 <data:DataPager Height="26" Name="dataPager1" Width="200"
   Source="{Binding ElementName=speakersShort2009DomainDataSource, Path=Data}" />

The next thing is to use the new “Reset-All” for styling.  It’s very simple.  Right click on the design surface and simply click “Layout/Reset” as follows:

Now, when we run this, we get:

Finally, to put a “Busy Indicator” control on the page, we simply drag out the busy Indicator onto the design surface. It likely will not be in your toolbox, so like the DataPager, you will need to add it to the toolbar as follows:

Then, drag it from the toolbox right onto the DataGrid as follows:

Then, once it’s on the DataGrid (and in the XAML), you need to right click on it and change some of it’s properties.

First, set the “IsBusy” property by checking the checkbox, then resize the control itself so it shows the text and is a pleasant size.

The next step is a little more tricky.  You need to find the property in the BusyIndicator called DataContext. Right click on that as follows and press “Apply Data Binding”.

Now, you are setting the Source so first select “ElementName”, then chose speakersShort2009DomainDataSource as follows:

Then, go to the “Path:” and set the property “DomainContext” and the method to “IsLoading” as follows:

What this has done is created a binding expression using a very nice Visual Studio 2010 Tool.  It’s assigned that binding expression to the DataContext of the DomainDataSource.

<riaControls:DomainDataSource AutoLoad="True" Height="0"
         LoadedData="speakersShort2009DomainDataSource_LoadedData_2"
                              Name="speakersShort2009DomainDataSource"
                              QueryName="GetSpeakersShort2009Query" Width="0"
   DataContext="{Binding ElementName=speakersShort2009DomainDataSource, Path=DomainContext.IsLoading}">
    <riaControls:DomainDataSource.DomainContext>
        <my:DomainServiceSVCC />
    </riaControls:DomainDataSource.DomainContext>
</riaControls:DomainDataSource>

Now, when we finally run our program, we first get the busy indicator as the data is being asynchrously loaded which looks like this:

Then, when the data finally loads, looks like the following:

Notice the paging control at the bottom, and notice the BusyIndicator has gone away.

That’s it for this article.  In the next article, we will style this page as well as add Converts to show the Speakers picture and add a hyperlink to the sessions associated with each speaker.

Below is some simple code that lets me do this.  Notice, it’s important to call StackTrace with true, otherwise the line numbers don’t appear.

HTH’s!

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Text;

namespace ConsoleApplication1
{
    class Program
    {
        static void Main(string[] args)
        {
            TestClass.GoNow();
        }
    }

    class TestClass
    {
        public static void GoNow()
        {
            var stackTrace = new StackTrace(true);
            foreach (var r in stackTrace.GetFrames())
            {
                Console.WriteLine("Filename: {0} Method: {1} Line: {2} Column: {3}  ",
                    r.GetFileName(),r.GetMethod(), r.GetFileLineNumber(),
                    r.GetFileColumnNumber() );
            }
        }
    }

}

So, what’s wrong with using tabs to signal nesting levels and dispense with semi-colons?  Well, for me, that is just too hard.  I always seem to mess up and my code stops working.  What about line continuations?  I just have to ask why?  Want to continue, just press the return key.  Not much else to remember.

In College, I learned a language called PL/1 (long forgotten) that required semi-colons.  I remember the compiler would constantly spit out errors saying “Maybe you have missed your semi-colon?”.  I use to find that very annoying, but now, that I’m a semicolon lover, I just happily type them at the end of each statement I want terminated.

There are dissenters however.  For example, the TheMightyFavog says “Let’s get rid of it.  Nobody knows how to use the thing anyway”.

Just my 2 cents.

http://www.siliconvalley-codecamp.com (come!)

Thanks for hosting!

At Gayles Deli, then in the Falafel Office

The company I’m now working at is small and we don’t have a lot of resources to maintain hardware and do operating system type support.  We do have a high load requirement so we need a very robust supported solution.  Before this, I’d always been in the under $50 per month type plan with ORCSWeb, but I decided I needed more servers and a higher level of support.  I really did not know what level of support to expect when signing up for the managed servers but decided to go for it anyway.

All  can say is WOW!!!  I am over the top impressed.

We currently have 3 virtual servers hosted at ORCSWeb.  One, we use as a development server, and the other two are in a webfarm configuration.  I’ve always believed that when you go into production with a web site it’s critical you start with 2 servers in a webfarm.  it’s really easy to go from 2 to 10, but can be very painful to go from 1 to 2.   That’s a topic for another post, but suffice it to say, 2 is the minimum.

So, why am I so impressed?  First, the support team they assigned to me is totally awesome.  They all are focussed and competent which is a total relief compared with most hosting companies I’ve dealt with.  Other companies always have good people, but it seems to be the bad ones that really give me cause to remember.  Second, because I paid extra for the full managed support options on our three servers, I’ve been able to ask the things like the following.  Almost all of them I could do myself, but I’m swamped with my technology role in the new company and really appreciate being able to hand stuff like this off.

• I’ve pointed my MX record at my .149 server.  Could you please set up email and create the following 7 accounts.
• Please Setup a secure ftp server at the following address with the following username and password (and make sure the user is locked down to the root)
• Setup DFS Replication between these two directories on .148 and .149
• Create a RoboCopy script that copies files from my dev server to the .149 mirrored directory
• Please set up web statistics for me on http://www.siliconvalley-codecamp.com
• Please figure out why SqlServer 2008 is not letting me access catalog MyStuff1 from user 3p1 and fix
• Please make a replicate of website MyWeb1.com including the sqlserver catalog’s and put it on MyWeb2.com on server .149
• Please replace the sqlserver catalog MyStuff3 on server .149 with the bak file I uploaded to my ftp server
• I could go on and on, but I think you are getting the idea.
• Always with a smile, 24×7, what else can I say.

By the way, if you want to see one of my sites hosted there, go to http://www.siliconvalley-codecamp.com

Thank you ORCSWeb for making things a lot easier for me.

public enum CompanyAddressType
    {
        Unknown = 0,
        Primary = 1,
        Warehouse = 2,
        Distribution_Center = 3,
        Cross_Dock = 4
    }

You want to iterate through the list and put the data into an asp.net dropdownlist.

Here is the simple code:

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                string[] names = Enum.GetNames(typeof(CompanyAddressType));
                var values = (CompanyAddressType[])Enum.GetValues(typeof(CompanyAddressType));
                for (int i = 0; i < names.Length; i++)
                {
                    DropDownListCompanyAddressType.Items.Add(new ListItem(names[i], values.ToString()));
                }
            }
        }

There are probably easier ways to do it, but this works.

and…

HTH’s.