ASP.NET MVC 的 HTML 5 控件
4.81/5 (55投票s)
ASP.NET MVC 的 HTML 5 控件类库
引言
这是我的第十一篇文章。这次，我尝试了一个关于 ASP.NET MVC 的 HTML 5 控件的新想法。
什么是 ASP.NET MVC？
ASP.NET MVC 是 ASP.NET Web 应用程序框架的一部分。它是您可以用来创建 ASP.NET Web 应用程序的两种不同编程模型之一，另一种是 ASP.NET Web Forms。
MVC 应用程序是使用以下三个属性进行设计和实现的
- 模型：模型包含应用程序的核心信息。这包括数据和验证规则，以及数据访问和聚合逻辑。
- 视图：视图封装了应用程序的呈现，在 ASP.NET 中这通常是 HTML 标记。
- 控制器：控制器包含控制流逻辑。它与模型和视图交互，以控制信息流和应用程序的执行。
这种实体分离使您在构建和维护应用程序时具有灵活性和敏捷性。例如，通过分离视图，您可以迭代应用程序的外观而无需触及任何核心业务逻辑。您还可以按角色分离工作，例如，设计师可以处理视图，而开发人员可以处理模型。
ASP.NET MVC 将这种开发范式的强大功能带入 ASP.NET 开发，允许您使用 .NET 开发技能构建 MVC 应用程序。
它
- 让您完全控制您的 HTML 标记
- 启用丰富的 AJAX 和 jQuery 集成
- 允许您为您的网站创建对 SEO 友好的 URL
- 使测试驱动开发 (TDD) 变得容易
什么是模型-视图-控制器 (MVC) 框架？
MVC 是一种框架方法论，它将应用程序的实现分为三个组件角色：模型、视图和控制器。
- MVC 应用程序中的“模型”是负责维护状态的应用程序组件。通常，此状态持久保存在数据库中（例如：我们可能有一个 `Product` 类，用于表示 SQL 中 `Products` 表的订单数据）。
- MVC 应用程序中的“视图”是负责显示应用程序用户界面的组件。通常，此 UI 是根据模型数据创建的（例如：我们可能会创建一个 `Product`“编辑”视图，根据 `Product` 对象的当前状态显示文本框、下拉列表和复选框）。
- MVC 应用程序中的“控制器”是负责处理最终用户交互、操作模型以及最终选择要呈现以显示 UI 的视图的组件。在 MVC 应用程序中，视图仅用于显示信息 - 是控制器处理并响应用户输入和交互。
使用 MVC 方法论的好处之一是它有助于在应用程序的模型、视图和控制器之间强制实现清晰的关注点分离。保持清晰的关注点分离使应用程序的测试变得容易得多，因为不同应用程序组件之间的契约更清晰地定义和阐明了。
什么是 ASP.Net MVC？ (维基百科定义)
ASP.NET MVC 框架是一个实现模型-视图-控制器模式的 Web 应用程序框架。基于 ASP.NET，它允许软件开发人员将 Web 应用程序构建为模型、视图和控制器三个角色的组合。模型表示应用程序特定方面的状态。通常，模型映射到数据库表，表中的条目表示应用程序的状态。控制器处理交互并更新模型以反映应用程序状态的变化，然后将信息传递给视图。视图接受控制器中必要的信息并渲染用户界面以显示该信息。
2009年4月，ASP.NET MVC 源代码在 Microsoft 公共许可证 (MS-PL) 下发布。
ASP.NET MVC 框架使用基于接口的契约将模型、视图和控制器耦合在一起，从而允许每个组件独立轻松地进行测试。
视图引擎
ASP.NET MVC 3 中有两种视图引擎。它们是 ASPX 视图引擎和 Razor 视图引擎。
ASPX 视图引擎
<%: Html.TextBox("txtBox") %>
Razor 视图引擎
@Html.TextBox("txtBox")
什么是 HTML 5？
HTML5 是一种用于构建和呈现万维网内容的语言，是互联网的核心技术。它是 HTML 标准的第五个修订版（最初创建于 1990 年，最近在 1997 年标准化为 HTML4），截至 2011 年 8 月仍在开发中。其核心目标是改进语言以支持最新的多媒体，同时保持其易于人类阅读，并始终如一地被计算机和设备（网页浏览器、解析器等）理解。HTML5 旨在取代 HTML4，以及 XHTML1 和 DOM2HTML（特别是 JavaScript）。
继其前身 HTML 4.01 和 XHTML 1.1 之后，HTML5 旨在解决这样一个观察：万维网上常用 HTML 和 XHTML 是各种规范引入的功能、Web 浏览器等软件产品引入的功能、常见实践确立的功能以及现有 Web 文档中的许多语法错误的混合体。它还试图定义一种可以以 HTML 或 XHTML 语法编写的单一标记语言。它包括详细的处理模型，以鼓励更具互操作性的实现；它扩展、改进和合理化了可用于文档的标记，并引入了用于复杂 Web 应用程序的标记和 API。
特别是，HTML5 添加了许多新的语法特性。其中包括 `<video>`、`<audio>`、`<header>` 和 `<canvas>` 元素，以及 SVG 内容的集成。这些功能旨在使在网络上轻松包含和处理多媒体和图形内容，而无需借助专有插件和 API。其他新元素，如 `<section>`、`<article>`、`<header>` 和 `<nav>` 旨在丰富文档的语义内容。为了同样的目的引入了新属性，同时删除了一些元素和属性。一些元素，如 `<a>`、`<cite>` 和 `<menu>` 已被更改、重新定义或标准化。API 和 DOM 不再是事后的想法，而是 HTML5 规范的基本组成部分。HTML5 还详细定义了对无效文档所需的处理，以便所有符合标准的浏览器和其他用户代理将统一处理语法错误。
我们的应用程序
我们应用程序的目的是将 HTML 5 控件用于 ASP.NET MVC，无论是 ASPX 引擎还是 Razor 引擎。在进行一些分析之后，开发了这个类库，但无论如何我无法通过这个类库实现一些标签和选项，我做了一些限制。
开发
要开发 HTML 5 扩展的类库，我们需要在应用程序中添加 `System.Web.Mvc` 和 `System.Web.WebPages` 的引用。
然后我们需要在任何 ASP.NET MVC 应用程序中添加这个类库。
类和扩展列表
| 名称 | 描述 | 扩展 | |
 |
Html5Helper |
一个包含所有 Html5 元素的 Html5 帮助类。 | 扩展列表 |
| |
Html5MediaHelper |
一个包含所有媒体相关元素的 Html5 帮助类。 | 扩展列表 |
| |
Html5CanvasHelper |
一个包含所有 Canvas 相关元素的 Html5 帮助类。 | 扩展列表 |
| |
Html5SvgHelper |
一个包含所有 svg 相关元素的 Html5 帮助类。 | 扩展列表 |
| |
SourceList |
表示包含所有源项目的列表。 | |
| |
SourceListItem |
表示 `System.Web.Mvc.SourceListItem` 类实例中的源项目。 |
Html5 扩展
| 名称 | 描述 | 示例 | |
 |
PlaceholderBox(String name, String placeholderText) |
渲染一个带有占位符文本的输入元素。 | @Html.Html5().PlaceholderBox("placeholderBox1", "搜索") |
| |
PlaceholderBox(String name, String placeholderText, Object htmlAttributes) |
渲染一个带有占位符文本的输入元素。 | @Html.Html5().PlaceholderBox("placeholderBox1", "搜索", new { @class="txt" }) |
| |
EmailBox(String name) |
渲染一个电子邮件类型的输入元素。 | @Html.Html5().EmailBox("emailBox1") |
| |
EmailBox(String name, Object htmlAttributes) |
渲染一个电子邮件类型的输入元素。 | @Html.Html5().EmailBox("emailBox1", new { @class="txt" }) |
| |
UrlBox(String name) |
渲染一个 URL 类型的输入元素。 | @Html.Html5().EmailBox("urlBox1") |
| |
UrlBox(String name, Object htmlAttributes) |
渲染一个 URL 类型的输入元素。 | @Html.Html5().EmailBox("urlBox1", new { @class="txt" }) |
| |
NumberBox(String name) |
渲染一个数字类型的输入元素。 | @Html.Html5().NumberBox("numberBox1") |
| |
NumberBox(String name, Object htmlAttributes) |
渲染一个数字类型的输入元素。 | @Html.Html5().NumberBox("numberBox1", new { @class="txt" }) |
| |
NumberBox(String name, double min, double max, double step) |
渲染一个数字类型的输入元素。 | @Html.Html5().NumberBox("numberBox1", 10, 50, 2) |
| |
NumberBox(String name, double min, double max, double step, Object htmlAttributes) |
渲染一个数字类型的输入元素。 | @Html.Html5().NumberBox("numberBox1", 10, 50, 2, new { @class="txt" }) |
| |
Range(String name) |
渲染一个范围类型的输入元素。 | @Html.Html5().Range("range1") |
| |
Range(String name, Object htmlAttributes) |
渲染一个范围类型的输入元素。 | @Html.Html5().Range("range1", new { @class="txt" }) |
| |
Range(String name, int min, int max, int step) |
渲染一个范围类型的输入元素。 | @Html.Html5().Range("range1", 10, 50, 2) |
| |
Range(String name, int min, int max, int step, Object htmlAttributes) |
渲染一个范围类型的输入元素。 | @Html.Html5().Range("range1", 10, 50, 2, new { @class="txt" }) |
| |
SearchBox(String name) |
渲染一个搜索类型的输入元素。 | @Html.Html5().SearchBox("searchBox1") |
| |
SearchBox(String name, Object htmlAttributes) |
渲染一个搜索类型的输入元素。 | @Html.Html5().SearchBox("searchBox1", new { @class="txt" }) |
| |
ColorBox(String name) |
渲染一个颜色类型的输入元素。 | @Html.Html5().ColorBox("colorBox1") |
| |
ColorBox(String name, Object htmlAttributes) |
渲染一个颜色类型的输入元素。 | @Html.Html5().ColorBox("colorBox1", new { @class="txt" }) |
| |
DateBox(String name) |
渲染一个日期类型的输入元素。 | @Html.Html5().DateBox("dateBox1") |
| |
DateBox(String name, Object htmlAttributes) |
渲染一个日期类型的输入元素。 | @Html.Html5().DateBox("dateBox1", new { @class="txt" }) |
| |
MonthBox(String name) |
渲染一个月份类型的输入元素。 | @Html.Html5().MonthBox("monthBox1") |
| |
MonthBox(String name, Object htmlAttributes) |
渲染一个月份类型的输入元素。 | @Html.Html5().MonthBox("monthBox1", new { @class="txt" }) |
| |
WeekBox(String name) |
渲染一个周类型的输入元素。 | @Html.Html5().WeekBox("weekBox1") |
| |
WeekBox(String name, Object htmlAttributes) |
渲染一个周类型的输入元素。 | @Html.Html5().WeekBox("weekBox1", new { @class="txt" }) |
| |
TimeBox(String name) |
渲染一个时间类型的输入元素。 | @Html.Html5().TimeBox("timeBox1") |
| |
TimeBox(String name, Object htmlAttributes) |
渲染一个时间类型的输入元素。 | @Html.Html5().TimeBox("timeBox1", new { @class="txt" }) |
| |
DateTimeBox(String name) |
渲染一个日期时间类型的输入元素。 | @Html.Html5().DateTimeBox("dateTimeBox1") |
| |
DateTimeBox(String name, Object htmlAttributes) |
渲染一个日期时间类型的输入元素。 | @Html.Html5().DateTimeBox("dateTimeBox1", new { @class="txt" }) |
| |
DateTimeLocalBox(String name) |
渲染一个本地日期时间类型的输入元素。 | @Html.Html5().DateTimeLocalBox("dateTimeLocalBox1") |
| |
DateTimeLocalBox(String name, Object htmlAttributes) |
渲染一个本地日期时间类型的输入元素。 | @Html.Html5().DateTimeLocalBox("dateTimeLocalBox1", new { @class="txt" }) |
| |
Progress(String name, String innerText) |
渲染一个进度元素。 | @Html.Html5().Progress("progress1", "浏览器不支持") |
| |
Progress(String name, String innerText, Object htmlAttributes) |
渲染一个进度元素。 | @Html.Html5().Progress("progress1", "浏览器不支持", new { @class="txt" }) |
| |
Progress(String name, String innerText, int max) |
渲染一个进度元素。 | @Html.Html5().Progress("progress1", "浏览器不支持", 500) |
| |
Progress(String name, String innerText, int max, Object htmlAttributes) |
渲染一个进度元素。 | @Html.Html5().Progress("progress1", "浏览器不支持", 500, new { @class="txt" }) |
| |
Progress(String name, String innerText, int max, int value) |
渲染一个进度元素。 | @Html.Html5().Progress("progress1", "浏览器不支持", 500, 300) |
| |
Progress(String name, String innerText, int max, int value, Object htmlAttributes) |
渲染一个进度元素。 | @Html.Html5().Progress("progress1", "浏览器不支持", 500, 300, new { @class="txt" }) |
| |
Meter(String name, String innerText) |
渲染一个计量元素。 | @Html.Html5().Meter("meter1", "浏览器不支持") |
| |
Meter(String name, String innerText, Object htmlAttributes) |
渲染一个计量元素。 | @Html.Html5().Meter("meter1", "浏览器不支持", new { @class="txt" }) |
| |
Meter(String name, String innerText, double min, double max, double value) |
渲染一个计量元素。 | @Html.Html5().Meter("meter1", "浏览器不支持", 100, 500, 200) |
| |
Meter(String name, String innerText, double min, double max, double value, Object htmlAttributes) |
渲染一个计量元素。 | @Html.Html5().Meter("meter1", "浏览器不支持", 100, 500, 200, new { @class="txt" }) |
Html5 媒体扩展
| 名称 | 描述 | 示例 | |
| |
Audio(String name, String source, String notSupportedMessage) |
在客户端浏览器中渲染一个音频元素。 | @Html.Html5().Media.Audio("audio1","~/audiofile1.mp3","浏览器不支持") |
| |
Audio(String name, String source, String notSupportedMessage, Object htmlAttributes) |
在客户端浏览器中渲染一个音频元素。 | @Html.Html5().Media.Audio("audio1","~/audiofile1.mp3","浏览器不支持", new { @width="500px", @height="500px"}) |
| |
Audio(String name, String source, String notSupportedMessage, bool showControls, bool autoPlay, bool playInLoop) |
在客户端浏览器中渲染一个音频元素。 | @Html.Html5().Media.Audio("audio1","~/audiofile1.mp3","浏览器不支持", true, true, true) |
| |
Audio(String name, String source, String notSupportedMessage, bool showControls, bool autoPlay, bool playInLoop, Object htmlAttributes) |
在客户端浏览器中渲染一个音频元素。 | @Html.Html5().Media.Audio("audio1","~/audiofile1.mp3","浏览器不支持", true, true, true, new { @width="500px", @height="500px"}) |
| |
Audio(String name, IEnumerable<SourceListItem> sourceList, String notSupportedMessage) |
在客户端浏览器中渲染一个音频元素。 | @Html.Html5().Media.Audio("audio1", new SourceList(ViewBag.Sources) ,"浏览器不支持") |
| |
Audio(String name, IEnumerable<SourceListItem> sourceList, String notSupportedMessage, Object htmlAttributes) |
在客户端浏览器中渲染一个音频元素。 | @Html.Html5().Media.Audio("audio1", new SourceList(ViewBag.Sources) ,"浏览器不支持", new { @width="500px", @height="500px"}) |
| |
Audio(String name, IEnumerable<SourceListItem> sourceList, String notSupportedMessage, bool showControls, bool autoPlay, bool playInLoop) |
在客户端浏览器中渲染一个音频元素。 | @Html.Html5().Media.Audio("audio1", new SourceList(ViewBag.Sources) ,"浏览器不支持", true, true, true) |
| |
Audio(String name, IEnumerable<SourceListItem> sourceList, String notSupportedMessage, bool showControls, bool autoPlay, bool playInLoop, Object htmlAttributes) |
在客户端浏览器中渲染一个音频元素。 | @Html.Html5().Media.Audio("audio1", new SourceList(ViewBag.Sources) ,"浏览器不支持", true, true, true, new { @width="500px", @height="500px"}) |
| |
Video(String name, String source, String notSupportedMessage) |
在客户端浏览器中渲染一个视频元素。 | @Html.Html5().Media.Video("video1","~/videofile1.mp4","浏览器不支持") |
| |
Video(String name, String source, String notSupportedMessage, Object htmlAttributes) |
在客户端浏览器中渲染一个视频元素。 | @Html.Html5().Media.Video("video1","~/videofile1.mp4","浏览器不支持", new { @width="500px", @height="500px"}) |
| |
Video(String name, String source, String notSupportedMessage, bool showControls, bool autoPlay, bool playInLoop) |
在客户端浏览器中渲染一个视频元素。 | @Html.Html5().Media.Video("video1","~/videofile1.mp4","浏览器不支持", true, true, true) |
| |
Video(String name, String source, String notSupportedMessage, bool showControls, bool autoPlay, bool playInLoop, Object htmlAttributes) |
在客户端浏览器中渲染一个视频元素。 | @Html.Html5().Media.Video("video1","~/videofile1.mp4","浏览器不支持", true, true, true, new { @width="500px", @height="500px"}) |
| |
Video(String name, IEnumerable<SourceListItem> sourceList, String notSupportedMessage) |
在客户端浏览器中渲染一个视频元素。 | @Html.Html5().Media.Video("video1", new SourceList(ViewBag.Sources) ,"浏览器不支持") |
| |
Video(String name, IEnumerable<SourceListItem> sourceList, String notSupportedMessage, Object htmlAttributes) |
在客户端浏览器中渲染一个视频元素。 | @Html.Html5().Media.Video("video1", new SourceList(ViewBag.Sources) ,"浏览器不支持", new { @width="500px", @height="500px"}) |
| |
Video(String name, IEnumerable<SourceListItem> sourceList, String notSupportedMessage, bool showControls, bool autoPlay, bool playInLoop) |
在客户端浏览器中渲染一个视频元素。 | @Html.Html5().Media.Video("video1", new SourceList(ViewBag.Sources) ,"浏览器不支持", true, true, true) |
| |
Video(String name, IEnumerable<SourceListItem> sourceList, String notSupportedMessage, bool showControls, bool autoPlay, bool playInLoop, Object htmlAttributes) |
在客户端浏览器中渲染一个视频元素。 | @Html.Html5().Media.Video("video1", new SourceList(ViewBag.Sources) ,"浏览器不支持", true, true, true, new { @width="500px", @height="500px"}) |
| |
Video(String name, IEnumerable<SourceListItem>, ObjectType ObjectType, String ObjectSource) |
在客户端浏览器中渲染一个视频元素。 | @Html.Html5().Media.Video("video1",new SourceList(ViewBag.Sources), ObjectType.Flash, "~/flash1.swf") |
| |
Video(String name, IEnumerable<SourceListItem>, ObjectType ObjectType, String ObjectSource, Object htmlAttributes) |
在客户端浏览器中渲染一个视频元素。 | @Html.Html5().Media.Video("video1",new SourceList(ViewBag.Sources), ObjectType.Flash, "~/flash1.swf", new { @width="500px", @height="500px"}) |
Html5 Canvas 扩展
| 名称 | 描述 | 示例 | |
| |
EmptyCanvas(String name, String notSupportedMessage) |
在客户端浏览器中渲染一个空的 Canvas 元素。 | @Html.Html5().Canvas.EmptyCanvas("canvas1", "浏览器不支持") |
| |
EmptyCanvas(String name, String notSupportedMessage, Object htmlAttributes) |
在客户端浏览器中渲染一个空的 Canvas 元素。 | @Html.Html5().Canvas.EmptyCanvas("canvas1", "浏览器不支持", new { @width="500px", @height="500px"}) |
| |
Rectangle(String name, String notSupportedMessage, int x, int y, int width, int height, int thickness, String lineColor, Object htmlAttributes) |
在客户端浏览器中渲染 Canvas 中的矩形元素。 | @Html.Html5().Canvas.Rectangle("canvas1", "浏览器不支持", 100, 100, 200, 150, 4, "#FF0000", new { @width="500px", @height="500px"}) |
| |
FilledRectangle(String name, String notSupportedMessage, int x, int y, int width, int height, String fillColor, Object htmlAttributes) |
在客户端浏览器中渲染 Canvas 中的填充矩形元素。 | @Html.Html5().Canvas.Rectangle("canvas1", "浏览器不支持", 100, 100, 200, 150, "#FF0000", new { @width="500px", @height="500px"}) |
| |
Ellipse(String name, String notSupportedMessage, int cx, int cy, int width, int height, int thickness, String lineColor, Object htmlAttributes) |
在客户端浏览器中渲染 Canvas 中的椭圆元素。 | @Html.Html5().Canvas.Ellipse("canvas1", "浏览器不支持", 100, 100, 200, 150, 4, "#FF0000", new { @width="500px", @height="500px"}) |
| |
FilledEllipse(String name, String notSupportedMessage, int cx, int cy, int width, int height, String fillColor, Object htmlAttributes) |
在客户端浏览器中渲染 Canvas 中的填充椭圆元素。 | @Html.Html5().Canvas.FilledEllipse("canvas1", "浏览器不支持", 100, 100, 200, 150, "#FF0000", new { @width="500px", @height="500px"}) |
| |
Circle(String name, String notSupportedMessage, int x, int y, float radius, int thickness, String lineColor, Object htmlAttributes) |
在客户端浏览器中渲染 Canvas 中的圆形元素。 | @Html.Html5().Canvas.Circle("canvas1", "浏览器不支持", 100, 200, 75, 4, "#FF0000", new { @width="500px", @height="500px"}) |
| |
FilledCircle(String name, String notSupportedMessage, int x, int y, float radius, String fillColor, Object htmlAttributes) |
在客户端浏览器中渲染 Canvas 中的填充圆形元素。 | @Html.Html5().Canvas.FilledCircle("canvas1", "浏览器不支持", 100, 200, 75, "#FF0000", new { @width="500px", @height="500px"}) |
| |
Arc(String name, String notSupportedMessage, int x, int y, float radius, int thickness, float startAngle, float endAngle, String lineColor, Object htmlAttributes) |
在客户端浏览器中渲染 Canvas 中的弧形元素。 | @Html.Html5().Canvas.Arc("canvas1", "浏览器不支持", 100, 200, 75, 5, 150, 250, "#FF0000", new { @width="500px", @height="500px"}) |
| |
FilledArc(String name, String notSupportedMessage, int x, int y, float radius, float startAngle, float endAngle, String fillColor, Object htmlAttributes) |
在客户端浏览器中渲染 Canvas 中的填充弧形元素。 | @Html.Html5().Canvas.FilledArc("canvas1", "浏览器不支持", 100, 200, 75, 150, 250, "#FF0000", new { @width="500px", @height="500px"}) |
| |
BeizerCurve(String name, String notSupportedMessage, int x1, int y1, int x2, int y2, float radius, int thickness, String lineColor, Object htmlAttributes) |
在客户端浏览器中渲染 Canvas 中的贝塞尔曲线元素。 | @Html.Html5().Canvas.BeizerCurve("canvas1", "浏览器不支持", 100, 200, 175, 150, 75, 5, "#FF0000", new { @width="500px", @height="500px"}) |
| |
FilledBeizerCurve(String name, String notSupportedMessage, int x1, int y1, int x2, int y2, float radius, String fillColor, Object htmlAttributes) |
在客户端浏览器中渲染 Canvas 中的填充贝塞尔曲线元素。 | @Html.Html5().Canvas.FilledBeizerCurve("canvas1", "浏览器不支持", 100, 200, 175, 150, 75, "#FF0000", new { @width="500px", @height="500px"}) |
| |
QuadraticCurve(String name, String notSupportedMessage, int x1, int y1, int x2, int y2, int thickness, String lineColor, Object htmlAttributes) |
在客户端浏览器中渲染 Canvas 中的二次曲线元素。 | @Html.Html5().Canvas.QuadraticCurve("canvas1", "浏览器不支持", 100, 200, 175, 150, 5, "#FF0000", new { @width="500px", @height="500px"}) |
| |
FilledQuadraticCurve(String name, String notSupportedMessage, int x1, int y1, int x2, int y2, String fillColor, Object htmlAttributes) |
在客户端浏览器中渲染 Canvas 中的填充二次曲线元素。 | @Html.Html5().Canvas.FilledQuadraticCurve("canvas1", "浏览器不支持", 100, 200, 175, 150, "#FF0000", new { @width="500px", @height="500px"}) |
| |
Polygon(String name, String notSupportedMessage, Point[] points, int thickness, String lineColor, Object htmlAttributes) |
在客户端浏览器中渲染 Canvas 中的多边形元素。 | @Html.Html5().Canvas.Polygon("canvas1", "浏览器不支持", ViewBag.Points, 5, "#FF0000", new { @width="500px", @height="500px"}) |
| |
FilledPolygon(String name, String notSupportedMessage, Point[] points, String fillColor, Object htmlAttributes) |
在客户端浏览器中渲染 Canvas 中的填充多边形元素。 | @Html.Html5().Canvas.FilledPolygon("canvas1", "浏览器不支持", ViewBag.Points, "#FF0000", new { @width="500px", @height="500px"}) |
| |
Text(String name, String notSupportedMessage, int x, int y, String text, String fontFamily, int fontSize, String fontStyle, int thickness, String lineColor, Object htmlAttributes) |
在客户端浏览器中渲染 Canvas 中的文本元素。 | -@Html.Html5().Canvas.Text("canvas1", "浏览器不支持", 200, 300, "CodeProject", "Tahoma", 35, "bold", 5, "#FF0000", new { @width="500px", @height="500px"}) |
| |
FilledText(String name, String notSupportedMessage, int x, int y, String text, String fontFamily, int fontSize, String fontStyle, String fillColor, Object htmlAttributes) |
在客户端浏览器中渲染 Canvas 中的填充文本元素。 | @Html.Html5().Canvas.FilledText("canvas1", "浏览器不支持", 200, 300, "CodeProject", "Tahoma", 35, "bold", "#FF0000", new { @width="500px", @height="500px"}) |
| |
Line(String name, String notSupportedMessage, int x1, int y1, int x2, int y2, int thickness, String lineColor, Object htmlAttributes) |
在客户端浏览器中渲染 Canvas 中的线条元素。 | @Html.Html5().Canvas.Line("canvas1", "浏览器不支持", 200, 300, 400, 450, 5, "#FF0000", new { @width="500px", @height="500px"}) |
| |
Image(String name, String notSupportedMessage, int x, int y, int width, int height, String imageUrl, Object htmlAttributes) |
在客户端浏览器中渲染 Canvas 中的图像元素。 | @Html.Html5().Canvas.Image("canvas1", "浏览器不支持", 50, 50, 250, 250, "~/imagefile1.jpg", new { @width="500px", @height="500px"}) |
Html5 Svg 扩展
| 名称 | 描述 | 示例 | |
| |
EmptySvg(String name, String notSupportedMessage) |
在客户端浏览器中渲染一个空的 SVG 元素。 | @Html.Html5().Svg.EmptySvg("svg1", "浏览器不支持") |
| |
EmptySvg(String name, String notSupportedMessage, Object htmlAttributes) |
在客户端浏览器中渲染一个空的 SVG 元素。 | @Html.Html5().Svg.EmptySvg("svg1", "浏览器不支持", new { @width="500px", @height="500px"}) |
| |
Rectangle(String name, String notSupportedMessage, int x, int y, int width, int height, int thickness, String lineColor, Object htmlAttributes) |
在客户端浏览器中渲染一个包含矩形的 SVG 元素。 | @Html.Html5().Svg.Rectangle("svg1", "浏览器不支持", 200, 300, 300, 200, 5, "#FF0000", new { @width="500px", @height="500px"}) |
| |
FilledRectangle(String name, String notSupportedMessage, int x, int y, int width, int height, String fillColor, Object htmlAttributes) |
在客户端浏览器中渲染一个包含填充矩形的 SVG 元素。 | @Html.Html5().Svg.FilledRectangle("svg1", "浏览器不支持", 200, 300, 300, 200, "#FF0000", new { @width="500px", @height="500px"}) |
| |
Ellipse(String name, String notSupportedMessage, int cx, int cy, int width, int height, int thickness, String lineColor, Object htmlAttributes) |
在客户端浏览器中渲染一个包含椭圆的 SVG 元素。 | @Html.Html5().Svg.Ellipse("svg1", "浏览器不支持", 200, 300, 300, 200, 5, "#FF0000", new { @width="500px", @height="500px"}) |
| |
FilledEllipse(String name, String notSupportedMessage, int cx, int cy, int width, int height, String fillColor, Object htmlAttributes) |
在客户端浏览器中渲染一个包含填充椭圆的 SVG 元素。 | @Html.Html5().Svg.FilledEllipse("svg1", "浏览器不支持", 200, 300, 300, 200, "#FF0000", new { @width="500px", @height="500px"}) |
| |
Circle(String name, String notSupportedMessage, int cx, int cy, float radius, int thickness, String lineColor, Object htmlAttributes) |
在客户端浏览器中渲染一个包含圆形的 SVG 元素。 | @Html.Html5().Svg.Circle("svg1", "浏览器不支持", 200, 300, 75, 5, "#FF0000", new { @width="500px", @height="500px"}) |
| |
FilledCircle(String name, String notSupportedMessage, int cx, int cy, float radius, String fillColor, Object htmlAttributes) |
在客户端浏览器中渲染一个包含填充圆形的 SVG 元素。 | @Html.Html5().Svg.FilledCircle("svg1", "浏览器不支持", 200, 300, 75, "#FF0000", new { @width="500px", @height="500px"}) |
| |
Polygon(String name, String notSupportedMessage, Point[] points, int thickness, String lineColor, Object htmlAttributes) |
在客户端浏览器中渲染一个包含多边形的 SVG 元素。 | @Html.Html5().Svg.Polygon("svg1", "浏览器不支持", ViewBag.Points, 5, "#FF0000", new { @width="500px", @height="500px"}) |
| |
FilledPolygon(String name, String notSupportedMessage, Point[] points, String fillColor, Object htmlAttributes) |
在客户端浏览器中渲染一个包含填充多边形的 SVG 元素。 | @Html.Html5().Svg.FilledPolygon("svg1", "浏览器不支持", ViewBag.Points, "#FF0000", new { @width="500px", @height="500px"}) |
| |
Text(String name, String notSupportedMessage, int x, int y, String text, String fontFamily, int fontSize, String fontWeight, String fontStyle, String textDecoration, int thickness, String lineColor, Object htmlAttributes) |
在客户端浏览器中渲染一个包含文本的 SVG 元素。 | @Html.Html5().Svg.Text("svg1", "浏览器不支持", 100, 150, "CodeProject", "Tahoma", 35, "bold", "italic", "underline", 5, "#FF0000", new { @width="500px", @height="500px"}) |
| |
FilledText(String name, String notSupportedMessage, int x, int y, String text, String fontFamily, int fontSize, String fontWeight, String fontStyle, String textDecoration, String fillColor, Object htmlAttributes) |
在客户端浏览器中渲染一个包含填充文本的 SVG 元素。 | @Html.Html5().Svg.FilledText("svg1", "浏览器不支持", 100, 150, "CodeProject", "Tahoma", 35, "bold", "italic", "underline", "#FF0000", new { @width="500px", @height="500px"}) |
| |
Line(String name, String notSupportedMessage, int x1, int y1, int x2, int y2, int thickness, String lineColor, Object htmlAttributes) |
在客户端浏览器中渲染一个包含线条的 SVG 元素。 | @Html.Html5().Svg.Line("svg1", "浏览器不支持", 100, 150, 300, 400, 5, "#FF0000", new { @width="500px", @height="500px"}) |
| |
PolyLine(String name, String notSupportedMessage, Point[] points, int thickness, String lineColor, Object htmlAttributes) |
在客户端浏览器中渲染一个包含多段线的 SVG 元素。 | @Html.Html5().Svg.PolyLine("svg1", "浏览器不支持", ViewBag.Points, 5, "#FF0000", new { @width="500px", @height="500px"}) |
| |
Image(String name, String notSupportedMessage, int x, int y, int width, int height, String imageUrl, Object htmlAttributes) |
在客户端浏览器中渲染一个包含图像的 SVG 元素。 | @Html.Html5().Svg.Image("svg1", "浏览器不支持", 50, 50, 300, 300, "~/imagefile1.jpg", new { @width="500px", @height="500px"}) |
类库使用示例
一小段代码
//Creating input elements of different input type.
private TagBuilder BuildInputTag(string name, string inputType, object htmlAttributes)
{
TagBuilder tagBuilder = new TagBuilder("input");
if (htmlAttributes != null)
{
RouteValueDictionary routeValueDictionary =
new RouteValueDictionary(htmlAttributes);
tagBuilder.MergeAttributes(routeValueDictionary);
}
tagBuilder.MergeAttribute("type", inputType);
tagBuilder.MergeAttribute("name", name);
tagBuilder.MergeAttribute("id", name);
return tagBuilder;
}
//Creating video element
public MvcHtmlString Video(string name, IEnumerable<sourcelistitem> sourceList,
ObjectType objectType, string objectSource, object htmlAttributes)
{
TagBuilder tagBuilder = new TagBuilder("video");
if (htmlAttributes != null)
{
RouteValueDictionary routeValueDictionary =
new RouteValueDictionary(htmlAttributes);
tagBuilder.MergeAttributes(routeValueDictionary);
}
tagBuilder.MergeAttribute("id", name);
StringBuilder sourceItemBuilder = new StringBuilder();
sourceItemBuilder.AppendLine();
foreach (var sourceItem in sourceList)
{
sourceItemBuilder.AppendLine(SourceItemToSource(sourceItem));
}
sourceItemBuilder.AppendLine();
if (objectType == ObjectType.Flash)
{
sourceItemBuilder.AppendLine(CreateFlashObject
(objectSource, htmlAttributes));
}
else
{
sourceItemBuilder.AppendLine(CreateSilverlightObject
(sourceList, objectSource, htmlAttributes));
}
tagBuilder.InnerHtml = sourceItemBuilder.ToString();
sourceItemBuilder.AppendLine();
return MvcHtmlString.Create(tagBuilder.ToString(TagRenderMode.Normal));
}
//Creating canvas element
public MvcHtmlString EmptyCanvas(string name,
string notSupportedMessage, object htmlAttributes)
{
TagBuilder tagBuilder = new TagBuilder("canvas");
if (htmlAttributes != null)
{
RouteValueDictionary routeValueDictionary =
new RouteValueDictionary(htmlAttributes);
tagBuilder.MergeAttributes(routeValueDictionary);
}
tagBuilder.MergeAttribute("id", name);
tagBuilder.InnerHtml = notSupportedMessage;
return MvcHtmlString.Create(tagBuilder.ToString(TagRenderMode.Normal));
}
//Creating svg element
private static TagBuilder CreateSvgTag(string name,
string notSupportedMessage, object htmlAttributes)
{
TagBuilder tagBuilder = new TagBuilder("svg");
if (htmlAttributes != null)
{
RouteValueDictionary routeValueDictionary =
new RouteValueDictionary(htmlAttributes);
tagBuilder.MergeAttributes(routeValueDictionary);
}
tagBuilder.MergeAttribute("xmlns", "http://www.w3.org/2000/svg");
tagBuilder.MergeAttribute("id", name);
tagBuilder.InnerHtml = notSupportedMessage;
return tagBuilder;
}
演示
您可以从以下链接查看使用此班级图书馆的演示
结论
感谢您阅读本文。我期待您的反馈。您将从我这里期待更多。