演示应用程序显示 Html5MVCWebControls 类库的使用情况
4.73/5 (9投票s)
演示应用程序，展示了我之前文章中的 Html5MVCWebControls 类库的使用。
引言
好的，这是我的第十二篇文章，展示了为 ASP.NET MVC 3 开发的 HTML 5 控件类库的使用。您可以在我的 上一篇文章中查看有关该类库的详细信息。
背景
对于我之前关于 ASP.NET MVC 的 HTML 5 控件的文章，我收到了一些评论，建议提供一个示例应用程序，说明如何使用 ASP.NET MVC 的 html5 类库控件。一些用户提到提供一个演示应用程序以便更好地理解。因此，我尝试了这样做并发布，以便用户对该类库的使用有一个很好的了解。由于 Google Chrome 支持大多数 HTML 5 控件，您可以在 Google Chrome 中看到良好的输出。我提供了一个下表，描述了在不同浏览器中获得的输出。实际上，我在 Google Chrome 中测试了所有内容，并获得了良好的输出。
| 控件 |
IE (<= v 8.0)
|
IE (v 9.0)
|
Google Chrome (>= v 13.*)
|
Firefox (v 6.*)
|
| PlaceholderBox |  |
|
 |
|
| EmailBox | |
|
|
|
| UrlBox | |
|
|
|
| NumberBox | |
|
|
|
| Range | |
|
|
|
| SearchBox | |
|
|
|
| ColorBox | |
|
|
|
| DateBox | |
|
|
|
| MonthBox | |
|
|
|
| WeekBox | |
|
|
|
| TimeBox | |
|
|
|
| DateTimeBox | |
|
|
|
| DateTimeLocalBox | |
|
|
|
| 进度 | |
|
|
|
| Meter | |
|
|
|
| 音频 | |
|
|
|
| 视频 | |
|
|
|
| 所有 Canvas 元素 | |
|
|
|
| 所有 SVG 元素 | |
|
|
|
关于 IE，在 v9.0 之前的版本中，不支持 HTML 5 控件。但 v9.0 中也有些控件不支持。根据微软的一个网站，IE 10.0 将支持大多数 HTML 5 控件。我尝试在 IE 10 Preview 平台上进行测试，但由于无法安装在我的笔记本电脑上，因此未能测试。
代码
ASPX 视图引擎
<% Html.Html5().Media.Video("video1", "~/content/mediafiles/video1.webm",
"Your browser does not support", new { @width="400px", @height="300px"}); %>
Razor 视图引擎
@Html.Html5().Media.Video("video1", "~/content/mediafiles/video1.webm",
"Your browser does not support", new { @width="400px", @height="300px"})
音频和视频
对于音频，仅支持 MP3 文件。对于视频，仅支持 webm 文件。因此，您需要将所有类型的视频转换为 webm 格式。您可以在网上找到许多视频转换工具。您可以下载它们并转换视频。请查看以下链接
示例截图（全部在 Google Chrome 中）
开发应用程序
如我们所知，在 VS 2010 中创建 ASP.Net MVC 3 应用程序时，选择相应的选项，然后会得到如图所示的另一个对话框。在其中，请选择“使用 HTML5 语义标记”，以便在网页中获得 Html5 IntelliSense。
然后我们需要将这个类库添加到我们的 ASP.NET MVC 应用程序中。
验证
目前，您可以在 Google Chrome 和 Firefox 中检查 HTML 5 控件客户端验证。
关注点
您可以从我的上一篇文章下载该类库：HTML 5 Controls for ASP.NET MVC。
结论
感谢您阅读本文。我期待您的反馈。您将从我这里期待更多。