Click here to Skip to main content
15,867,686 members
Articles / Web Development / ASP.NET

HTML 5 Controls for ASP.NET MVC

Rate me:
Please Sign up or sign in to vote.
4.81/5 (57 votes)
4 Sep 2011CPOL21 min read 246K   9.9K   163   27
Class Library for 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:

What-Is-MVC.png

  • 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

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

Razor View Engine

HTML
@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.

scr1.jpg

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

scr2.jpg

List of Classes and Extensions

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

Html5 Extensions

Name Description Example
ico2.gif PlaceholderBox(String name, String placeholderText) Renders a input element having a placeholder text. @Html.Html5().PlaceholderBox("placeholderBox1", "Search")
ico2.gif PlaceholderBox(String name, String placeholderText, Object htmlAttributes) Renders a input element having a placeholder text. @Html.Html5().PlaceholderBox("placeholderBox1", "Search", new { @class="txt" })
ico2.gif EmailBox(String name) Renders a input element of email type. @Html.Html5().EmailBox("emailBox1")
ico2.gif EmailBox(String name, Object htmlAttributes) Renders a input element of email type. @Html.Html5().EmailBox("emailBox1", new { @class="txt" })
ico2.gif UrlBox(String name) Renders a input element of url type. @Html.Html5().EmailBox("urlBox1")
ico2.gif UrlBox(String name, Object htmlAttributes) Renders a input element of url type. @Html.Html5().EmailBox("urlBox1", new { @class="txt" })
ico2.gif NumberBox(String name) Renders a input element of number type. @Html.Html5().NumberBox("numberBox1")
ico2.gif NumberBox(String name, Object htmlAttributes) Renders a input element of number type. @Html.Html5().NumberBox("numberBox1", new { @class="txt" })
ico2.gif NumberBox(String name, double min, double max, double step) Renders a input element of number type. @Html.Html5().NumberBox("numberBox1", 10, 50, 2)
ico2.gif 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" })
ico2.gif Range(String name) Renders a input element of range type. @Html.Html5().Range("range1")
ico2.gif Range(String name, Object htmlAttributes) Renders a input element of range type. @Html.Html5().Range("range1", new { @class="txt" })
ico2.gif Range(String name, int min, int max, int step) Renders a input element of range type. @Html.Html5().Range("range1", 10, 50, 2)
ico2.gif 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" })
ico2.gif SearchBox(String name) Renders a input element of search type. @Html.Html5().SearchBox("searchBox1")
ico2.gif SearchBox(String name, Object htmlAttributes) Renders a input element of search type. @Html.Html5().SearchBox("searchBox1", new { @class="txt" })
ico2.gif ColorBox(String name) Renders a input element of color type. @Html.Html5().ColorBox("colorBox1")
ico2.gif ColorBox(String name, Object htmlAttributes) Renders a input element of color type. @Html.Html5().ColorBox("colorBox1", new { @class="txt" })
ico2.gif DateBox(String name) Renders a input element of date type. @Html.Html5().DateBox("dateBox1")
ico2.gif DateBox(String name, Object htmlAttributes) Renders a input element of date type. @Html.Html5().DateBox("dateBox1", new { @class="txt" })
ico2.gif MonthBox(String name) Renders a input element of month type. @Html.Html5().MonthBox("monthBox1")
ico2.gif MonthBox(String name, Object htmlAttributes) Renders a input element of month type. @Html.Html5().MonthBox("monthBox1", new { @class="txt" })
ico2.gif WeekBox(String name) Renders a input element of week type. @Html.Html5().WeekBox("weekBox1")
ico2.gif WeekBox(String name, Object htmlAttributes) Renders a input element of week type. @Html.Html5().WeekBox("weekBox1", new { @class="txt" })
ico2.gif TimeBox(String name) Renders a input element of time type. @Html.Html5().TimeBox("timeBox1")
ico2.gif TimeBox(String name, Object htmlAttributes) Renders a input element of time type. @Html.Html5().TimeBox("timeBox1", new { @class="txt" })
ico2.gif DateTimeBox(String name) Renders a input element of datetime type. @Html.Html5().DateTimeBox("dateTimeBox1")
ico2.gif DateTimeBox(String name, Object htmlAttributes) Renders a input element of datetime type. @Html.Html5().DateTimeBox("dateTimeBox1", new { @class="txt" })
ico2.gif DateTimeLocalBox(String name) Renders a input element of datetime-local type. @Html.Html5().DateTimeLocalBox("dateTimeLocalBox1")
ico2.gif DateTimeLocalBox(String name, Object htmlAttributes) Renders a input element of datetime-local type. @Html.Html5().DateTimeLocalBox("dateTimeLocalBox1", new { @class="txt" })
ico2.gif Progress(String name, String innerText) Renders a progress element. @Html.Html5().Progress("progress1", "browser does not support")
ico2.gif Progress(String name, String innerText, Object htmlAttributes) Renders a progress element. @Html.Html5().Progress("progress1", "browser does not support", new { @class="txt" })
ico2.gif Progress(String name, String innerText, int max) Renders a progress element. @Html.Html5().Progress("progress1", "browser does not support", 500)
ico2.gif 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" })
ico2.gif Progress(String name, String innerText, int max, int value) Renders a progress element. @Html.Html5().Progress("progress1", "browser does not support", 500, 300)
ico2.gif 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" })
ico2.gif Meter(String name, String innerText) Renders a meter element. @Html.Html5().Meter("meter1", "browser does not support")
ico2.gif Meter(String name, String innerText, Object htmlAttributes) Renders a meter element. @Html.Html5().Meter("meter1", "browser does not support", new { @class="txt" })
ico2.gif 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)
ico2.gif 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
ico2.gif 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")
ico2.gif 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"})
ico2.gif 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)
ico2.gif 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"})
ico2.gif 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")
ico2.gif 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"})
ico2.gif 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)
ico2.gif 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"})
ico2.gif 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")
ico2.gif 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"})
ico2.gif 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)
ico2.gif 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"})
ico2.gif 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")
ico2.gif 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"})
ico2.gif 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)
ico2.gif 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"})
ico2.gif 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")
ico2.gif 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
ico2.gif EmptyCanvas(String name, String notSupportedMessage) Renders a empty canvas element in the client browser. @Html.Html5().Canvas.EmptyCanvas("canvas1", "Browser does not support")
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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
ico2.gif EmptySvg(String name, String notSupportedMessage) Renders a empty svg element in the client browser. @Html.Html5().Svg.EmptySvg("svg1", "Browser does not support")
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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"})
ico2.gif 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

scr3.jpg

scr4.jpg

Small Piece of Code

C#
//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:

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)


Written By
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Questioncool Pin
ezequielsd16-Feb-16 1:41
ezequielsd16-Feb-16 1:41 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun19-Jan-14 18:25
Humayun Kabir Mamun19-Jan-14 18:25 
GeneralMy vote of 5 Pin
Renju Vinod26-Aug-13 18:33
professionalRenju Vinod26-Aug-13 18:33 
SuggestionMy vote for 5 Pin
Zoltán Zörgő17-Dec-12 8:04
Zoltán Zörgő17-Dec-12 8:04 
GeneralMy vote of 5 Pin
GregoryW8-Oct-12 22:09
GregoryW8-Oct-12 22:09 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey28-May-12 4:52
professionalManoj Kumar Choubey28-May-12 4:52 
GeneralMy vote of 5 Pin
Sunasara Imdadhusen21-Sep-11 23:11
professionalSunasara Imdadhusen21-Sep-11 23:11 
GeneralMy vote of 5 Pin
Filip D'haene4-Sep-11 9:28
Filip D'haene4-Sep-11 9:28 
QuestionNice Pin
Shahriar Iqbal Chowdhury/Galib22-Aug-11 20:31
professionalShahriar Iqbal Chowdhury/Galib22-Aug-11 20:31 
SuggestionWhere is the MVC code example? Pin
Rune R Hansen22-Aug-11 5:10
Rune R Hansen22-Aug-11 5:10 
SuggestionRe: Where is the MVC code example? Pin
Virshu22-Aug-11 6:58
Virshu22-Aug-11 6:58 
GeneralRe: Where is the MVC code example? Pin
Rune R Hansen23-Aug-11 5:53
Rune R Hansen23-Aug-11 5:53 
AnswerRe: Where is the MVC code example? Pin
Virshu23-Aug-11 6:19
Virshu23-Aug-11 6:19 
GeneralRe: Where is the MVC code example? Pin
Saleth Prakash23-Aug-11 7:30
Saleth Prakash23-Aug-11 7:30 
GeneralRe: Where is the MVC code example? [modified] Pin
Rune R Hansen24-Aug-11 5:27
Rune R Hansen24-Aug-11 5:27 
SuggestionRe: Where is the MVC code example? Pin
Virshu25-Aug-11 15:40
Virshu25-Aug-11 15:40 
GeneralRe: Where is the MVC code example? Pin
Rune R Hansen26-Aug-11 5:18
Rune R Hansen26-Aug-11 5:18 
GeneralRe: Where is the MVC code example? Pin
Saleth Prakash21-Sep-11 20:15
Saleth Prakash21-Sep-11 20:15 
GeneralI will look at the code example Pin
Rune R Hansen23-Sep-11 4:21
Rune R Hansen23-Sep-11 4:21 
QuestionNuGet Package PinPopular
Michael Volz17-Aug-11 22:05
Michael Volz17-Aug-11 22:05 
QuestionYou got my vote of 5, BUT... Pin
Bill SerGio, The Infomercial King17-Aug-11 8:32
Bill SerGio, The Infomercial King17-Aug-11 8:32 
GeneralMy vote of 5 Pin
Muneeb R. Baig10-Aug-11 9:52
Muneeb R. Baig10-Aug-11 9:52 
QuestionNice Pin
Nigel Shaw8-Aug-11 10:41
Nigel Shaw8-Aug-11 10:41 
AnswerRe: Nice Pin
Atul Khanduri23-Dec-13 10:18
Atul Khanduri23-Dec-13 10:18 
Questionmodernizr Pin
Tim Schwallie8-Aug-11 5:48
Tim Schwallie8-Aug-11 5:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.