ASP.NET MVC 3 with Tools

ASP.NET MVC 3 with Tools Update - This Developer's Life Backend Administration

From Visual Studio, click File | New Project and select ASP.NET MVC 3 Application. Name it "Backend."

Click Internet Application and make sure Use HTML 5 is checked.


Check out your packages.config if you like, or noticed the installed packages in NuGet.

Right click on Models, select Add Class. Name the file Podcast.cs. Here is your Entity Framework 4.1 Code First model:

namespace Backend.Models
{
public class Episode
{
public int Id { get; set; }
[Required]
public string Title { get; set; }
public DateTime? PublishedAt { get; set; }
public string Summary { get; set; }
public string LeadImage { get; set; }
public string ShortUrl { get; set; }
public virtual ICollection<MusicTrack> MusicTracks { get; set; }
}

public class MusicTrack
{
public int Id { get; set; }
public string Name { get; set; }
public string URL { get; set; }

public int EpisodeId { get; set; }
public Episode Episode { get; set; }
}
}

Now, make sure you compile. I press Ctrl-Shift-B to do this, but you can also do it from the Build Menu.


Right click on Controllers, select Add Controller. Make an EpisodeController. Pick the Entity Framework template (remember you can make your own, if you like. More on this soon!) and click the Data context class dropdown and Make a PodcastContext. Your dialog will look like this.





Compile. Now do the same thing for MusicTrack. Now, check our your Solution Explorer and all your scaffolded code.





Right click on References and select Add Library Reference. You can also do this from the Tools | Library Package Manager menu.


Click on Online on the left side to access NuGet.org, and in the upper right corner, search for "EntityFramework.SqlServerCompact" to bring down support for SQL Server Compact Edition.





Now, run your app and visit /Episode. Make an episode or three, then visit /MusicTrack.

Homework for you - Extend the Backend Demo!

• Add the MvcScaffolding Nuget package and rerun the Add Controller commands. What's different?
• Add an Editor Template for DateTimes with a jQuery DatePicker
• Add different attributes like [StringLength] or [Range] to your Code First model. Delete the .SDF file in App_Data and re-run. How can you affect your database?
• Add some other NuGet packages like IE9ify. What cool features can you add like Jump Lists using Javascript?

WebMatrix - This Developer's Life Frontend Administration

Ok, so now we need a frontend for our podcast site. We got one from http://www.templatemonster.com. They can sell you a template and then bring it down directly into Web Matrix. Since you may not want to buy a template just for this demo, you'll want to come up with some basic template for yourself. WebMatrix comes with a Bakery Template and some others, so perhaps try one of those. Perhaps the Bakery Template after clicking Web Site From Template.


We used a template like this, but like I said, I can't give it to you.





Maybe you can start here? ;)





You can right click on App_Data and bring in the SQL Database File (Mine was called TDL.sdf, but yours may vary) from the first step with Add Existing File. Some templates include databases. You can use them if you like, or delete them.





For the demo, I had two database files. The one I created in the first step, and then another one that I already filled out with all our shows earlier.





If you're using the Bakery Template it's a little different from our template since it's about products and includes a featured product, but it's still a cool template.


I skipped some steps in the keynote to make the demo flow, for example, my images were already in an images folder. For this blog post, I'll copy the images from http://www.thisdeveloperslife.com (or you can grab your family photos or whatever) and put them in /images.





Next, I'll change the Default.cshtml for my (now) Bakery Template. I'll updated things in the Razor code like Products to Episode, and making sure I'm using column names from the TDL database, and not the Bakery one.

@{
Page.Title = "Home";

var db = Database.Open("TDL");
var shows = db.Query("SELECT * FROM Episodes").ToList();
}

<h1>Welcome to This Developer's Life!</h1>

<ul id="products">
@foreach (var s in shows) {
<li class="product">
<div class="productInfo">
<h3>@s.Title</h3>
<img class="product-image" src="@Href("~/Images/"+ s.LeadImage)" alt="Image of @s.Title" />
<p class="description">@s.Summary</p>                   
</div>
</li>
}
</ul>

It ends up being not much code. It's not as pretty as the more complex template we used, but you get the idea. You can take templates from anywhere (they don't need to be Razor templates, just HTML!) and then sprinkle in a little Razor code like I did.


I give you, "This Developer's Life - Cheesy Bakery Template Edition":





Now if you like, click on Site, then ASP.NET Web Pages Administration (or, just visit /_Admin) and setup your password. I skipped the creating of a password in the keynote and used a site with an existing password we'd setup earlier. Read the instructions carefully.





The Web Pages Administration site runs local as part of your site, and is how WebMatrix talks to NuGet.org. From here you can get helpers like the Facebook helper, Twitter helper, Disqus helper and more. Some of these helpers, like Disqus, require more setup that I showed in the keynote. For example, you have to visit Disqus.com, sign up for an account and get an API key, then tell your site about it before you use the helper. The Facebook and Twitter helpers also include lots of options, for example, the Twitter helper can be vertical or horizontal, and look different ways. Also check out IE9ify, a jQuery plugin and NuGet package that lets you add JumpLists and IE9 stuff to your site.





At the end, I clicked Publish and then just imported the settings file from my ISP. WebMatrix then used WebDeploy to send my site and database to a server. That server was internal to the Mix keynote demo network, but Rob Conery and deployed the site the exact same way at 3am Tues morning. The public site at http://www.thisdeveloperslife.com was written by Rob and I in WebMatrix, uses HTML5, jQuery with SQL CE for a database and is deployed with WebDeploy and sports a tidy HTML5 theme Rob wrote, inspired by the one from the demo.


I'll blog later in a separate post how I made the podcast player with HTML5 audio tags, jQuery and IE9 site pinning.


I hope you enjoy the products Dear Reader as much as we enjoyed building them!

---

© 2011 Scott Hanselman. All rights reserved.