You are on page 1of 23

Class Library for HTML 5 controls for ASP.

NET MVC
Download class library - 17.19 KB
Download source - 30.94 KB

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 Productclass 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 Productobject).
"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


Hide Copy Code

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

Razor View Engine


Hide Copy Code

@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 andSystem.Web.WebPages in our application.

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

List of Classes and Extensions


Extensio
ns

Name

Description

Html5Helper

A Html5 helper class which contains all the Html5 Extension


elements.
s List

Html5MediaHelper A Html5 helper class which contains all the


media related elements.

Extension
s List

Html5CanvasHelp
er

A Html5 helper class which contains all the


canvas related elements.

Extension
s List

Html5SvgHelper

A Html5 helper class which contains all the svg


related elements.

Extension
s List

SourceList

Represents a list that contains all the source


items.

Name

Description

SourceListItem

Represents the source item in an instance of


theSystem.Web.Mvc.SourceListItem class.

Extensio
ns

Html5 Extensions
Name

Descrip
tion

Example

PlaceholderBox(Strin
g name, String
placeholderText)

Renders
a input
element
having a
placehol
der text.

@Html.Html5().PlaceholderBox("placeholderBox
1", "Search")

PlaceholderBox(Strin
g name, String
placeholderText,
Object
htmlAttributes)

Renders
a input
element
having a
placehol
der text.

@Html.Html5().PlaceholderBox("placeholderBox
1", "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

Renders

@Html.Html5().NumberBox("numberBox1", new

Name

Descrip
tion

Example

name, Object
htmlAttributes)

a input
element
of
number
type.

{ @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 @Html.Html5().SearchBox("searchBox1")
a input
element
of search
type.

SearchBox(String
name, Object
htmlAttributes)

Renders @Html.Html5().SearchBox("searchBox1", new


a input
{ @class="txt" })
element
of search
type.

Name

Descrip
tion

Example

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 @Html.Html5().MonthBox("monthBox1")
a input
element
of month
type.

MonthBox(String
name, Object
htmlAttributes)

Renders @Html.Html5().MonthBox("monthBox1", new


a input
{ @class="txt" })
element
of month
type.

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

Renders
a input

@Html.Html5().TimeBox("timeBox1", new
{ @class="txt" })

Name

Descrip
tion

Example

htmlAttributes)

element
of time
type.

DateTimeBox(String
name)

Renders @Html.Html5().DateTimeBox("dateTimeBox1")
a input
element
of
datetime
type.

DateTimeBox(String
name, Object
htmlAttributes)

Renders @Html.Html5().DateTimeBox("dateTimeBox1",
a input
new { @class="txt" })
element
of
datetime
type.

DateTimeLocalBox(St Renders @Html.Html5().DateTimeLocalBox("dateTimeLoc


a input
ring name)
alBox1")
element
of
datetime
-local
type.
DateTimeLocalBox(St Renders @Html.Html5().DateTimeLocalBox("dateTimeLoc
a input
ring name, Object
alBox1", new { @class="txt" })
element
htmlAttributes)
of
datetime
-local
type.
Progress(String
name, String
innerText)

Renders @Html.Html5().Progress("progress1", "browser


a
does not support")
progress
element.

Progress(String
name, String
innerText, Object
htmlAttributes)

Renders @Html.Html5().Progress("progress1", "browser


a
does not support", new { @class="txt" })
progress
element.

Progress(String
name, String
innerText, int max)

Renders @Html.Html5().Progress("progress1", "browser


a
does not support", 500)
progress
element.

Progress(String
name, String
innerText, int max,
Object
htmlAttributes)

Renders @Html.Html5().Progress("progress1", "browser


a
does not support", 500, new { @class="txt" })
progress
element.

Progress(String

Renders

@Html.Html5().Progress("progress1", "browser

Name

Descrip
tion

name, String
innerText, int max,
int value)

a
does not support", 500, 300)
progress
element.

Progress(String
name, String
innerText, int max,
int value, Object
htmlAttributes)

Renders @Html.Html5().Progress("progress1", "browser


a
does not support", 500, 300, new
progress { @class="txt" })
element.

Meter(String name,
String innerText)

Renders @Html.Html5().Meter("meter1", "browser does


a meter not support")
element.

Meter(String name,
String innerText,
Object
htmlAttributes)

Renders @Html.Html5().Meter("meter1", "browser does


a meter not support", new { @class="txt" })
element.

Meter(String name,
String innerText,
double min, double
max, double value)

Renders @Html.Html5().Meter("meter1", "browser does


a meter not support", 100, 500, 200)
element.

Meter(String name,
String innerText,
double min, double
max, double value,
Object
htmlAttributes)

Renders @Html.Html5().Meter("meter1", "browser does


a meter not support", 100, 500, 200, new
element. { @class="txt" })

Example

Top

Html5 Media Extensions


Name

Descri
ption

Example

Audio(String name,
String source, String
notSupportedMessage
)

Render @Html.Html5().Media.Audio("audio1","~/audiofile
sa
1.mp3","Browser does not support")
audio
elemen
t in the
client
browse
r.

Audio(String name,
String source, String
notSupportedMessage
, Object
htmlAttributes)

Render @Html.Html5().Media.Audio("audio1","~/audiofile
sa
1.mp3","Browser does not support", new
audio
{ @width="500px", @height="500px"})
elemen
t in the
client

Name

Descri
ption

Example

browse
r.

Audio(String name,
String source, String
notSupportedMessage
, bool showControls,
bool autoPlay, bool
playInLoop)

Render @Html.Html5().Media.Audio("audio1","~/audiofile
sa
1.mp3","Browser does not support", true, true,
audio
true)
elemen
t in the
client
browse
r.

Audio(String name,
String source, String
notSupportedMessage
, bool showControls,
bool autoPlay, bool
playInLoop, Object
htmlAttributes)

Render
sa
audio
elemen
t in the
client
browse
r.

Audio(String name,
IEnumerable<SourceL
istItem> sourceList,
String
notSupportedMessage
)

Render @Html.Html5().Media.Audio("audio1", new


sa
SourceList(ViewBag.Sources) ,"Browser does not
audio
support")
elemen
t in the
client
browse
r.

Audio(String name,
IEnumerable<SourceL
istItem> sourceList,
String
notSupportedMessage
, Object
htmlAttributes)

Render
sa
audio
elemen
t in the
client
browse
r.

Audio(String name,
IEnumerable<SourceL
istItem> sourceList,
String
notSupportedMessage
, bool showControls,
bool autoPlay, bool
playInLoop)

Render @Html.Html5().Media.Audio("audio1", new


sa
SourceList(ViewBag.Sources) ,"Browser does not
audio
support", true, true, true)
elemen
t in the
client
browse
r.

Audio(String name,
IEnumerable<SourceL
istItem> sourceList,
String
notSupportedMessage
, bool showControls,

Render
sa
audio
elemen
t in the
client
browse

@Html.Html5().Media.Audio("audio1","~/audiofile
1.mp3","Browser does not support", true, true,
true, new { @width="500px",
@height="500px"})

@Html.Html5().Media.Audio("audio1", new
SourceList(ViewBag.Sources) ,"Browser does not
support", new { @width="500px",
@height="500px"})

@Html.Html5().Media.Audio("audio1", new
SourceList(ViewBag.Sources) ,"Browser does not
support", true, true, true, new
{ @width="500px", @height="500px"})

Name

Descri
ption

Example

bool autoPlay, bool


playInLoop, Object
htmlAttributes)

r.

Video(String name,
String source, String
notSupportedMessage
)

Render @Html.Html5().Media.Video("video1","~/videofile
sa
1.mp4","Browser does not support")
video
elemen
t in the
client
browse
r.

Video(String name,
String source, String
notSupportedMessage
, Object
htmlAttributes)

Render @Html.Html5().Media.Video("video1","~/videofile
sa
1.mp4","Browser does not support", new
video
{ @width="500px", @height="500px"})
elemen
t in the
client
browse
r.

Video(String name,
String source, String
notSupportedMessage
, bool showControls,
bool autoPlay, bool
playInLoop)

Render @Html.Html5().Media.Video("video1","~/videofile
sa
1.mp4","Browser does not support", true, true,
video
true)
elemen
t in the
client
browse
r.

Video(String name,
String source, String
notSupportedMessage
, bool showControls,
bool autoPlay, bool
playInLoop, Object
htmlAttributes)

Render
sa
video
elemen
t in the
client
browse
r.

Video(String name,
IEnumerable<SourceL
istItem> sourceList,
String
notSupportedMessage
)

Render @Html.Html5().Media.Video("video1", new


sa
SourceList(ViewBag.Sources) ,"Browser does not
video
support")
elemen
t in the
client
browse
r.

Video(String name,
IEnumerable<SourceL
istItem> sourceList,
String
notSupportedMessage
, Object

Render
sa
video
elemen
t in the
client

@Html.Html5().Media.Video("video1","~/videofile
1.mp4","Browser does not support", true, true,
true, new { @width="500px",
@height="500px"})

@Html.Html5().Media.Video("video1", new
SourceList(ViewBag.Sources) ,"Browser does not
support", new { @width="500px",
@height="500px"})

Name

Descri
ption

Example

htmlAttributes)

browse
r.

Video(String name,
IEnumerable<SourceL
istItem> sourceList,
String
notSupportedMessage
, bool showControls,
bool autoPlay, bool
playInLoop)

Render @Html.Html5().Media.Video("video1", new


sa
SourceList(ViewBag.Sources) ,"Browser does not
video
support", true, true, true)
elemen
t in the
client
browse
r.

Video(String name,
IEnumerable<SourceL
istItem> sourceList,
String
notSupportedMessage
, bool showControls,
bool autoPlay, bool
playInLoop, Object
htmlAttributes)

Render
sa
video
elemen
t in the
client
browse
r.

Video(String name,
IEnumerable<SourceL
istItem>, ObjectType
ObjectType, String
ObjectSource)

Render @Html.Html5().Media.Video("video1",new
sa
SourceList(ViewBag.Sources), ObjectType.Flash,
video
"~/flash1.swf")
elemen
t in the
client
browse
r.

Video(String name,
IEnumerable<SourceL
istItem>, ObjectType
ObjectType, String
ObjectSource, Object
htmlAttributes)

Render
sa
video
elemen
t in the
client
browse
r.

@Html.Html5().Media.Video("video1", new
SourceList(ViewBag.Sources) ,"Browser does not
support", true, true, true, new
{ @width="500px", @height="500px"})

@Html.Html5().Media.Video("video1",new
SourceList(ViewBag.Sources), ObjectType.Flash,
"~/flash1.swf", new { @width="500px",
@height="500px"})

Top

Html5 Canvas Extensions


Name

EmptyCanvas(String
name, String
notSupportedMessage)

Descrip
tion
Render
sa
empty
canvas
elemen

Example

@Html.Html5().Canvas.EmptyCanvas("canvas
1", "Browser does not support")

t in the
client
browser
.

EmptyCanvas(String
name, String
notSupportedMessage,
Object htmlAttributes)

Render @Html.Html5().Canvas.EmptyCanvas("canvas
sa
1", "Browser does not support", new
empty
{ @width="500px", @height="500px"})
canvas
elemen
t in the
client
browser
.

Rectangle(String name,
String
notSupportedMessage,
int x, int y, int width, int
height, int thickness,
String lineColor, Object
htmlAttributes)

Render
sa
rectang
le
elemen
t 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)

Render
sa
filled
rectang
le
elemen
t 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)

Render
sa
ellipse
elemen
t 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

Render
sa
filled
ellipse
elemen
t in

@Html.Html5().Canvas.FilledEllipse("canvas1",
"Browser does not support", 100, 100, 200,
150, "#FF0000", new { @width="500px",
@height="500px"})

htmlAttributes)

canvas
in the
client
browser
.

Circle(String name,
String
notSupportedMessage,
int x, int y, float radius,
int thickness, String
lineColor, Object
htmlAttributes)

Render
sa
circle
elemen
t 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)

Render
sa
filled
circle
elemen
t 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)

Render
s a arc
elemen
t 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)

Render
sa
filled
arc
elemen
t 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

Render
sa
beizer
curve
elemen
t in

@Html.Html5().Canvas.BeizerCurve("canvas1",
"Browser does not support", 100, 200, 175,
150, 75, 5, "#FF0000", new
{ @width="500px", @height="500px"})

lineColor, Object
htmlAttributes)

canvas
in the
client
browser
.

FilledBeizerCurve(String
name, String
notSupportedMessage,
int x1, int y1, int x2, int
y2, float radius, String
fillColor, Object
htmlAttributes)

Render
sa
filled
beizer
curve
elemen
t in
canvas
in the
client
browser
.

@Html.Html5().Canvas.FilledBeizerCurve("can
vas1", "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)

Render
sa
quadrat
ic curve
elemen
t in
canvas
in the
client
browser
.

@Html.Html5().Canvas.QuadraticCurve("canva
s1", "Browser does not support", 100, 200,
175, 150, 5, "#FF0000", new
{ @width="500px", @height="500px"})

FilledQuadraticCurve(St
ring name, String
notSupportedMessage,
int x1, int y1, int x2, int
y2, String fillColor,
Object htmlAttributes)

Render
sa
filled
quadrat
ic curve
elemen
t in
canvas
in the
client
browser
.

@Html.Html5().Canvas.FilledQuadraticCurve("c
anvas1", "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)

Render
sa
polygon
elemen
t 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

Render
sa

@Html.Html5().Canvas.FilledPolygon("canvas1
", "Browser does not support", ViewBag.Points,

notSupportedMessage,
Point[] points, String
fillColor, Object
htmlAttributes)

filled
"#FF0000", new { @width="500px",
polygon @height="500px"})
elemen
t in
canvas
in the
client
browser
.

Text(String name, String


notSupportedMessage,
int x, int y, String text,
String fontFamily, int
fontSize, String
fontStyle, int thickness,
String lineColor, Object
htmlAttributes)

Render
s a text
elemen
t 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)

Render
sa
filled
text
elemen
t 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)

Render
s a line
elemen
t 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)

Render
sa
image
elemen
t 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

Descripti
on

Example

EmptySvg(String name, Renders a @Html.Html5().Svg.EmptySvg("svg1",


empty
String
"Browser does not support")
svg
notSupportedMessage)
element
in the
client
browser.
EmptySvg(String name,
String
notSupportedMessage,
Object htmlAttributes)

Renders a @Html.Html5().Svg.EmptySvg("svg1",
empty
"Browser does not support", new
svg
{ @width="500px", @height="500px"})
element
in the
client
browser.

Rectangle(String name,
String
notSupportedMessage,
int x, int y, int width, int
height, int thickness,
String lineColor, Object
htmlAttributes)

Renders a
svg
element
containin
ga
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
containin
g 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
containin
ga
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
containin
g 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,

Renders a @Html.Html5().Svg.Circle("svg1", "Browser

String
notSupportedMessage,
int cx, int cy, float
radius, int thickness,
String lineColor, Object
htmlAttributes)

svg
element
containin
g a circle
in the
client
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
containin
g 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
containin
ga
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
containin
g 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
containin
g 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

Renders a
svg
element
containin
g a filled
text in
the client

@Html.Html5().Svg.FilledText("svg1",
"Browser does not support", 100, 150,
"CodeProject", "Tahoma", 35, "bold", "italic",
"underline", "#FF0000", new
{ @width="500px", @height="500px"})

fontStyle, String
textDecoration, String
fillColor, Object
htmlAttributes)

browser.

Line(String name,
String
notSupportedMessage,
int x1, int y1, int x2, int
y2, int thickness, String
lineColor, Object
htmlAttributes)

Renders a
svg
element
containin
g 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
containin
ga
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
containin
g 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


Hide Shrink

//Creating input elements of different input type.

Copy Code

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 might also like