Mix 11 - Web 平台和工具主题示例脚本

  • Article

[原文发表地址] Mix 11 - Web Platform and Tools Keynote Demo Script

[原文发表时间] 2011-04-13 01:15 AM

这是在拉斯维加斯的Mix 11大会中的第一天。我为Web平台和工具（比如ASP.NET,IIS,IIS Media等）组工作，也为斯科特.葛西的部分主题做Web平台的示例。开发组和QA组的很多人为了能够做出一些有趣并且很酷的产品几乎一整年都在辛苦工作，作为指定的“说话的老大”，我只有16分钟的时间使他们（人+产品）看起来还不错。我希望我公正地展示了他们。

我们为罗伯和我的网站https://www.thisdeveloperslife.com建立了一个后端和前端，这个展示是我和罗伯.科内里兼职做的（这是我们的爱好，不是工作也不是微软的事），但是我们曾需要一个新的网站而且这个想法很有趣，因为我们在WebMatrix上建了原来的网站。

如果你喜欢所有这些新的部分，不管目前在你电脑上的是什么，请登录https://www.asp.net/get-started并使用这个新的"获得所有 "的绿色按钮。如果你电脑上什么都没，它将使用Web平台安装 ，你会获得这个免费的VS Express。如果你已经安装了Visual Studio，你会获得SP1，即新的MVC 3工具更新和其他一些东西如IIS Express和SQL Compact。去获取这一切吧。

我们也用三种新技术为Mix更新了ASP.NET 网站，我们也有为每种技术做3分钟的介绍视频，还有从Pluralsight获得的所有新的学习资源部分和免费视频！

clip_image001 https://www.asp.net/get-started

o https://www.asp.net/web-pages

o https://www.asp.net/web-forms

o https://www.asp.net/mvc

你可以在这里看到我在Keynote中做的关于怎样做后端的信息。斯科特.葛西和我是做的IE9/10之后的部分。

https://live.visitmix.com/Keynotes

你可以使用这些链接在Keynote中查询：

clip_image001[1] 从斯科特 葛西的Keynote开始

clip_image001[2] 示例1： ASP.NET MVC工具更新

clip_image001[3] 结束示例1

clip_image001[4] 开始WebMatrix 部分

clip_image001[5] 示例2：WebMatrix

clip_image001[6] 结束示例2

clip_image001[7] 开始Web 应用程序生态系统部分

clip_image001[8] 示例3： Orchard

clip_image001[9] 结束示例3（开始Azure部分）

clip_image001[10] 示例4：Azure上的 Umbraco

clip_image001[11] 结束示例4

clip_image001[12] 总结和摘要

clip_image001[13] 查看视频

如果你想要里切.安德森刚刚更新的更加详细的我的 “ 入门” 教程，包括新的MVC 3工具更新，请查看C#版本 和VB版本这两个链接。

这篇博客只是向你演示怎样去做我所做的那些，查看这个教程 来获得更多的细节。

ASP.NET MVC 3 和工具更新– 开发人员生活的后端管理

在Visual Studio中，点击File | New Project并选择ASP.NET MVC 3 Application。命名为“Backend。”

点击Internet Application并确保Use HTML 5被选中。

如果你愿意，请查看你的packages.config文件，或在NuGet中查看已安装的包。

右击Models，选择Add Class 。 将文件命名为Podcast.cs 。这是你的Entity Framework 4.1 Code的第一个模型：

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; }

 

    }

 

}

 

 

现在，确保你编译了这些代码，我是通过按Ctrl-Shift-B来编译，但你也可以从Build菜单进行编译。

右击Controllers，选择Add Controller。做一个EpisodeController。选择实体框架模板（记住如果喜欢你可以做自己的。尽快做吧！）并点击Data context class下拉框选中PodcastContext ， 你的对话框会是这个样子：

编译。现在给MusicTrack做同样的操作。检查我们的解决方案资源管理器和所有的scaffolded代码。

Wow, that's a lot of scaffolded code!

右击References，选择Add Library Reference 。 你可以通过Tools | Library Package Manager菜单做这个。

点击左边的Online连接NuGet.org，然后在右上角搜索"EntityFramework.SqlServerCompact"下载对SQL Server Compact Edition的支持。

现在，运行应用程序并访问 /Episode 。建一个或多个episode，再访问 /MusicTrack 。

你的作业- 扩展后端示例!

clip_image001[14] 添加MvcScaffolding Nuget 软件包再重新运行Add Controller命令。与之前的有什么不一样？

clip_image001[15] 为有jQuery DatePicker的DateTimes添加一个编辑模板

clip_image001[16] 添加不同属性如 [StringLength] 或 [Range] 到你的代码优先模型。在App_Data 和re-run中删除.SDF 文件。对你的数据库有何影响?

clip_image001[17] 添加一些其他的NuGet软件包如IE9ify . 你会用JavaScript添加哪些像Jump Lists这样的很酷的功能?

WebMatrix – 开发人员生活的前端管理

好了，现在我们需要为podcast网站做一个前端。我们可以从https://www.templatemonster.com下载一个。 他们可以卖一个模板给你然后你可以直接将它下载到Web Matrix中。由于你可能不愿意只为这个示例去买一个模板，你需要为自己想出一些基本的模板。WebMatrix自带了Bakery模板和一些其他的模板，所以也许你可以试一下那些模板中的一个。例如点击从模板生成网站后选择Bakery模板。

我们用这样一个模板，但像我前面说过的，我不能把它给你。

也许你可以从这儿开始？；）

你可以右击App_Data并通过点击Add Existing File在第一步导入SQL数据库文件（我的文件叫TDL.sdf，你的可能不同）。有的模板中包括很多数据库。如果你愿意你可以用它们，也可以删除它们。

为这个示例我准备了两个数据库文件。一个是我在第一步中创建的，另一个是在我们早前的演示中添加的。

Lots of data in the database

如果你在使用Bakery模板， 你会发现它与我们的模板有一点不同，因为它与产品有关且包括一些功能产品，但它仍然是一个很酷的模板。

为了使演示流畅, 在keynote中我省略了一些步骤，例如，我的图片已经放在一个图片文件夹中。为这篇博客，我会从https://www.thisdeveloperslife.com（或者你可以用你家人的照片或其它的）复制一些文件并将它们放在/images文件夹中。

接下来，我将更改我的Bakery模板中的Default.cshtml文件。我会在Razor代码中更改一些如Episode中的Products，并确保我使用的是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``>

 

<``ulid``=``"products"``>

    ``@foreach (var s in shows) {

        ``<``liclass``=``"product"``>

            ``<``divclass``=``"productInfo"``>

                ``<``h3``>@s.Title</``h3``>

                ``<``imgclass``=``"product-image"src``=``"@Href("`` ~/Images/"+ s.LeadImage)" ``alt``=``"Image of @s.Title"/>

                ``<``pclass``=``"description"``>@s.Summary</``p`` >                   

            ``</``div``>

        ``</``li``>

    ``}

</``ul``>

它的代码不多。你知道，它不像我们用过的那些更复杂的模板那么完美，但你已经实现了想法。你可以从任何地方（他们不需要是Razor模板，只要是HTML的就行！）获得模板然后像我做的那样添加一些Razor代码作为点缀。

我给你“开发者生活- Cheesy Bakery模板版本”：

现在如果你愿意，单击Site，然后选择ASP.NET Web Pages Administration（或只选择访问/_Admin）设置你的密码。我省略了在keynote中创建密码这一步，而是用了之前设立的已经存在的密码来使用网站。仔细阅读说明。

Web页面管理网站作为你网站的一部分在本地运行，这也是WebMatrix如何与NuGet.org进行对话的。从这儿你可以获得如Facebook助手，Twitter助手，Disqus助手或其他更多的之类的助手。这些助手中，像Disqus，需要更多像我在keynote中展示的设置。例如，你需要访问Disqus.com，注册账号获得API密钥，然后在使用这些助手前将该帐号告诉你的网站。Facebook和 Twitter助手也包括很多选项，例如，Twitter助手可以垂直或平行，看起来像不同的方式。再试试IE9ify，这是个 jQuery插件和NuGet软件包，可以让你添加JumpLists和IE9的东西到你的网站。

最后，我点击了“发布”，然后只从我的ISP导入了设置文件。WebMatrix接着使用WebDepoly把我的站点和数据库发到了一个服务器上。虽然这个服务器是Mix keynote 演示网络的一个内部服务器，但是在星期二的凌晨三点，Rob Conery以同样的方式布署了这个站点。这个公共的站点在https://www.thisdeveloperslife.com， 它是Rob和我用WebMatrix写的，使用了HTML5, 用于SQL CE数据库的jQuery。这个站点使用WebDeploy部署，并且运用了一个整洁的HTML5主题，这个主题是Rob写的，来自于做演示时的灵感。

稍后，我会在单独的博文中介绍我如何使用HTML5音频标签，jQuery和IE9的Site。
Pinning来制作podcast播放器。

亲爱的读者，希望你们能够同我们一样喜欢这些产品并去创建他们。