HTML 5 Controls for ASP.NET MVC

Introduction

Well, this is my eleventh article. This time, I have tried a new idea about the HTML 5 controls for ASP.NET MVC.

What is ASP.NET MVC?

ASP.NET MVC is a part of the ASP.NET Web application framework. It is one of the two different programming models you can use to create ASP.NET Web applications, the other being ASP.NET Web Forms.

An MVC Application is designed and implemented using the following three attributes:

Model: The model contains the core information for an application. This includes the data and validation rules as well as data access and aggregation logic.
View: The view encapsulates the presentation of the application, and in ASP.NET this is typically the HTML markup.
Controller: The controller contains the control-flow logic. It interacts with the Model and Views to control the flow of information and execution of the application.

This separation of entity allows you to have nimbleness and flexibility in building and maintaining your application. For example, by separating the views, you can iterate on the appearance of your application without touching on any of the core business logic. You can also separate work by role, so that, for example designers can work on the views, while developers work on the model.

ASP.NET MVC brings the power of this development paradigm to ASP.NET development, allowing you to use your .NET development skills to build MVC applications.

It:

gives you complete control over your HTML Markup
enables rich AJAX and jQuery integration
allows you to create SEO-friendly URLs for your site
makes Test Driven Development (TDD) easy

What is a Model View Controller (MVC) Framework?

MVC is a framework methodology that divides an application's implementation into three component roles: models, views, and controllers.

"Models" in a MVC based application are the components of the application that are responsible for maintaining state. Often this state is persisted inside a database (for example: we might have a Product class that is used to represent order data from the Products table inside SQL).
"Views" in a MVC based application are the components responsible for displaying the application's user interface. Typically, this UI is created off of the model data (for example: we might create an Product "Edit" view that surfaces textboxes, dropdowns and checkboxes based on the current state of a Product object).
"Controllers" in a MVC based application are the components responsible for handling end user interaction, manipulating the model, and ultimately choosing a view to render to display UI. In an MVC application, the view is only about displaying information - it is the controller that handles and responds to user input and interaction.

One of the benefits of using a MVC methodology is that it helps enforce a clean separation of concerns between the models, views and controllers within an application. Maintaining a clean separation of concerns makes the testing of applications much easier, since the contract between different application components are more clearly defined and articulated.

What is ASP.Net MVC? (Definition from Wikipedia)

The ASP.NET MVC Framework is a web application framework that implements the model-view-controller pattern. Based on ASP.NET, it allows software developers to build a Web application as a composition of three roles: Model, View and Controller. A model represents the state of a particular aspect of the application. Frequently, a model maps to a database table with the entries in the table representing the state of the application. A controller handles interactions and updates the model to reflect a change in state of the application, and then passes information to the view. A view accepts necessary information from the controller and renders a user interface to display that.

In April 2009, the ASP.NET MVC source code was released under the Microsoft Public License (MS-PL).

The ASP.NET MVC Framework couples the models, views, and controllers using interface-based contracts, thereby allowing each component to be easily tested independently.

View Engines

There are two types of view engines in ASP.NET MVC 3. They are ASPX View Engine and Razor View Engine.

ASPX View Engine

<%: Html.TextBox("txtBox") %>

Razor View Engine

@Html.TextBox("txtBox")

What is HTML 5?

HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the fifth revision of the HTML standard (originally created in 1990 and most recently standardized as HTML4 in 1997) and as of August 2011 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML4, but XHTML1 and DOM2HTML (particularly JavaScript) as well.

Following its immediate predecessors HTML 4.01 and XHTML 1.1, HTML5 is a response to the observation that the HTML and XHTML in common use on the World Wide Web is a mixture of features introduced by various specifications, along with those introduced by software products such as web browsers, those established by common practice, and the many syntax errors in existing web documents. It is also an attempt to define a single markup language that can be written in either HTML or XHTML syntax. It includes detailed processing models to encourage more interoperable implementations; it extends, improves and rationalises the markup available for documents, and introduces markup and APIs for complex web applications.

In particular, HTML5 adds many new syntactical features. These include the <video>, <audio>, <header> and <canvas> elements, as well as the integration of SVG content. These features are designed to make it easy to include and handle multimedia and graphical content on the web without having to resort to proprietary plugins and APIs. Other new elements, such as <section>, <article>, <header>, and <nav> are designed to enrich the semantic content of documents. New attributes have been introduced for the same purpose, while some elements and attributes have been removed. Some elements, such as <a>, <cite> and <menu> have been changed, redefined or standardised. The APIs and DOM are no longer afterthoughts, but are fundamental parts of the HTML5 specification. HTML5 also defines in some detail the required processing for invalid documents, so that syntax errors will be treated uniformly by all conforming browsers and other user agents.

Our Application

The purpose of our application is to use HTML 5 controls for ASP.NET MVC whether ASPX Engine or Razor Engine. After doing some analysis is developed this class library, but anyhow I was not able to implement some tags and options through this class library, I have made with some limitations.

Development

To develop class library for HTML 5 extensions, we need to add reference of System.Web.Mvc and System.Web.WebPages in our application.

Then we need to add this class library in any ASP.NET MVC application.

List of Classes and Extensions

Name	Description	Extensions
`Html5Helper`	A Html5 helper class which contains all the Html5 elements.	Extensions List
`Html5MediaHelper`	A Html5 helper class which contains all the media related elements.	Extensions List
`Html5CanvasHelper`	A Html5 helper class which contains all the canvas related elements.	Extensions List
`Html5SvgHelper`	A Html5 helper class which contains all the svg related elements.	Extensions List
`SourceList`	Represents a list that contains all the source items.
`SourceListItem`	Represents the source item in an instance of the `System.Web.Mvc.SourceListItem` class.

Html5 Extensions

Name	Description	Example
`PlaceholderBox(String name, String placeholderText)`	Renders a input element having a placeholder text.	`@Html.Html5().PlaceholderBox("placeholderBox1", "Search")`
`PlaceholderBox(String name, String placeholderText, Object htmlAttributes)`	Renders a input element having a placeholder text.	`@Html.Html5().PlaceholderBox("placeholderBox1", "Search", new { @class="txt" })`
`EmailBox(String name)`	Renders a input element of email type.	`@Html.Html5().EmailBox("emailBox1")`
`EmailBox(String name, Object htmlAttributes)`	Renders a input element of email type.	`@Html.Html5().EmailBox("emailBox1", new { @class="txt" })`
`UrlBox(String name)`	Renders a input element of url type.	`@Html.Html5().EmailBox("urlBox1")`
`UrlBox(String name, Object htmlAttributes)`	Renders a input element of url type.	`@Html.Html5().EmailBox("urlBox1", new { @class="txt" })`
`NumberBox(String name)`	Renders a input element of number type.	`@Html.Html5().NumberBox("numberBox1")`
`NumberBox(String name, Object htmlAttributes)`	Renders a input element of number type.	`@Html.Html5().NumberBox("numberBox1", new { @class="txt" })`
`NumberBox(String name, double min, double max, double step)`	Renders a input element of number type.	`@Html.Html5().NumberBox("numberBox1", 10, 50, 2)`
`NumberBox(String name, double min, double max, double step, Object htmlAttributes)`	Renders a input element of number type.	`@Html.Html5().NumberBox("numberBox1", 10, 50, 2, new { @class="txt" })`
`Range(String name)`	Renders a input element of range type.	`@Html.Html5().Range("range1")`
`Range(String name, Object htmlAttributes)`	Renders a input element of range type.	`@Html.Html5().Range("range1", new { @class="txt" })`
`Range(String name, int min, int max, int step)`	Renders a input element of range type.	`@Html.Html5().Range("range1", 10, 50, 2)`
`Range(String name, int min, int max, int step, Object htmlAttributes)`	Renders a input element of range type.	`@Html.Html5().Range("range1", 10, 50, 2, new { @class="txt" })`
`SearchBox(String name)`	Renders a input element of search type.	`@Html.Html5().SearchBox("searchBox1")`
`SearchBox(String name, Object htmlAttributes)`	Renders a input element of search type.	`@Html.Html5().SearchBox("searchBox1", new { @class="txt" })`
`ColorBox(String name)`	Renders a input element of color type.	`@Html.Html5().ColorBox("colorBox1")`
`ColorBox(String name, Object htmlAttributes)`	Renders a input element of color type.	`@Html.Html5().ColorBox("colorBox1", new { @class="txt" })`
`DateBox(String name)`	Renders a input element of date type.	`@Html.Html5().DateBox("dateBox1")`
`DateBox(String name, Object htmlAttributes)`	Renders a input element of date type.	`@Html.Html5().DateBox("dateBox1", new { @class="txt" })`
`MonthBox(String name)`	Renders a input element of month type.	`@Html.Html5().MonthBox("monthBox1")`
`MonthBox(String name, Object htmlAttributes)`	Renders a input element of month type.	`@Html.Html5().MonthBox("monthBox1", new { @class="txt" })`
`WeekBox(String name)`	Renders a input element of week type.	`@Html.Html5().WeekBox("weekBox1")`
`WeekBox(String name, Object htmlAttributes)`	Renders a input element of week type.	`@Html.Html5().WeekBox("weekBox1", new { @class="txt" })`
`TimeBox(String name)`	Renders a input element of time type.	`@Html.Html5().TimeBox("timeBox1")`
`TimeBox(String name, Object htmlAttributes)`	Renders a input element of time type.	`@Html.Html5().TimeBox("timeBox1", new { @class="txt" })`
`DateTimeBox(String name)`	Renders a input element of datetime type.	`@Html.Html5().DateTimeBox("dateTimeBox1")`
`DateTimeBox(String name, Object htmlAttributes)`	Renders a input element of datetime type.	`@Html.Html5().DateTimeBox("dateTimeBox1", new { @class="txt" })`
`DateTimeLocalBox(String name)`	Renders a input element of datetime-local type.	`@Html.Html5().DateTimeLocalBox("dateTimeLocalBox1")`
`DateTimeLocalBox(String name, Object htmlAttributes)`	Renders a input element of datetime-local type.	`@Html.Html5().DateTimeLocalBox("dateTimeLocalBox1", new { @class="txt" })`
`Progress(String name, String innerText)`	Renders a progress element.	`@Html.Html5().Progress("progress1", "browser does not support")`
`Progress(String name, String innerText, Object htmlAttributes)`	Renders a progress element.	`@Html.Html5().Progress("progress1", "browser does not support", new { @class="txt" })`
`Progress(String name, String innerText, int max)`	Renders a progress element.	`@Html.Html5().Progress("progress1", "browser does not support", 500)`
`Progress(String name, String innerText, int max, Object htmlAttributes)`	Renders a progress element.	`@Html.Html5().Progress("progress1", "browser does not support", 500, new { @class="txt" })`
`Progress(String name, String innerText, int max, int value)`	Renders a progress element.	`@Html.Html5().Progress("progress1", "browser does not support", 500, 300)`
`Progress(String name, String innerText, int max, int value, Object htmlAttributes)`	Renders a progress element.	`@Html.Html5().Progress("progress1", "browser does not support", 500, 300, new { @class="txt" })`
`Meter(String name, String innerText)`	Renders a meter element.	`@Html.Html5().Meter("meter1", "browser does not support")`
`Meter(String name, String innerText, Object htmlAttributes)`	Renders a meter element.	`@Html.Html5().Meter("meter1", "browser does not support", new { @class="txt" })`
`Meter(String name, String innerText, double min, double max, double value)`	Renders a meter element.	`@Html.Html5().Meter("meter1", "browser does not support", 100, 500, 200)`
`Meter(String name, String innerText, double min, double max, double value, Object htmlAttributes)`	Renders a meter element.	`@Html.Html5().Meter("meter1", "browser does not support", 100, 500, 200, new { @class="txt" })`

Top

Html5 Media Extensions

Name	Description	Example
`Audio(String name, String source, String notSupportedMessage)`	Renders a audio element in the client browser.	`@Html.Html5().Media.Audio("audio1","~/audiofile1.mp3","Browser does not support")`
`Audio(String name, String source, String notSupportedMessage, Object htmlAttributes)`	Renders a audio element in the client browser.	`@Html.Html5().Media.Audio("audio1","~/audiofile1.mp3","Browser does not support", new { @width="500px", @height="500px"})`
`Audio(String name, String source, String notSupportedMessage, bool showControls, bool autoPlay, bool playInLoop)`	Renders a audio element in the client browser.	`@Html.Html5().Media.Audio("audio1","~/audiofile1.mp3","Browser does not support", true, true, true)`
`Audio(String name, String source, String notSupportedMessage, bool showControls, bool autoPlay, bool playInLoop, Object htmlAttributes)`	Renders a audio element in the client browser.	`@Html.Html5().Media.Audio("audio1","~/audiofile1.mp3","Browser does not support", true, true, true, new { @width="500px", @height="500px"})`
`Audio(String name, IEnumerable<SourceListItem> sourceList, String notSupportedMessage)`	Renders a audio element in the client browser.	`@Html.Html5().Media.Audio("audio1", new SourceList(ViewBag.Sources) ,"Browser does not support")`
`Audio(String name, IEnumerable<SourceListItem> sourceList, String notSupportedMessage, Object htmlAttributes)`	Renders a audio element in the client browser.	`@Html.Html5().Media.Audio("audio1", new SourceList(ViewBag.Sources) ,"Browser does not support", new { @width="500px", @height="500px"})`
`Audio(String name, IEnumerable<SourceListItem> sourceList, String notSupportedMessage, bool showControls, bool autoPlay, bool playInLoop)`	Renders a audio element in the client browser.	`@Html.Html5().Media.Audio("audio1", new SourceList(ViewBag.Sources) ,"Browser does not support", true, true, true)`
`Audio(String name, IEnumerable<SourceListItem> sourceList, String notSupportedMessage, bool showControls, bool autoPlay, bool playInLoop, Object htmlAttributes)`	Renders a audio element in the client browser.	`@Html.Html5().Media.Audio("audio1", new SourceList(ViewBag.Sources) ,"Browser does not support", true, true, true, new { @width="500px", @height="500px"})`
`Video(String name, String source, String notSupportedMessage)`	Renders a video element in the client browser.	`@Html.Html5().Media.Video("video1","~/videofile1.mp4","Browser does not support")`
`Video(String name, String source, String notSupportedMessage, Object htmlAttributes)`	Renders a video element in the client browser.	`@Html.Html5().Media.Video("video1","~/videofile1.mp4","Browser does not support", new { @width="500px", @height="500px"})`
`Video(String name, String source, String notSupportedMessage, bool showControls, bool autoPlay, bool playInLoop)`	Renders a video element in the client browser.	`@Html.Html5().Media.Video("video1","~/videofile1.mp4","Browser does not support", true, true, true)`
`Video(String name, String source, String notSupportedMessage, bool showControls, bool autoPlay, bool playInLoop, Object htmlAttributes)`	Renders a video element in the client browser.	`@Html.Html5().Media.Video("video1","~/videofile1.mp4","Browser does not support", true, true, true, new { @width="500px", @height="500px"})`
`Video(String name, IEnumerable<SourceListItem> sourceList, String notSupportedMessage)`	Renders a video element in the client browser.	`@Html.Html5().Media.Video("video1", new SourceList(ViewBag.Sources) ,"Browser does not support")`
`Video(String name, IEnumerable<SourceListItem> sourceList, String notSupportedMessage, Object htmlAttributes)`	Renders a video element in the client browser.	`@Html.Html5().Media.Video("video1", new SourceList(ViewBag.Sources) ,"Browser does not support", new { @width="500px", @height="500px"})`
`Video(String name, IEnumerable<SourceListItem> sourceList, String notSupportedMessage, bool showControls, bool autoPlay, bool playInLoop)`	Renders a video element in the client browser.	`@Html.Html5().Media.Video("video1", new SourceList(ViewBag.Sources) ,"Browser does not support", true, true, true)`
`Video(String name, IEnumerable<SourceListItem> sourceList, String notSupportedMessage, bool showControls, bool autoPlay, bool playInLoop, Object htmlAttributes)`	Renders a video element in the client browser.	`@Html.Html5().Media.Video("video1", new SourceList(ViewBag.Sources) ,"Browser does not support", true, true, true, new { @width="500px", @height="500px"})`
`Video(String name, IEnumerable<SourceListItem>, ObjectType ObjectType, String ObjectSource)`	Renders a video element in the client browser.	`@Html.Html5().Media.Video("video1",new SourceList(ViewBag.Sources), ObjectType.Flash, "~/flash1.swf")`
`Video(String name, IEnumerable<SourceListItem>, ObjectType ObjectType, String ObjectSource, Object htmlAttributes)`	Renders a video element in the client browser.	`@Html.Html5().Media.Video("video1",new SourceList(ViewBag.Sources), ObjectType.Flash, "~/flash1.swf", new { @width="500px", @height="500px"})`

Top

Html5 Canvas Extensions

Name	Description	Example
`EmptyCanvas(String name, String notSupportedMessage)`	Renders a empty canvas element in the client browser.	`@Html.Html5().Canvas.EmptyCanvas("canvas1", "Browser does not support")`
`EmptyCanvas(String name, String notSupportedMessage, Object htmlAttributes)`	Renders a empty canvas element in the client browser.	`@Html.Html5().Canvas.EmptyCanvas("canvas1", "Browser does not support", new { @width="500px", @height="500px"})`
`Rectangle(String name, String notSupportedMessage, int x, int y, int width, int height, int thickness, String lineColor, Object htmlAttributes)`	Renders a rectangle element in canvas in the client browser.	`@Html.Html5().Canvas.Rectangle("canvas1", "Browser does not support", 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)`	Renders a filled rectangle element in canvas in the client browser.	`@Html.Html5().Canvas.Rectangle("canvas1", "Browser does not support", 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)`	Renders a ellipse element in canvas in the client browser.	`@Html.Html5().Canvas.Ellipse("canvas1", "Browser does not support", 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)`	Renders a filled ellipse element in canvas in the client browser.	`@Html.Html5().Canvas.FilledEllipse("canvas1", "Browser does not support", 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)`	Renders a circle element in canvas in the client browser.	`@Html.Html5().Canvas.Circle("canvas1", "Browser does not support", 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)`	Renders a filled circle element in canvas in the client browser.	`@Html.Html5().Canvas.FilledCircle("canvas1", "Browser does not support", 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)`	Renders a arc element in canvas in the client browser.	`@Html.Html5().Canvas.Arc("canvas1", "Browser does not support", 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)`	Renders a filled arc element in canvas in the client browser.	`@Html.Html5().Canvas.FilledArc("canvas1", "Browser does not support", 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)`	Renders a beizer curve element in canvas in the client browser.	`@Html.Html5().Canvas.BeizerCurve("canvas1", "Browser does not support", 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)`	Renders a filled beizer curve element in canvas in the client browser.	`@Html.Html5().Canvas.FilledBeizerCurve("canvas1", "Browser does not support", 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)`	Renders a quadratic curve element in canvas in the client browser.	`@Html.Html5().Canvas.QuadraticCurve("canvas1", "Browser does not support", 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`)	Renders a filled quadratic curve element in canvas in the client browser.	`@Html.Html5().Canvas.FilledQuadraticCurve("canvas1", "Browser does not support", 100, 200, 175, 150, "#FF0000", new { @width="500px", @height="500px"})`
`Polygon(String name, String notSupportedMessage, Point[] points, int thickness, String lineColor, Object htmlAttributes)`	Renders a polygon element in canvas in the client browser.	`@Html.Html5().Canvas.Polygon("canvas1", "Browser does not support", ViewBag.Points, 5, "#FF0000", new { @width="500px", @height="500px"})`
`FilledPolygon(String name, String notSupportedMessage, Point[] points, String fillColor, Object htmlAttributes)`	Renders a filled polygon element in canvas in the client browser.	`@Html.Html5().Canvas.FilledPolygon("canvas1", "Browser does not support", 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)`	Renders a text element in canvas in the client browser.	`-@Html.Html5().Canvas.Text("canvas1", "Browser does not support", 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)`	Renders a filled text element in canvas in the client browser.	`@Html.Html5().Canvas.FilledText("canvas1", "Browser does not support", 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)`	Renders a line element in canvas in the client browser.	`@Html.Html5().Canvas.Line("canvas1", "Browser does not support", 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)`	Renders a image element in canvas in the client browser.	`@Html.Html5().Canvas.Image("canvas1", "Browser does not support", 50, 50, 250, 250, "~/imagefile1.jpg", new { @width="500px", @height="500px"})`

Top

Html5 Svg Extensions

Name	Description	Example
`EmptySvg(String name, String notSupportedMessage)`	Renders a empty svg element in the client browser.	`@Html.Html5().Svg.EmptySvg("svg1", "Browser does not support")`
`EmptySvg(String name, String notSupportedMessage, Object htmlAttributes)`	Renders a empty svg element in the client browser.	`@Html.Html5().Svg.EmptySvg("svg1", "Browser does not support", new { @width="500px", @height="500px"})`
`Rectangle(String name, String notSupportedMessage, int x, int y, int width, int height, int thickness, String lineColor, Object htmlAttributes)`	Renders a svg element containing a rectangle in the client browser.	`@Html.Html5().Svg.Rectangle("svg1", "Browser does not support", 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)`	Renders a svg element containing a filled rectangle in the client browser.	`@Html.Html5().Svg.FilledRectangle("svg1", "Browser does not support", 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)`	Renders a svg element containing a ellipse in the client browser.	`@Html.Html5().Svg.Ellipse("svg1", "Browser does not support", 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)`	Renders a svg element containing a filled ellipse in the client browser.	`@Html.Html5().Svg.FilledEllipse("svg1", "Browser does not support", 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)`	Renders a svg element containing a circle in the client browser.	`@Html.Html5().Svg.Circle("svg1", "Browser does not support", 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)`	Renders a svg element containing a filled circle in the client browser.	`@Html.Html5().Svg.FilledCircle("svg1", "Browser does not support", 200, 300, 75, "#FF0000", new { @width="500px", @height="500px"})`
`Polygon(String name, String notSupportedMessage, Point[] points, int thickness, String lineColor, Object htmlAttributes)`	Renders a svg element containing a polygon in the client browser.	`@Html.Html5().Svg.Polygon("svg1", "Browser does not support", ViewBag.Points, 5, "#FF0000", new { @width="500px", @height="500px"})`
`FilledPolygon(String name, String notSupportedMessage, Point[] points, String fillColor, Object htmlAttributes)`	Renders a svg element containing a filled polygon in the client browser.	`@Html.Html5().Svg.FilledPolygon("svg1", "Browser does not support", 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)`	Renders a svg element containing a text in the client browser.	`@Html.Html5().Svg.Text("svg1", "Browser does not support", 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)`	Renders a svg element containing a filled text in the client browser.	`@Html.Html5().Svg.FilledText("svg1", "Browser does not support", 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)`	Renders a svg element containing a line in the client browser.	`@Html.Html5().Svg.Line("svg1", "Browser does not support", 100, 150, 300, 400, 5, "#FF0000", new { @width="500px", @height="500px"})`
`PolyLine(String name, String notSupportedMessage, Point[] points, int thickness, String lineColor, Object htmlAttributes)`	Renders a svg element containing a polyline in the client browser.	`@Html.Html5().Svg.PolyLine("svg1", "Browser does not support", 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)`	Renders a svg element containing a image in the client browser.	`@Html.Html5().Svg.Image("svg1", "Browser does not support", 50, 50, 300, 300, "~/imagefile1.jpg", new { @width="500px", @height="500px"})`

Top

Samples of Usage of the Class Library

Small Piece of Code

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

Demo

You can see the demo of using this class library from the following link:

Demo Application showing the use of Html5MVCWebControls Class Library

Conclusion

Thanks for viewing this article. I expect feedback from you. You expect more from me.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Saleth Prakash

India

Member

No Biography provided

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Class Library for HTML 5 controls for ASP.NET MVC

Type	Article
Licence	CPOL
First Posted	6 Aug 2011
Views	67,596
Downloads	4,799
Bookmarked	127 times

C#ASP.NET
IntermediateMVC