mix-up
It's Day 1 of the Mix 11 conference here in Las Vegas. I work for the Web Platform and Tools (that's ASP.NET, IIS, IIS Media, etc) group and I did the Web Platform demos for Scott Guthrie's part of the keynote. A lot of people in Dev and QA worked hard all year long to make some fun and cool products and as the designated "talking head," I had just 16 minutes to make all of them (people + products) look good. I hope I did them all justice.
今天是在拉斯维加斯举行的Mix 11会议的第一天。 我为Web平台和工具(即ASP.NET，IIS，IIS Media等)工作，并为Scott Guthrie的主题演讲做了Web平台演示。 开发和质量检查部门的许多人整年都在努力工作，以制作一些有趣而又酷的产品，作为指定的“会说话的人”，我只有16分钟的时间使所有这些(人+产品)看起来都不错。 我希望我都做到了。
We built a backend and a front end for Rob and my sie http://www.thisdeveloperslife.com. The show is something Rob Conery and I do moonlighting on the side (it's our hobby, not our job nor a Microsoft thing) but we needed a new site and this was a fun idea since we built the original site in WebMatrix.
我们为Rob和我的sie http://www.thisdeveloperslife.com构建了一个后端和一个前端。 该节目是Rob Conery的事，我在一边做月光(这是我们的业余爱好，而不是我们的工作，也不是Microsoft的事情)，但是我们需要一个新站点，这是一个有趣的主意，因为我们在WebMatrix中构建了原始站点。
If you'd like ALL the new bits, no matter what's on your machine currently, go to http://www.asp.net/get-started and use one of the new "get everything" green buttons. It'll use Web Platform Installer and if you have nothing, you'll get the free VS Express. If you have Visual Studio proper, you'll get SP1, the new MVC 3 Tools Update as well as stuff like IIS Express and SQL Compact. Get Everything.
如果您希望所有这些新功能，无论您的计算机当前处于什么状态，请访问http://www.asp.net/get-started，并使用新的“ get everything ”绿色按钮之一。 它将使用Web Platform Installer，如果您一无所获，则将获得免费的VS Express。 如果您具有适当的Visual Studio，则将获得SP1，新的MVC 3工具更新以及IIS Express和SQL Compact之类的东西。 得到一切。
We updated the ASP.NET Website for Mix as well, with three new sections. We've also got three 3 intro videos for each technology, as well as an all new Learning Resource section AND free videos from Pluralsight!
我们还通过三个新部分更新了用于Mix的ASP.NET网站。 我们还为每种技术提供了3个3个入门视频，以及一个全新的学习资源部分以及Pluralsight的免费视频！
Here's how you make the backend I made in the Keynote. You can watch it here. ScottGu and I were after the IE9/10 section. http://live.visitmix.com/Keynotes
这是在Keynote中制作后端的方法。 您可以在这里观看。 ScottGu和我都在关注IE9 / 10部分。 http://live.visitmix.com/Keynotes
You can seek within the Keynote using these links:
您可以使用以下链接在主题演讲中进行查找：
If you'd like a MUCH more detailed "Getting Started" tutorial of mine that Rick Anderson just updated to include the new MVC 3 Tools Update, check out the C# version here, and the VB version here.
如果您想了解我的Rick Anderson刚刚更新的更详细的“入门”教程，以包括新的MVC 3 Tools Update，请在此处查看C＃版本和在此处查看VB版本。
This blog post just shows you how to do what I did, check out the tutorial for much more detail.
这篇博客文章只是向您展示了我该怎么做，请查看教程以获取更多详细信息。
带有工具更新的ASP.NET MVC 3-此开发人员的生活后端管理 (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."
在Visual Studio中，单击“文件| 新建项目，然后选择ASP.NET MVC 3 Application 。 将其命名为“后端”。
Click Internet Application and make sure Use HTML 5 is checked.
单击“ Internet应用程序” ，并确保已选中“使用HTML 5” 。
Check out your packages.config if you like, or noticed the installed packages in NuGet.
如果愿意，请查看您的packages.config，或者注意到NuGet中已安装的软件包。
Right click on Models, select Add Class. Name the file Podcast.cs. Here is your Entity Framework 4.1 Code First model:
右键单击Models ，然后选择Add Class。 将文件命名为Podcast.cs。 这是您的Entity Framework 4.1 Code First模型：
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.
现在，请确保您进行编译。 我按Ctrl-Shift-B可以执行此操作，但是您也可以从“构建”菜单中执行此操作。
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.
右键单击Controllers ，选择Add Controller 。 创建一个EpisodeController 。 选择Entity Framework模板(如果需要，请记住，您可以自己制作。稍后会做更多！)，然后单击Data context class下拉列表和Make PodcastContext 。 您的对话框将如下所示。
Compile. Now do the same thing for MusicTrack. Now, check our your Solution Explorer and all your scaffolded code.
编译。 现在对MusicTrack做同样的事情。 现在，检查我们的解决方案资源管理器和所有脚手架的代码。
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.
单击左侧的“联机”以访问NuGet.org ，然后在右上角搜索“ EntityFramework.SqlServerCompact”以降低对SQL Server Compact Edition的支持。
Now, run your app and visit /Episode. Make an episode or three, then visit /MusicTrack.
现在，运行您的应用程序并访问/ Episode。 制作一集或三集，然后访问/ MusicTrack 。
为您准备的作业-扩展后端演示！ (Homework for you - Extend the Backend Demo!)
Add the MvcScaffolding Nuget package and rerun the Add Controller commands. What's different?
添加MvcScaffolding Nuget程序包，然后重新运行“添加控制器”命令。 有什么不同？
- Add an Editor Template for DateTimes with a jQuery DatePicker 使用jQuery DatePicker添加DateTimes的编辑器模板
- 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? 向您的Code First模型中添加[StringLength]或[Range]之类的不同属性。 删除App_Data中的.SDF文件，然后重新运行。 您如何影响您的数据库？
Add some other NuGet packages like IE9ify. What cool features can you add like Jump Lists using Javascript?
添加其他一些NuGet软件包，例如IE9ify 。 您可以使用JavaScript添加哪些很棒的功能(如跳转列表)？
WebMatrix-此开发人员的生命前端管理 (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.
好的，现在我们需要一个用于播客站点的前端。 我们从http://www.templatemonster.com获得了一个。 他们可以向您出售模板，然后将其直接导入Web Matrix。 由于您可能不希望仅为该演示购买模板，因此，您将需要自己准备一些基本模板。 WebMatrix带有面包店模板和其他一些模板，因此也许尝试其中一种。 单击“模板网站”之后的“面包店模板” 。
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.
您可以从第一步开始使用Add Existing File右键单击App_Data并导入SQL数据库文件(我的名字叫TDL.sdf，但您可能有所不同)。 一些模板包括数据库。 您可以根据需要使用它们，也可以删除它们。
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.
如果您使用的是Bakery 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.
我跳过了主题演讲中的一些步骤来进行演示，例如，我的图像已经在图像文件夹中。 对于此博客文章，我将从http://www.thisdeveloperslife.com复制图像(或者您可以抓取家庭照片或其他照片)并将其放在/ 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.
接下来，我将为我的(现在)面包店模板更改Default.cshtml。 我将把Razor代码中的内容更新为“ Products to Episode”，并确保我使用的是TDL数据库中的列名，而不是Bakery数据库中的列名。
@{
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.
最终没有太多代码。 它不像我们使用的更复杂的模板那么漂亮，但是您知道了。 您可以从任何地方获取模板(它们不必是Razor模板，只需HTML！)，然后像我一样撒一些Razor代码。
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.
现在，如果愿意，请单击Site ，然后单击ASP.NET Web Pages Administration (或只需访问/ _Admin)并设置密码。 我跳过了在主题演讲中创建密码的过程，并使用了一个带有我们之前设置的现有密码的网站。 仔细阅读说明。
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.
网页管理站点在您的站点中本地运行，也是WebMatrix与NuGet.org对话的方式。 在这里，您可以找到Facebook帮助程序，Twitter帮助程序，Disqus帮助程序等帮助程序。 其中一些帮助器(例如Disqus)需要我在主题演讲中显示的更多设置。 例如，您必须访问Disqus.com，注册一个帐户并获取API密钥，然后在使用该帮助程序之前将其告知您的网站。 Facebook和Twitter帮助器还包括许多选项，例如，Twitter帮助器可以是垂直或水平的，并且外观不同。 还要检查IE9ify ，它是一个jQuery插件和NuGet包，可让您将JumpLists和IE9内容添加到您的站点。
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.
最后，我单击“发布” ，然后刚从ISP导入了设置文件。 然后，WebMatrix使用WebDeploy将我的站点和数据库发送到服务器。 该服务器是Mix主题演示网络的内部服务器，但Rob Conery并在上午2点星期二以完全相同的方式部署了该站点。 公共站点http://www.thisdeveloperslife.com 由Rob和我在WebMatrix中编写，使用HTML5，带有SQL CE的jQuery用于数据库，并与WebDeploy一起部署，并受Rob演示的一个简洁HTML5主题启发，该主题受演示启发。
I'll blog later in a separate post how I made the podcast player with HTML5 audio tags, jQuery and IE9 site pinning.
稍后，我将在另一篇文章中写博客，介绍如何使用HTML5音频标签，jQuery和IE9网站固定功能制作播客播放器。
I hope you enjoy the products Dear Reader as much as we enjoyed building them!
希望您喜欢我们喜欢构建产品的产品，亲爱的读者！
相关链接 (Related Links)
http://www.asp.net/get-started
http://www.asp.net/get-started
Series Creating an Entity Framework Data Model for an ASP.NET MVC Application (1 of 10)
翻译自: https://www.hanselman.com/blog/mix-11-web-platform-and-tools-keynote-demo-script
mix-up
2688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
