ProgramGood.Net - VidPub

Dynamics and ExpandoObject

Dave Mateer — Thu, 06 Oct 2011 20:23:30 GMT

Whilst getting my head around Rob Conery’s Massive ORM, I needed to figure out what the dynamic keyword is in C#4:

class Program {

 static void Main(string[]
args) {

 Calculator calc = new Calculator();

 int sum = calc.Add(1, 2);

 Console.WriteLine(sum);

 Console.ReadLine();

 }

 }

 public class Calculator {

 public int Add(int a, int b)
{

 return a+b;

 }

 }

creation of an object, invokation of a method, and the collection of a return value

Var

Can represent any type that can be determined at compile time.

class Program {
static void Main(string[] args) {
//int
var i = 5;
//string
var x = "hello";
//int[]
var y = new[] { 0, 1, 2, 3 };
//anonymous type
var anon = new { Name = "Dave", Age = 34 };
//List<int>
var list = new List<int>();
//Calculator
var calc = new Calculator();
int sum = calc.Add(1, 2);
Console.WriteLine(sum);
Console.ReadLine();
}
}

public class Calculator {
public int Add(int a, int b) {
return a+b;
}
}

Dynamic

at runtime you get the type

 class Program {

 static void Main(string[]
args) {

 //int

 dynamic i = 5;

 //string

 dynamic x = "hello";

 //int[]

 dynamic y = new[]
{ 0, 2, 3, 4 };

 //anonymous type

 dynamic anon = new {Name="Dave",
Age=34};

 Console.WriteLine(i + x);

 dynamic calc = new Calculator();

 //don't get intellisense
when press .

 int sum = calc.Add(1, 2);

 Console.WriteLine(sum);

 Console.ReadLine();

 }

 }

 public class Calculator {

 public int Add(int a, int b)
{

 return a+b;

 }

 }

ExpandoObject and TryInvokeMember

An object whose members can be dynamically added and removed at runtime.

can’t do anything with the expandoObject though!

Much better. Saying to the compiler – “Playing with a different set of rules”.

Why doesn’t Product need to by Dynamic?

 dynamic tbl = new DynamicModel("Northwind", "Products", "ProductID");

 //tbl.Single returns
a dynamic of type ExpandoOnject, not an ExpandoObject.

 //acutally an IEnumrable<dynamic>.FirstOfDefault()

 var product = tbl.Single();

We don’t need product to be dynamic here as tbl.Single returns a dynamic of type Expando.

tbl has to be dynamic otherwise the TryInvokeMember wont work, as there is no method called Single.

VidPub8–Reporting

Dave Mateer — Sun, 02 Oct 2011 21:54:00 GMT

Use data to make decisions
Demonstrate validity and value of business idea

more important than tests/design pattern used??!!!

Annual sales

Excel

how to get the data in.

CSV in.

Pump some test data into system. Skew sales 2:1 for Microsoft videos.

Console app in Tasks to pump in test data.

1000 users, sales etc..

writing reports.

no foreign key in

Historical va Transactional Data

OrderItems….called Fact.

sum, average or count

ETL into DataWarehouse.

Star Schema around fact table

OLAP – Online Analytical Processor

Can run predictive algorithm

OrderItems table..taking ProductID out of OrderItems (historical data)

have tags in there.. but flat.. yuk.. could be subscritpion and yearly

lets have orderType nvarchar(50) – susbscirption or single

can take a while

Costs

cost of selling individual items, and delivery.

eg how big a file is, and how much Amazon charges. 12cents per Gig.

add to episodes table filesize.

high dev mp4

mobile

tablet

streaming (FLV.. not h264 html5)

so have good test data with monthly, yearly and single subsciption… data transfer rates.

Run a tranform on date – quarter and year is fine.

group by vendor.

put into a StoredProcedure

hmm lets make the price per gig rate historical..and put in somewhere.

Report Viewing

Use an Area can view html

Or export to csv

Infrastrucutre/CSVResult

can send back a file result in MVC3.. cool.

excel is really good at working with data..

Hmmm better way is live data

Excel Web Query

Data, From Web

reporting/annual/sales

grouping, subtotal

whats selling the most?

what giving the most value?

what is net income for each sale? price-bandwidth

profit margin

Pivot table

Roll ups by Author

Add Pivot chart so can see which authors are most profitable.

so annual subscription is doing better…

Channel eg Linux, MS, RoR

which channel is giving most profit.. so can plan what to do next.

Review

Excel with Web Query

now – yes is good

1 year – yes

3 years – probably not. SQL Analysis services..

Getting the correct data in the reporting db is most important bit.

VidPub7 - Service Integration

Dave Mateer — Fri, 30 Sep 2011 02:13:21 GMT

Sell stuff
Manage customers (CRM)
Email notifications
Reporting

Shopify

hosted storefront.

30 days free.

theme for store

Order mgt, customer mgt

app – Chimpified… adds into mailchimp.

- create new app

- templates use liquid language.

this is a product page and is hosted at shopify

so is this cart page.

Writing Integration Code

give our app the ability to receive pings that shopify will send back eg json

default IIS locally.. port 80 to test. hmm can’t debug. use logger.

setting up shopify to call back ie have asked shopify to send json post whenever a new order is received.

then can then send test notification from shopify back to local server.

Don’t have orders table.. but use the json sent back by shopify as a guide.

Order Items the same

Testing

Just doing a live test against the port.

namespace VidPub.Tests.Functionals
{

 [TestFixture]

 public class ShopifyTests {

 Orders _orders;

 OrderItems _items;

 public ShopifyTests()
{

 _orders = new Orders();

 _items = new OrderItems();

 }

 string GetJson()
{

 var jsonFile = @"C:\dev\VidPub\Source\VidPub.Web\App_Data\ShopifyPing.js";

 var result = "";

 using (var stream = new StreamReader(jsonFile))
{

 result = stream.ReadToEnd();

 }

 return result;

 }

 void Ping(string url, string data)
{

 HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);

 request.Method = "POST";

 request.ContentType = "application/json";

 //add the form data

 byte[]
byteArray = Encoding.UTF8.GetBytes(data);

 request.ContentLength = byteArray.Length;

 using (var stream = request.GetRequestStream())
{

 // Write the data
to the request stream.

 stream.Write(byteArray, 0,
byteArray.Length);

 }

 var response = (HttpWebResponse)request.GetResponse();

 string result = "";

 using (Stream stream = response.GetResponseStream())
{

 StreamReader sr = new StreamReader(stream);

 result = sr.ReadToEnd();

 sr.Close();

 }

 }

 [SetUp]

 public void Init()
{

 _items.Delete();

 _orders.Delete();

 }

 [Test]

 public void receiver_should_save_one_order()
{

 var url = "http://localhost:50363/shopify/receiver";

 Ping(url, GetJson());

 Assert.AreEqual(1,
_orders.All().Count());

 }

 [Test]

 public void receiver_should_save_two_order_items()
{

 var url = "http://localhost:50363/shopify/receiver";

 Ping(url, GetJson());

 Assert.AreEqual(2,
_items.All().Count());

 }

 }

}

asdf

 //need
to have an action for Shopify pings

 public ActionResult Receiver()
{

 //this is a ping from
Shopify, record the order

 //var order = this.SqueezeJSON();

 //returns a string

 var json = this.ReadJson();

 var order = System.Web.Helpers.Json.Decode(json);

 Logger.LogInfo(order.order_number.ToString());

 //this is ugly

 //an anonymous object

 var newOrder = new {

 OrderNumber = order.order_number,

 ShopifyID = order.id,

 ShopifyName = order.name

 //lots more items
to left right.

 };

 dynamic savedOrder = _orders.Insert(newOrder);

 //line items

 //need to put in the
correct newOrder.ID

 foreach (var item in order.line_items)
{

 var newItem = new {

 OrderID = savedOrder.ID,

 Name = item.Name

 //etc..

 };

 _items.Insert(newItem);

 }

 return Content("OK");

 }

Shopify does it all for us, and sends back the data.

Membership and Billing

subscriptions?

Just run a credit charge once a month and quit whining!

retain users credit cards..ahhh!
the thing that runs charges.. tracks
a scheduler
dunning capability.. what happens when payments fail
upgrades and downgrades

hard to do right.

Chargify – expensive

Recurly – Recurring Billing

Simple monthly ($30pm)
Platinum which allows for downloads ($50pm)

1 time setup fee, trial periods

full blown checkout page. can dns with cname so people think are still on tekpub.

can also handle one-off charges

user has access to their own invoices.

MadMimi – Emailling

can edit the emails straight in madmimi

Rob has written a MadMimi wrapper which is on https://github.com/robconery/MadMimiMailer

Nice and async.

Welcome

Invoice

easily send in invoice# etc..

OpenID

number 1 support calls.

HighRise – CRM (37 signals)

whenever he sends an email out via madmimi, it is bcc’d to highrise

Can see all emails inside highrise

MailChimp – Build Emailling

True high powered email campaigns this is better.

Mailchimp to import from highrise

Can do big push promotional push.

HighRise API

Rob wrote a wrapper.

Using XML for transport.

Hmm but would be nice to observe, or hook in, so that when a users details change it automagically updates CRM.

So can use Massive hooks, inserted updated and deleted. Overrides

HighRise – custom fields.

Review SaaS

help us now – yes

ecommerce (Shopify)
subscription billing (Recurly)
mailers (MadMimi and MailChimp)
templated mailing
mass mailing
CRM (HighRise)

1 year – absoltely..

CRM – sales guy has a CRM tool

Can enter productions, enter discount codes, do mailouts that look great

Data

Do I need to keep orders in own db… or trust shopify? replication of data is bad.

Great to have these services, so he can focus on the core of the business which is creating videos.

VIdPub6.2–BackboneJS

Dave Mateer — Thu, 29 Sep 2011 22:09:26 GMT

catching save.

FormView
= Backbone.View.extend({

 initialize: function ()
{

 _.bindAll(this, 'render');

 this.template
= $("#productionFormTemplate");

 },

 events: {

 "change input": "updateModel",

 "submit #productionForm": "save"

 },

 save: function ()
{

 this.model.save(

 this.model.attributes,

 {

 success: function (model,
response) {

 alert(model.get("Title")
+ " saved");

 model.collection.trigger("itemSaved",
model);

 },

 error: function (model,
response) {

 alert("problem");

 model.trigger("itemError", "There
was a problem saving " + model.get("Title"));

 }

 }

 );

 return false;

 },

**BREAK**

heading towards this:

nice notifications!

Validations are built into backbone:

Is it Really Worth It?

Time spent on user experience is really valuable
Compelling to use
Good for us as developers to stretch

VidPub6–BackboneJS

Dave Mateer — Wed, 28 Sep 2011 05:45:00 GMT

http://documentcloud.github.com/backbone/

MVC for js?

http://documentcloud.github.com/backbone/examples/todos/index.html

http://www.quora.com/What-are-some-good-resources-for-Backbone-js

this is hard! Rob used peepcode.com backbone screencast. Took him 2 weeks to do this.

Use IIS Express.

Areas

Added an area called Api

http://localhost:50363/api/productions/

namespace VidPub.Web.Areas.Api.Controllers{

 public class ProductionsController : ApplicationController {

 DynamicModel _productions;

 public ProductionsController(ITokenHandler tokenStore):base(tokenStore)
{

 _productions = new Productions();

 }

 [HttpGet]

 public ActionResult Index()
{

 return VidpubJSON(_productions.All());

 }

 }

}

Alt+J – in chrome to open downloads, then tab lots to show in folder

Added backbone-min.js from another branch https://github.com/documentcloud/backbone/tree/gh-pages

and underscore-min.js http://documentcloud.github.com/underscore/

VidPub/Productions - View

Backbone is Event-driven.

el is short for Element.

Reference an ID:

#production-list

Reference a class:

.production-list ?

ListView
= Backbone.View.extend({

 render: function ()
{

 $(this.el).html("<h1>Hello!</h1>");

 return this;

 }

});

jQuery(function ()
{

 var view
= new ListView();

 $("#production-list").html(view.render().el);

});

asdf

@Assets.Script("underscore-min.js")

@Assets.Script("backbone-min.js")

@Assets.Script("production-admin.js")

<div id="production-list"></div>

and refactoring:

ListView
= Backbone.View.extend({

 initialize: function ()
{

 this.template
= $("#listTemplate");

 },

 render: function ()
{

 var html
= this.template.tmpl({
name: "Tekpub" });

 $(this.el).html(html);

 return this;

 }

});

jQuery(function ()
{

 var view
= new ListView();

 $("#production-list").html(view.render().el);

});

view:

<script type = "text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

@Assets.Script("underscore-min.js")

@Assets.Script("backbone-min.js")

@Assets.Script("production-admin.js")

<script id="listTemplate" type="text/html">

 <h1>${name}</h1>

</script>

<div id="production-list"></div>

so all he’s doing here is pushing html into the dom.

ViewEvents

But its part of the template and not available when the page loads.

View:

<script type = "text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

@Assets.Script("underscore-min.js")

@Assets.Script("backbone-min.js")

@Assets.Script("production-admin.js")

<script id="listTemplate" type="text/html">

<h1>${name}</h1>

<a href="#">Click me!</a>

</script>

<div id="production-list"></div>

ListView
= Backbone.View.extend({

 initialize: function ()
{

 this.template
= $("#listTemplate");

 },

 events: {

 "click a:": "clickityClick"

 },

 clickityClick: function ()
{

 alert("I been
clicked");

 },

 render: function ()
{

 var html
= this.template.tmpl({
name: "Tekpub" });

 $(this.el).html(html);

 return this;

 }

});

jQuery(function ()
{

 var view
= new ListView();

 $("#production-list").html(view.render().el);

});

here is an example of el not wired up.. and event doesn’t work:

ListView
= Backbone.View.extend({

 initialize: function ()
{

 this.template
= $("#listTemplate");

 },

 events: {

 "click a:": "clickityClick"

 },

 clickityClick: function ()
{

 alert("I been
clicked");

 },

 render: function ()
{

 var html
= this.template.tmpl({
name: "Tekpub" });

 //$(this.el).html(html);

 //sidestep el completly
and getting jQuery to patch in the template

 $("#production-list").html(html);

 return this;

 }

});

jQuery(function ()
{

 var view
= new ListView();

 //$("#production-list").html(view.render().el);

 view.render();

});

Working With Data

Production
= Backbone.Model.extend({});

ListView = Backbone.View.extend({

 initialize: function ()
{

 this.template
= $("#listTemplate");

 },

 events: {

 "click a:": "clickityClick"

 },

 clickityClick: function ()
{

 alert("I been
clicked");

 },

 render: function ()
{

 var html
= this.template.tmpl(this.model.toJSON());

 $(this.el).html(html);

 return this;

 }

});

jQuery(function ()
{

 var production
= new Production({
name: "MVC3!" });

 var view
= new ListView({model:
production});

 $("#production-list").html(view.render().el);

});

pub/sub

binding/subscribing to the change event on this.clickityClick ** careful to use this inside function, otherwise js will look globally in the global window object.

Also setting model to a global variable so we can work with it:

Manually resetting the title to Peaches in chrome.

Bind our change event to render action in the view

Production
= Backbone.Model.extend({});

ListView = Backbone.View.extend({

 initialize: function ()
{

 this.template
= $("#listTemplate");

 this.model.bind("change", this.render);

 window.ViewModel = this.model;

 },

 events: {

 "click a:": "clickityClick"

 },

 clickityClick: function ()
{

 alert("I been
clicked");

 },

 render: function ()
{

 var html
= this.template.tmpl(this.model.toJSON());

 $(this.el).html(html);

 return this;

 }

});

jQuery(function ()
{

 var production
= new Production({
name: "MVC3!" });

 listView = new ListView({model:
production});

 $("#production-list").html(listView.render().el);

});

then in chrome:

listView.model.set({name:"EF"})

the this in this.model.toJSON() keyword changes scope when fired outside of a view such as on a model or a collection

userscore library has a handy bindAll library which resets scope of this to the current view.

Production
= Backbone.Model.extend({});

ListView = Backbone.View.extend({

 initialize: function ()
{

 _.bindAll(this, 'render');

 this.template
= $("#listTemplate");

 this.model.bind("change", this.render);

 window.ViewModel = this.model;

 },

 events: {

 "click a:": "clickityClick"

 },

 clickityClick: function ()
{

 alert("I been
clicked");

 },

 render: function ()
{

 var html
= this.template.tmpl(this.model.toJSON());

 $(this.el).html(html);

 return this;

 }

});

jQuery(function ()
{

 var production
= new Production({
name: "MVC3!" });

 listView = new ListView({model:
production});

 $("#production-list").html(listView.render().el);

});

Backbone collections

What if we need more than 1 model.

Production
= Backbone.Model.extend({});

Productions = Backbone.Collection.extend({

 model : Production,

 url: "/api/productions"

});

these are backbone models.

actual model

reset the view to use a collection instead of a model.

“reset” whenever data is firehosed into collection.

page is going to load
view will be instantiated with empty collection
el is going to be specified
fetch is going to be called
once fetch is completed, collection will fire its reset event
which will fire the render event
render will then push the templated data into el

productions.reset([{Title:"One"}, {Title:"Two"}]) - this will changed the data on the screen as event driven will fire.

Production
= Backbone.Model.extend({});

Productions = Backbone.Collection.extend({

 model : Production,

 url: "/api/productions"

});

productions = new Productions();

ListView = Backbone.View.extend({

 initialize: function ()
{

 _.bindAll(this, 'render');

 this.template
= $("#listTemplate");

 //this.model.bind("change",
this.render);

 this.collection.bind("reset", this.render);

 //window.ViewModel
= this.model;

 },

// events: {

// "click a:": "clickityClick"

// },

// clickityClick: function () {

// alert("I been clicked");

// },

 render: function ()
{

 //var html = this.template.tmpl(this.model.toJSON());

 var html
= this.template.tmpl(this.collection.toJSON());

 $(this.el).html(html);

 return this;

 }

});

jQuery(function ()
{

 //var production =
new Production({ name: "MVC3!" });

 //listView = new ListView({model:
production});

 listView = new ListView({
collection: productions, el: "#production-list" });

 //$("#production-list").html(listView.render().el);

 productions.fetch();

});

Backbone router

24mins in.

using callback function success

Production
= Backbone.Model.extend({});

Productions = Backbone.Collection.extend({

 model : Production,

 url: "/api/productions"

});

productions = new Productions();

ListView = Backbone.View.extend({

 initialize: function ()
{

 _.bindAll(this, 'render');

 this.template
= $("#listTemplate");

 this.collection.bind("reset", this.render);

 },

 render: function ()
{

 var html
= this.template.tmpl(this.collection.toJSON());

 $(this.el).html(html);

 return this;

 }

});

var ProductionAdmin
= Backbone.Router.extend({

 initialize: function ()
{

 listView = new ListView({
collection: productions, el: "#production-list" });

 },

 routes: {

 "": "index",

 "edit/:id": "edit"

 },

 index: function ()
{

 listView.render();

 },

 edit: function (id)
{

 alert("hello");

 //grab the model from
the production

 $("#production-list").html("This
id is " + id);

 //pass it to an editor

 //listView.render();

 }

});

jQuery(function ()
{

 productions.fetch({

 success: function ()
{

 alert("hello2");

 //create the router

 window.app = new ProductionAdmin();

 Backbone.history.start();

 },

 error: function ()
{

 //display a nice error
page

 alert("error");

 }

 });

});

editing: app.navigate("edit/1",true)

#allows back button to work, and hyperlinking back to a certain page to work..all with ajax. Power of backbone!

Working with Data

<a href="#" id="${ID}">${Title}</a>

not using this.. instead HTML5 data storage:

Production
= Backbone.Model.extend({});

Production = Backbone.Model.extend({

 idAttribute : "ID"

});

Productions = Backbone.Collection.extend({

 model : Production,

 url: "/api/productions"

});

productions = new Productions();

ListView = Backbone.View.extend({

 initialize: function ()
{

 _.bindAll(this, 'render');

 this.template
= $("#listTemplate");

 this.collection.bind("reset", this.render);

 },

 events: {

 "click a": "showForm"

 },

 showForm: function (evt)
{

 //get tje ID that
was clicked

 var id
= $(evt.currentTarget).data('production-id');

 //navigate

 app.navigate("edit/" +
id, true);

 return false;

 },

 render: function ()
{

 var html
= this.template.tmpl(this.collection.toJSON());

 $(this.el).html(html);

 return this;

 }

});

FormView = Backbone.View.extend({

 initialize: function ()
{

 _.bindAll(this, 'render');

 this.template
= $("#productionFormTemplate");

 },

 render: function ()
{

 var html
= this.template.tmpl(this.model.toJSON());

 $(this.el).html(html);

 return this;

 }

});

var ProductionAdmin
= Backbone.Router.extend({

 initialize: function ()
{

 listView = new ListView({
collection: productions, el: "#production-list" });

 formView = new FormView({
el: "#production-form" });

 },

 routes: {

 "": "index",

 "edit/:id": "edit"

 },

 index: function ()
{

 listView.render();

 },

 edit: function (id)
{

 listView.render();

 $(formView.el).empty();

 //grab the model from
the production

 var model
= productions.get(id);

 formView.model = model;

 formView.render();

 //$("#production-list").html("This
id is " + id);

 //pass it to an editor

 //listView.render();

 }

});

jQuery(function ()
{

 productions.fetch({

 success: function ()
{

 //create the router

 window.app = new ProductionAdmin();

 Backbone.history.start();

 },

 error: function ()
{

 //display a nice error
page

 alert("error");

 }

 });

});

@{

 ViewBag.Title = "Productions";

 Layout = "~/Views/Shared/_AdminLayout.cshtml";

}

<script type = "text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

@Assets.Script("underscore-min.js")

@Assets.Script("backbone-min.js")

@Assets.Script("production-admin.js")

<script id="listTemplate" type="text/html">

<li>

 <a href="#" data-production-id="${ID}">${Title}</a>

</li>

</script>

<script id="productionFormTemplate" type="text/html">

 <form id="productionForm">

 <input type="text" id="Title"
name="Title" value="${Title}" />

 </form>

</script>

<div class="column
span-5 colborder">

 <div id="production-list"></div>

</div>

<div class="column
span-14">

 <div id="production-form"></div>

</div>

Form Binding

we want to bind the form to the model.. we can .. using events. will wire ourselves.. people working on modelbinders.

showing the model being changed by the view.

formView.model.get("Title")

this should be automatic – use Derik Baily’s modelbinding.

Helpers: copy existing Form.cshtml and rename to Template.cshtml

Nice button CSS, with jQuery template helper html.

nice form using form.css wired through the layout page.

date picker

just had to wire up the datepicker in formview, which wires us the jQueryUI datepicker. jqueryUI is wired up through _adminlayout.

FormView
= Backbone.View.extend({

 initialize: function ()
{

 _.bindAll(this, 'render');

 this.template
= $("#productionFormTemplate");

 },

 events: {

 "change input": "updateModel",

 "submit #productionForm": "save"

 },

 save: function ()
{

 return false;

 },

 updateModel: function (evt)
{

 var field
= $(evt.currentTarget);

 var data
= {};

 data[field.attr('ID')]
= field.val();

 this.model.set(data);

 },

 render: function ()
{

 var html
= this.template.tmpl(this.model.toJSON());

 $(this.el).html(html);

 $(".datepicker").datepicker();

 return this;

 }

});

saving back to server:

reason we’re using IIS Express… cassini doesn’t always work with put.

rails like conventions

so data has been passed back to server via the formView.model.save() call or button press.

Production
= Backbone.Model.extend({});

Production = Backbone.Model.extend({

 idAttribute: "ID",

 url: function ()
{

 return this.isNew()
? "/api/productions/create" : "/api/productions/edit/" + this.get("ID");

 },

});

Productions = Backbone.Collection.extend({

 model : Production,

 url: "/api/productions"

});

productions = new Productions();

ListView = Backbone.View.extend({

 initialize: function ()
{

 _.bindAll(this, 'render');

 this.template
= $("#listTemplate");

 this.collection.bind("reset", this.render);

 },

 events: {

 "click a": "showForm"

 },

 showForm: function (evt)
{

 //get the ID that
was clicked

 var id
= $(evt.currentTarget).data('production-id');

 //navigate

 app.navigate("edit/" +
id, true);

 return false;

 },

 render: function ()
{

 var html
= this.template.tmpl(this.collection.toJSON());

 $(this.el).html(html);

 return this;

 }

});

FormView = Backbone.View.extend({

 initialize: function ()
{

 _.bindAll(this, 'render');

 this.template
= $("#productionFormTemplate");

 },

 events: {

 "change input": "updateModel",

 "submit #productionForm": "save"

 },

 save: function ()
{

 this.model.save(

 this.model.attributes,

 {

 success: function (model,
response) {

 model.collection.trigger("itemSaved",
model);

 },

 error: function (model,
response) {

 model.trigger("itemError", "There
was a problem saving " + model.get("Title"));

 }

 }

 );

 return false;

 },

 updateModel: function (evt)
{

 var field
= $(evt.currentTarget);

 var data
= {};

 data[field.attr('ID')]
= field.val();

 this.model.set(data);

 },

 render: function ()
{

 var html
= this.template.tmpl(this.model.toJSON());

 $(this.el).html(html);

 $(".datepicker").datepicker();

 return this;

 }

});

var ProductionAdmin
= Backbone.Router.extend({

 initialize: function ()
{

 listView = new ListView({
collection: productions, el: "#production-list" });

 formView = new FormView({
el: "#production-form" });

 },

 routes: {

 "": "index",

 "edit/:id": "edit"

 },

 index: function ()
{

 listView.render();

 },

 edit: function (id)
{

 listView.render();

 $(formView.el).empty();

 //grab the model from
the production

 var model
= productions.get(id);

 formView.model = model;

 formView.render();

 //$("#production-list").html("This
id is " + id);

 //pass it to an editor

 //listView.render();

 }

});

jQuery(function ()
{

 productions.fetch({

 success: function ()
{

 //create the router

 window.app = new ProductionAdmin();

 Backbone.history.start();

 },

 error: function ()
{

 //display a nice error
page

 alert("error");

 }

 });

});

MVC3 modelbinders did their job and title in the incoming json is title in our p object.

but we’re not using statically typed objects.. can’t access via FormCollection (as it isn’t a post).. so have coded around:

Multiple types were found that match the controller named

http://ediblecode.com/blog/dot-net/asp-net-mvc/fixing-multiple-types-were-found-that-match-the-controller-named

ControllerBuilder.Current.DefaultNamespaces.Add("VidPub.Web.Controllers");

Date Problem

Wrote and app to test:

namespace MassiveDateTest
{

 class Program {

 static void Main(string[]
args) {

 // test dates in massive
for NZ locale

 //do an insert

 var table2 = new Productions();

 //do it up - the new
ID will be returned from the query

 // fails with

 // exec sp_executesql
N'INSERT INTO Productions (Title,CreatedOn) 

 //VALUES (@0,@1)',N'@0
nvarchar(4000),@1 nvarchar(4000)',@0=N'Buck Fify Stuff',@1=N'30/08/2011'

 var newID = table2.Insert(new {
Title = "Buck
Fify Stuff", CreatedOn = "21/08/2011" });

 Console.WriteLine(newID);

 var table = new Productions();

 //grab all the productions

 var productions = table.All();

 foreach (var item in productions)
{

 // coming through
as 29/08/2011 12:00:00

 Console.WriteLine(item.Title + "
" + item.CreatedOn);

 }

 // this works

 //var newID = table2.Insert(new
{ Title = "Buck Fify Stuff", CreatedOn = "08/30/2011" });

 }

 }

 public class Productions : DynamicModel {

 public Productions()
: base("VidPub", "Productions", "ID")
{}

 }

}

and massive:

 public virtual DbCommand CreateInsertCommand(object o)
{

 DbCommand result = null;

 var expando = o.ToExpando();

 var settings = (IDictionary<string, object>)expando;

 var sbKeys = new StringBuilder();

 var sbVals = new StringBuilder();

 var stub = "INSERT
INTO {0} ({1}) \r\n VALUES ({2})";

 result = CreateCommand(stub, null);

 int counter = 0;

 foreach (var item in settings)
{

 sbKeys.AppendFormat("{0},",
item.Key);

 sbVals.AppendFormat("@{0},",
counter.ToString());

 // DM hack dates

 if (item.Key == "CreatedOn" || item.Key == "UpdatedOn" || item.Key == "ReleasedOn")
{

 string fulldate = item.Value.ToString();

 string[]
dateArray = fulldate.Split('/');

 string day = dateArray[0];

 string month = dateArray[1];

 string year = dateArray[2];

 string dateInUSFormat = month + "/" + day + "/" + year;

 result.AddParam(dateInUSFormat);

 } else

 result.AddParam(item.Value);

 counter++;

 }

so got it writing a British date from C# and transforming into US in the insert code.

put into main project and got it working for

but time comes in on save:

create not working for some reason. **datepicker is in US format already.. need to set to UK

TekPub 5–Data pt 2

Dave Mateer — Tue, 27 Sep 2011 04:09:42 GMT

git mergetool

git checkout –b “admin_home”

Html helpers won’t work with dynamics

Make some Helpers

less abstraction
more control

@helper TextBox(string name, object value=null)
{

 //if value is null,
set to empty string

 var val = value ?? "";

 <p>

 <label>@name</label>

 <input type="text" name="@name" id="@name" value="@val" />

 </p>

}

then

 <legend>Production</legend>


 @Form.TextBox("Title",
@Model.Title)

However we want the Title property to be required:

In MVC3 this would be:" Html.TextBoxFor(x=>x.Title);

and put a Required DataAnnotation attribute on the Production class.

could also tell it to do in unobtrusively with jquery, and jquery validations.

Getting rid of js files:

So now I just have:

Scripts loader for js

@helper Scripts(){

 @Assets.Script("jquery.validate.min.js")

 @Assets.Script("jquery.validate.unobtrusive.min.js")

}

in the Form.cshtml helpers

Validations

@helper ValidationMessage(string name)
{

 <span class="field-validation-valid" data-valmsg-for="@name" data-valmsg-replace="true"></span>

}

@helper TextBoxRequired(string name, object value = null, string requiredMessage = "Required")
{

 var val = value ?? "";

 //using HTML5 and
jQuery validations

 <p>

 <label>@name</label>

 <input type="text" name="@name" id="@name" value="@val" data-val="true" data-val-required="@requiredMessage" />

 @ValidationMessage(name)

 </p>

}

then on the front end:

 <legend>Production</legend>


 @Form.TextBoxRequired("Title",
@Model.Title)

nice.

FInally:

@using (Html.BeginForm())
{

 @Html.AntiForgeryToken()

 @Html.ValidationSummary(true)

 <fieldset>

 <legend>Production</legend>

 @Form.TextBoxRequired("Title",
@Model.Title)

 @Form.TextArea("Description",
@Model.Description)

 @Form.TextBoxNumber("Price",
@Model.Price)

 <p>

 <input type="submit" value="Save" />

 </p>

 </fieldset>

}

and helpers:

@helper Scripts(){

 @Assets.Script("jquery.validate.min.js")

 @Assets.Script("jquery.validate.unobtrusive.min.js")

}

@helper ValidationMessage(string name)
{

 <span class="field-validation-valid" data-valmsg-for="@name" data-valmsg-replace="true"></span>

}

@helper TextBox(string name, object value = null)
{

 //if value is null,
set to empty string

 var val = value ?? "";

 <p>

 <label>@name</label>

 <input type="text" name="@name" id="@name" value="@val" />

 </p>

}

@helper TextBoxRequired(string name, object value = null, string requiredMessage = "Required")
{

 var val = value ?? "";

 //using HTML5 and
jQuery validations

 <p>

 <label>@name
*</label>

 <input type="text" name="@name" id="@name" value="@val" data-val="true" data-val-required="@requiredMessage" />

 @ValidationMessage(name)

 </p>

}

@helper TextBoxNumber(string name, object value = null, string numberMessage = "Should
be a number") {

 var val = value ?? "";

 //using HTML5 and
jQuery validations

 <p>

 <label>@name
*</label>

 <input type="text" name="@name" id="@name" value="@val" data-val="true" data-val-number="@numberMessage" />

 @ValidationMessage(name)

 </p>

}

@helper TextArea(string name, string attributes = "", object value = null)
{

 var val = value ?? "";

 <p>

 <label>@name</label>

 <textarea name="@name" id="@name" @attributes
>@val</textarea>

 </p>

}

More Security

Not using ASP Net Membership, so how can control security on controllers?

We could just add [Authorize(Role)] attribute if we were using ASP Net Membership on each controller class or method.

[Authorize(Roles = "asdf")]

no notion of roles in this site

We are going to go simple – create an Action Filter.

Can’t pass a dynamic argument to an extension method.

Roll own Simple Authorization

make an attribute / ActionFilter

namespace VidPub.Web.Infrastructure
{

 public class RequiredAdminAttribute : ActionFilterAttribute {

 public override void OnActionExecuting(ActionExecutingContext filterContext)
{

 //pull the controller
off the context passed in

 //and cast it as own
ApplicationController

 var controller = (ApplicationController)filterContext.Controller;

 //user logged in?

 if (!controller.IsLoggedIn)
{

 controller.TempData["Error"] = "You
need to be logged in to do that";

 filterContext.HttpContext.Response.Redirect("/account/logon");

 return;

 }

 //is the user an admin

 var adminEmails = new string[]
{ "robconery@gmail.com", "rob@tekpub.com", "davemateer@gmail.com" };

 //CurrentUser is a
field in our ApplicationController

 //can't use var...
as it would be ynamic object..need to tell the compiler

 string userEmail = controller.CurrentUser.Email;

 if (!adminEmails.Contains(userEmail))
{

 controller.TempData["Error"] = "You
are not authorized";

 filterContext.HttpContext.Response.Redirect("/account/logon");

 }

 }

 }

}

this wired up to the field on ApplicationController, which tells us if a user is logged in, and then which user.

then wire up on CruddyController the actions that need to be authorised.

 [RequiredAdmin]

 public virtual ActionResult Create()
{

 return View(_table.Prototype);

 }

 [HttpPost]

 [ValidateAntiForgeryToken]

 [RequiredAdmin]

 public virtual ActionResult Create(FormCollection collection)
{

 dynamic item = _table.CreateFrom(collection);

 try {

 _table.Insert(item);

 return RedirectToAction("Index");

 }

 catch {

 TempData["alert"] = "There
was an error adding this item";

 return View();

 }

 }

 [RequiredAdmin]

 public virtual ActionResult Edit(int id)
{

 var model = _table.Get(ID:
id);

 model._Table = _table;

 return View(model);

 }

 [HttpPost]

 [RequiredAdmin]

 public virtual ActionResult Edit(int id, FormCollection collection)
{

 var model = _table.CreateFrom(collection);

 try {

 _table.Update(model,
id);

 return RedirectToAction("Index");

 }

 catch (Exception ex)
{

 TempData["Error"] = "There
was a problem editing this record";

 return View(model);

 }

 }

A Little jQuery

Firebug

Why:

Write less server code
More response app
More compelling app

Add in json serialization, so we can talk javascript!

Usually we’d go with something like:

 return Json(_table.All(),
JsonRequestBehavior.AllowGet);

json.net a lot of people use as a serialiser.

However lets see if can solve it on own without taking another dependency

Getting Json dates to displayed correctly is a long running problem. Write own, then use strings everywhere to make life simpler. Dave Ward http://encosia.com/ write this.

Couldn’t get json to output correctly, problem was glimpse…

Fiddler was very useful here.

Our new way of calling json serializer:

 [HttpGet]

 public virtual ActionResult Index(string query)
{

 //sidestep viewgeneration
and return json

 //

 IEnumerable<dynamic> results = null;

 results = _table.All();

 return VidpubJSON(results);

 }

 public ActionResult VidpubJSON(dynamic content)
{

 var serializer = new JavaScriptSerializer();

 serializer.RegisterConverters(new JavaScriptConverter[]
{ new ExpandoObjectConverter()
});

 var json = serializer.Serialize(content);

 //Response.ContentType
= "application/json";

 return Content(json);

 }

and Dave Wards converter which cracks open the IDictionary backing the Expando, explicitly assigns key value bindings that are required…

so then we can parse down to a shortDateString (the dates)

namespace VidPub.Web.Infrastructure
{

 public class ExpandoObjectConverter : JavaScriptConverter {

 public override IEnumerable<Type> SupportedTypes
{

 get { return new ReadOnlyCollection<Type>(new List<Type>(new Type[]
{ typeof(ExpandoObject)
})); }

 }

 public override IDictionary<string, object> Serialize(object obj, JavaScriptSerializer serializer)
{

 ExpandoObject expando = (ExpandoObject)obj;

 if (expando != null)
{

 // Create the representation.

 Dictionary<string, object> result = new Dictionary<string, object>();

 foreach (KeyValuePair<string, object> item in expando)
{

 var value = item.Value ?? "";

 if (value.GetType() == typeof(DateTime))

 result.Add(item.Key,
((DateTime)value).ToShortDateString());

 else

 result.Add(item.Key,
value.ToString());

 }

 return result;

 }

 return new Dictionary<string, object>();

 }

 public override dynamic Deserialize(IDictionary<string, object> dictionary, Type type, JavaScriptSerializer serializer)
{

 dynamic result = new ExpandoObject();

 if (dictionary != null)
{

 // Create the representation.

 var dc = (IDictionary<string, object>)result;

 foreach (KeyValuePair<string, object> item in dictionary)
{

 var value = item.Value ?? "";

 dc.Add(item.Key,
value);

 }

 }

 return result;

 }

 }

}

Put verbs HttpPut on Edit post, and HttpDelete on a delete post.

jQuery

Making a searchbox.

<script type="text/javascript">

 $(document).ready(function ()
{

 $("#searchForm").submit(function ()
{

 var val
= $("#search").val();

 alert("You're
looking for " + val);

 return false;

 });

 });

</script>

<h2>Vidpub
Admin</h2>

<form id="searchForm">

 <label>Find:</label>

 <input type="text" id="search"/>

 <input type="submit" value="go" />

</form>

want to search over:

Productions
Episodes
Customers

namespace VidPub.Web.Models
{

 public class Customers : DynamicModel {

 public Customers()

 : base("VidPub", "Customers", "ID")
{

 }

 public dynamic FuzzySearch(string query)
{

 return this.Query(@"select
ID, email from customers

 where email LIKE('%'+@0+'%')",
query);

 }

 }

}

Lucene or full text indexing would be better if we get lots of data.. but for now it will be fine.

<script type="text/javascript">

 $(document).ready(function ()
{

 $("#searchForm").submit(function ()
{

 var val
= $("#search").val();

 //alert("You're
looking for " + val);

 //third is a callback

 $.getJSON("/productions",
{ query: val }, function (data)
{

 alert(data.length);

 });

 return false;

 });

 });

</script>

 [HttpGet]

 public virtual ActionResult Index(string query)
{

 //sidestep viewgeneration
and return json

 IEnumerable<dynamic> results = null;

 if (!string.IsNullOrEmpty(query))
{

 results = _table.FuzzySearch(query);

 }

 else {

 results = _table.All();

 }

 if (Request.IsAjaxRequest())
{

 return VidpubJSON(results);

 }

 return View(results);

 }

it works – we can pass back search results back to the browser using json.

jQuery Templates

using jQuery template:

<script type = "text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

<script type="text/javascript">

 $(document).ready(function ()
{

 $("#searchForm").submit(function ()
{

 var val
= $("#search").val();

 //alert("You're
looking for " + val);

 //third is a callback

 $.getJSON("/productions",
{ query: val }, function (data)
{

 //alert(data.length);

 $("#searchTemplate").tmpl(data).appendTo("#searchResults");

 });

 return false;

 });

 });

</script>

the template:

<script id="searchTemplate" type="text/html">

 <li>

 ${Title}

 </li>

</script>

where to display results:

<div id="searchResults">

</div>

want a link, so need the controller passed in so we can give it that name:

however this will break the templating as there is an array inside…blah something:

this will fix using looping:

<script type="text/javascript">

 $(document).ready(function ()
{

 $("#searchForm").submit(function ()
{

 var val
= $("#search").val();

 $("#searchResults").empty();

 $.getJSON("/productions",
{ query: val }, function (data)
{

 var results
= { controller: "productions",
items: data };

 $("#searchTemplate").tmpl(results).appendTo("#searchResults");

 });

 return false;

 });

 });

</script>

<script id="searchTemplate" type="text/html">

 <table>

 {{each items}}

 <tr>

 <td><a href="${controller}/edit/${ID}">${Title}</a></td>

 </tr>

 {{/each}}

 </table>

</script>

Putting it All Together

Console in Google Chrome is Ctrl+Shift+I

abstracting code out to vidpub-search.js

debugging in console. undefined means jQuery can’t fire a method on the selector I’ve defined.

Instead of selecting by ID, going to select by class:

var vidpubSearch
= {

 resetResults: function (controller)
{

 $(".search-results").empty();

 },

 getResults: function(query,
controller) {

 $.getJSON("/"+controller,
{ query: query }, function (data)
{

 var results
= { controller: controller, items: data };

 $("#searchTemplate").tmpl(results).appendTo("#"+controller+"-search-results");

 });

 }

};

jQuery(function ()
{

 $("#searchForm").submit(function ()
{

 var val
= $("#search").val();

 vidpubSearch.resetResults();

 vidpubSearch.getResults(val, "productions");

 return false;

 });

});

front end:

<script type = "text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

@Assets.Script("vidpub-search.js")

<script id="searchTemplate" type="text/html">

 <table>

 {{each items}}

 <tr>

 <td><a href="${controller}/edit/${ID}">${Title}</a></td>

 </tr>

 {{/each}}

 </table>

</script>

<h2>Vidpub
Admin</h2>

<form id="searchForm">

 <label>Find:</label>

 <input type="text" id="search"/>

 <input type="submit" value="go" />

</form>

<div id="productions-search-results" class="search-results">

</div>

testing

Review

dynamics a possible problem..

we don’t have much code.. nice!

admin ui is simple.

TekPub4–Data

Dave Mateer — Sun, 25 Sep 2011 23:51:11 GMT

Use wordpress theme!

What is the business model?

Sell videos (ie download)
Sell access to the videos (ie stream)
Have small chunks ie episodes

What is our model (starting in baby steps)?

A Customer buys a Production
A Production is one or more Episodes
A Customer buys a Subscription
A Subscription gives access to Productions

so episodes cannot be purchased individually.

Write Tests

CustomerSpecs
SubscriptionSpecs
ProductionSpecs
EpisodeSpecs

Share them with the team as a discussion around business logic.

[TestFixture]

 public class CustomerSpecs : TestBase {

 [Test]

 public void a_user_should_be_able_to_add_production_to_cart()
{

 this.IsPending();

 }

 [Test]

 public void a_user_that_owns_a_production_should_be_able_to_stream()
{

 this.IsPending();

 }

 [Test]

 public void a_user_that_owns_a_production_should_be_able_to_download()
{

 this.IsPending();

 }

 [Test]

 public void a_user_should_have_be_able_to_purchase_sub()
{

 this.IsPending();

 }

 [Test]

 public void a_user_with_monthly_should_only_be_able_to_stream()
{

 this.IsPending();

 }

 [Test]

 public void a_user_with_yearly_should_be_able_to_stream_and_download()
{

 this.IsPending();

 }

 [Test]

 public void a_user_with_cancelled_sub_should_not_be_able_to_stream_or_download()
{

 this.IsPending();

 }

 [Test]

 public void a_user_with_a_suspended_sub_should_not_be_able_to_stream_or_download()
{

 this.IsPending();

 }

 [Test]

 public void a_user_with_overdue_sub_should_be_able_to_stream_or_download()
{

 this.IsPending();

 }

 [Test]

 public void a_user_should_be_able_to_cancel_sub()
{

 this.IsPending();

 }

 }

 //A
Subscription grants access over time

 //there is a monthly
and a yearly

 //a monthly subscription
offers stream only access

 //a yearly offers
stream and download

 //a Customer can buy
a subscription

 [TestFixture]

 public class SubscriptionSpecs : TestBase {

 [Test]

 public void a_subscription_is_only_valid_one_per_user()
{

 this.IsPending();

 }

 [Test]

 public void a_subscription_can_be_pending_current_overdue_suspended_or_cancelled()
{

 this.IsPending();

 }

 [Test]

 public void a_pending_subscription_can_turn_current()
{

 this.IsPending();

 }

 [Test]

 public void a_current_subscription_can_become_overdue_if_payment_late()
{

 this.IsPending();

 }

 [Test]

 public void an_overdue_subscription_can_become_current_if_payment_received_in_full()
{

 this.IsPending();

 }

 [Test]

 public void an_overdue_subscription_can_become_suspended_if_payment_not_received_after_3_tries()
{

 this.IsPending();

 }

 [Test]

 public void a_subscription_can_be_upgraded_from_monthly_to_annual()
{

 this.IsPending();

 }

 [Test]

 public void a_subscription_cannot_be_downgraded_from_annual_to_monthly()
{

 this.IsPending();

 }

 }

//A
Production is a collection of Episodes

 //A Customer can buy
a Production

 //A Customer cannot
buy an individual episode

 [TestFixture]

 public class ProductionSpecs : TestBase {

 [Test]

 public void a_production_has_one_or_more_episodes()
{

 this.IsPending();

 }

 [Test]

 public void a_production_can_cost_0_or_more_dollars()
{

 this.IsPending();

 }

 [Test]

 public void a_production_can_be_in_production_published_suspended_or_offline()
{

 this.IsPending();

 }

 [Test]

 public void a_production_is_viewable_if_not_offline()
{

 this.IsPending();

 }

 [Test]

 public void a_production_can_be_downloaded_if_flagged()
{

 this.IsPending();

 }

 [Test]

 public void episodes_can_be_released_offline_in_process()
{

 this.IsPending();

 }

 [Test]

 public void episodes_are_viewable_if_released()
{

 this.IsPending();

 }

 [Test]

 public void customers_can_see_notes_per_production()
{

 this.IsPending();

 }

 [Test]

 public void customers_can_see_notes_per_episode()
{

 this.IsPending();

 }

 [Test]

 public void customers_can_see_when_an_episode_and_production_was_released()
{

 this.IsPending();

 }

 [Test]

 public void customers_can_see_who_authored_the_production()
{

 this.IsPending();

 }

 [Test]

 public void customers_can_see_how_long_an_episode_is()
{

 this.IsPending();

 }

 [Test]

 public void customers_can_see_total_duration_of_production()
{

 this.IsPending();

 }

DB

DB First, Classes (or code) First, Migrations (from Rails world)

but .NET people don’t know migrations so leave for now.

EF Code-first

git checkout –b “codefirst”

EF Code-first

NuGet install in Web project.

Make classes with some properties:

 public class Production {

 [Required]

 public string Title
{ get; set;
}

 public string Description
{ get; set;
}

 public decimal Price
{ get; set;
}

 }

Rob isn’t a fan of DataAnnotations…messy. More attributes than code… aren’t descriptive.. hard to refactor.

eg in AccountModel:

namespace VidPub.Web.Models
{

 public class ChangePasswordModel {

 [Required]

 [DataType(DataType.Password)]

 [Display(Name = "Current
password")]

 public string OldPassword
{ get; set;
}

 [Required]

 [StringLength(100,
ErrorMessage = "The
{0} must be at least {2} characters long.",
MinimumLength = 6)]

 [DataType(DataType.Password)]

 [Display(Name = "New
password")]

 public string NewPassword
{ get; set;
}

 [DataType(DataType.Password)]

 [Display(Name = "Confirm
new password")]

 [Compare("NewPassword",
ErrorMessage = "The
new password and confirmation password do not match.")]

 public string ConfirmPassword
{ get; set;
}

 }

 public class LogOnModel {

 [Required]

 [Display(Name = "User
name")]

 public string UserName
{ get; set;
}

 [Required]

 [DataType(DataType.Password)]

 [Display(Name = "Password")]

 public string Password
{ get; set;
}

 [Display(Name = "Remember
me?")]

 public bool RememberMe
{ get; set;
}

 }

setup DbContext:

namespace VidPub.Web.Models
{

 public class VidpubDBContext : DbContext {

 public DbSet<Production> Productions
{ get; set;
}

 }

}

Trick#1 – EF will try to use .\SQLExpress

No PK defined.

Guids as PK’s make DBA’s cry?

EF Conventions will use these as PK’s:

ProductionID
ID

namespace VidPub.Web.Models
{

 public class Production {

 [Required]

 public int ID
{ get; set;
}

 [Required]

 public string Title
{ get; set;
}

 public string Description
{ get; set;
}

 public decimal Price
{ get; set;
}

 }

}

with no connection string defined we have our db created.

However its made the nvarchar(MAX) which isn’t good..

namespace VidPub.Web.Models
{

 public class Production {

 [Required]

 public int ID
{ get; set;
}

 [Required]

 [MaxLength(200)]

 public string Title
{ get; set;
}

 public string Description
{ get; set;
}

 public decimal Price
{ get; set;
}

 }

}

however on recompile:

Tip #2: EF Code-first won’t run ALTER… its drop or recreate.

FK

 public class Production {

 [Required]

 public int ID
{ get; set;
}

 [Required]

 public string Title
{ get; set;
}

 public string Description
{ get; set;
}

 public decimal Price
{ get; set;
}

 public ICollection<Episode> Episodes
{ get; set;
}

 }

 public class Episode {

 public int ID
{ get; set;
}

 public string Title
{ get; set;
}

 public string Description
{ get; set;
}

 public int ProductionID
{ get; set;
}

 }

and it gen’s up the database fine.

 var db = new VidPub.Web.Models.VidpubDBContext();

 var p = new Production {
Title = "My
Production" };

 var e = new Episode {
Title = "My
Episode" };

 p.Episodes = new List<Episode>();

 p.Episodes.Add(e);

 db.Productions.Add(p);

 db.SaveChanges();

MVC Scaffolding

git checkout –b “scaffolding”

Install-Package MvcScaffolding

only have this in the model (no dbcontext from above)

namespace VidPub.Web.Models
{

 public class Production {

 public int ID
{ get; set;
}

 [Required]

 public string Title
{ get; set;
}

 public string Description
{ get; set;
}

 public decimal Price
{ get; set;
}

 public ICollection<Episode> Episodes
{ get; set;
}

 }

 public class Episode {

 public int ID
{ get; set;
}

 public int ProductionID
{ get; set;
}

 public string Title
{ get; set;
}

 }

}

Scaffold Controller production

And it worked:

hmm – fast to go.. but even changes need to make eg varchar(max), database regens.. are going to get old v.soon.

Opinion

EF and Code-first… more work…in real world.

Make model in Database:

The less abstractions the better.. he loves rails activerecord.

Scaleable and Maintainable

More dev’s will know EF in the future years than anything else.

Good/Bad opinion of EF -

Massive

Bad – future hires won’t know it

Good

small and simple
high perf
this has worked for Rob in the past

Controller Design

Design RESTfully

REpresentational State Trasfer

“create an experience for a user that is predictable and understandable based on a url”

so now have a controller that is stubbed out and ready to go.

 public class ProductionsController : Controller

 {

 Productions _table;

 public ProductionsController()
{

 _table = new Productions();

 }

 public ActionResult Index()

 {

 return View(_table.All());

 }

then create a view:

fooling the tooling a bit as we’re going to be using dynamics, so chose any object.

Made db in the db! From the dbscript.sql file that came with VidPub.

So now we’ve got data reading from via Massive.

public class ProductionsController : Controller

 {

 Productions _table;

 public ProductionsController()
{

 _table = new Productions();

 }

 public ActionResult Index()

 {

 return View(_table.All());

 }

via Massive (vidpub connection string in web.config)

 public class Productions : DynamicModel {

 public Productions()

 : base("VidPub", "Productions", "ID")
{

 }

<connectionStrings>


 <add name="VidPub" connectionString="server=.\;database=VidPub_Dev;integrated
security=true" />

and rendered:

Views

[HttpPost]

 public ActionResult Create(FormCollection collection)

 {

 dynamic item = _table.CreateFrom(collection);

 try

 {

 _table.Insert(item);

 return RedirectToAction("Index");

 }

 catch

 {

 TempData["alert"] = "There
was an error adding this item";

 return View();

 }

 }

CreateFrom creates a new Expando, white listed against the columns in the db.

Customizing the Generators - T4

As we can’t do @Html.TextBox(“title”, Model.Title)… extension methods and dynamics don’t play well together.

If we do string title = Model.Title then it all works.

This added a bunch of templates":

Then just took our ProductionsController code and put it into the template Controller.tt

<#@
template language="C#" HostSpecific="True" #>

<#

MvcTextTemplateHost mvcHost = (MvcTextTemplateHost)(Host);

#>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using VidPub.Web.Models;

<#

var controllerName = mvcHost.ControllerName;

var nameSpace = mvcHost.Namespace;

var tableName = controllerName.Replace("Controller",
"");

#>

namespace <#= nameSpace #> {

public class <#= controllerName #> : Controller

 {

 dynamic _table;

 public <#= controllerName #>() {

 _table = new <#= tableName #>();

 ViewBag.Table = _table;

 }

 public ActionResult Index()

 {

 return View(_table.All());

 }

So now it generates much more cleanly.

namespace VidPub.Web.Controllers

{

 public class ProductionsController : ApplicationController

 {

 dynamic _table;

 public ProductionsController()
{

 _table = new Productions();

 ViewBag.Table = _table;

 }

 public ActionResult Index()

 {

 return View(_table.All());

 }

 public ActionResult Details(int id)

 {

 return View(_table.FindBy(ID:
id, schema: true));

 }

 public ActionResult Create()

 {

 return View(_table.Prototype);

 } 

 [HttpPost]

 [ValidateAntiForgeryToken]

 public ActionResult Create(FormCollection collection)

 {

 dynamic item = _table.CreateFrom(collection);

 try

 {

 _table.Insert(item);

 return RedirectToAction("Index");

 }

 catch

 {

 TempData["alert"] = "There
was an error adding this item";

 return View();

 }

 }

 public ActionResult Edit(int id)

 {

 var model = _table.Get(ID:
id);

 model._Table = _table;

 return View(model);

 }

 [HttpPost]

 public ActionResult Edit(int id, FormCollection collection)

 {

 var model = _table.CreateFrom(collection);

 try

 {

 _table.Update(model,
id);

 return RedirectToAction("Index");

 }

 catch (Exception ex)

 {

 TempData["Error"] = "There
was a problem editing this record";

 return View(model);

 }

 }

 public ActionResult Delete(int id)

 {

 return View();

 }

 [HttpPost]

 [ValidateAntiForgeryToken]

 public ActionResult Delete(int id, FormCollection collection)

 {

 try

 {

 _table.Delete(id);

 return RedirectToAction("Index");

 }

 catch

 {

 TempData["Error"] = "There
was a problem deleting this record";

 return View("Index");

 }

 }

 }

}

CruddyController

abstracting to a base class the cruddyness:

namespace VidPub.Web.Infrastructure
{

 public class CruddyController : ApplicationController {

 // IoC will need to
inject a tokenStore in everything that inhertis hmmmmmm

 public CruddyController(ITokenHandler tokenStore)
: base(tokenStore)
{}

 protected dynamic _table;

 //all virtual so can
override if necessary

 public virtual ActionResult Index()
{

 return View(_table.All());

 }

 public virtual ActionResult Details(int id)
{

 return View(_table.FindBy(ID:
id, schema: true));

 }

 public virtual ActionResult Create()
{

 return View(_table.Prototype);

 }

 [HttpPost]

 [ValidateAntiForgeryToken]

 public virtual ActionResult Create(FormCollection collection)
{

 dynamic item = _table.CreateFrom(collection);

 try {

 _table.Insert(item);

 return RedirectToAction("Index");

 }

 catch {

 TempData["alert"] = "There
was an error adding this item";

 return View();

 }

 }

 public virtual ActionResult Edit(int id)
{

 var model = _table.Get(ID:
id);

 model._Table = _table;

 return View(model);

 }

 [HttpPost]

 public virtual ActionResult Edit(int id, FormCollection collection)
{

 var model = _table.CreateFrom(collection);

 try {

 _table.Update(model,
id);

 return RedirectToAction("Index");

 }

 catch (Exception ex)
{

 TempData["Error"] = "There
was a problem editing this record";

 return View(model);

 }

 }

 public virtual ActionResult Delete(int id)
{

 return View();

 }

 [HttpPost]

 [ValidateAntiForgeryToken]

 public virtual ActionResult Delete(int id, FormCollection collection)
{

 try {

 _table.Delete(id);

 return RedirectToAction("Index");

 }

 catch {

 TempData["Error"] = "There
was a problem deleting this record";

 return View("Index");

 }

 }

 }

}

Review

Use what you know and get app to market
Big ORM in startup can get in the way
Build whats needed, no more
Avoided orm here

VidPub3.1–More Razor

Dave Mateer — Fri, 23 Sep 2011 22:32:28 GMT

Razor automatically encodes HTML for us

@Snippets.FooterText()

 public static dynamic FooterText()
{

 return string.Format("&copy;{0}
VidPub, Inc.", DateTime.Now.Year);

 }

This is bad..

Most of the Html helpers eg Html.Action, Html.ActionLink return an MvcHtmlString which inherits from HtmlString. This is around to control the encoding of html.

@functions
{

 public static dynamic FooterText()
{

 return new HtmlString(string.Format("&copy;{0}
VidPub, Inc.", DateTime.Now.Year));

 }

}

better. This means we sidestep mvc’s always on encoding.

Partials / Helpers / Functions

Do a quotes class and return a string array.

@Html.Partial got confused when we were handing off dynamics stuff. So easier to use a helper (and a function in the same file…nice)

@functions{

 public static dynamic Scrub(string quote)
{

 return new HtmlString(quote);

 }

}

@helper User(string quote)
{

 <div class="quote">

 @Scrub(quote)

 </div> 

}

<div class="container">

 <div class="column
span-24">

 @foreach (dynamic item in VidPub.Web.Models.Quotes.FromUsers())
{

 @Quotes.User(item)

 }

 </div>

</div>

 public class Quotes {

 public static dynamic FromUsers()
{

 var quotes = new string[]
{"I just rocked the interview blah blah"

 ,"This is really
great"

 ,"Bough mastering
jquery from vidpub and so far it rocks"

 ,"2Bough mastering
jquery from vidpub and so far it rocks"

 ,"3Bough mastering
jquery from vidpub and so far it rocks"

 ,"4Bough mastering
jquery from vidpub and so far it rocks"

 };

 Random rnd = new Random();

 return quotes.OrderBy(x => rnd.Next()).ToList();

 }

 }

Rob has html encoding in the quotes… ie <b> in the acutal quote string, which is why he’s use a Scrub function. I dont need it.

Jquery Cycle

 @HTML.CSS("jquery_cycle.js")

in css

id is a #

class is a .

#user_quotes

{

 margin-bottom:32px;

 padding: 24px;

}

.quote 

{

 font-family:"georgia";

 font-style:italic;

 font-size:2.1em;

 color:#4d4d4d;

}

.main 

{

 min-height:320px;

}

<script>

 $(document).ready(function ()
{

 $("#user_quotes").cycle({
fx: 'fade',
pause: 1, speed: 900,
timeout: 4000 })

 });

</script>

<div class="container">

 <div id = "user_quotes" class = "column
span-24">

 @foreach (dynamic item in VidPub.Web.Models.Quotes.FromUsers())
{

 @Quotes.User(item)

 }

 </div>

</div>

then it cycles through – cool!

Rendering Cycle

_ViewStart.cshtml

Index.cshtml (this is the view or view template).. so render view before layout!

_Layout.cshtml (top level component that loads css, js, footer etc..).. so two chunks of html already done are injected into @RenderBody method

then all put into a stringbuilder, then put into the ResponseStream and then we have a webpage!

Review

Partials..hmmm.. unless paired with modelBinder which he’s going to discuss later.

Helpers are simple and paired with functions are great.