Tuesday 28 May 2013

Why Asp.Net Web API

Asp.Net Web API is a framework for building HTTP services that can be consume by a broad range of clients including browsers, mobiles, iphone and tablets. It is very similar to ASP.NET MVC since it contains the MVC features such as routing, controllers, action results, filter, model binders, IOC container or dependency injection. But it is not a part of the MVC Framework. It is a part of the core ASP.NET platform and can be used with MVC and other types of Web applications like Asp.Net WebForms. It can also be used as an stand-alone Web services application.

Why Asp.Net Web API (Web API) ?

Today, a web-based application is not enough to reach it's customers. People are very smart, they are using iphone, mobile, tablets etc. devices in its daily life. These devices also have a lot of apps for making the life easy. Actually, we are moving from the web towards apps world.
So, if you like to expose your service data to the browsers and as well as all these modern devices apps in fast and simple way, you should have an API which is compatible with browsers and all these devices.
For example twitter,facebook and Google API for the web application and phone apps.
Web API is the great framework for exposing your data and service to different-different devices. Moreover Web API is open source an ideal platform for building REST-ful services over the .NET Framework. Unlike WCF Rest service, it use the full featues of HTTP (like URIs, request/response headers, caching, versioning, various content formats) and you don't need to define any extra config settings for different devices unlike WCF Rest service.

Web API Features

  1. It supports convention-based CRUD Actions since it works with HTTP verbs GET,POST,PUT and DELETE.
  2. Responses have an Accept header and HTTP status code.
  3. Responses are formatted by Web API’s MediaTypeFormatter into JSON, XML or whatever format you want to add as a MediaTypeFormatter.
  4. It may accepts and generates the content which may not be object oriented like images, PDF files etc.
  5. It has automatic support for OData. Hence by placing the new [Queryable] attribute on a controller method that returns IQueryable, clients can use the method for OData query composition.
  6. It can be hosted with in the applicaion or on IIS.
  7. It also supports the MVC features such as routing, controllers, action results, filter, model binders, IOC container or dependency injection that makes it more simple and robust.

Why to choose Web API ?

  1. If we need a Web Service and don’t need SOAP, then ASP.Net Web API is best choice.
  2. It is Used to build simple, non-SOAP-based HTTP Services on top of existing WCF message pipeline.
  3. It doesn't have tedious and extensive configuration like WCF REST service.
  4. Simple service creation with Web API. With WCF REST Services, service creation is difficult.
  5. It is only based on HTTP and easy to define, expose and consume in a REST-ful way.
  6. It is light weight architecture and good for devices which have limited bandwidth like smart phones.
  7. It is open source.

Asp.Net Web API VS Asp.Net MVC

  1. Asp.Net MVC is used to create web applications that returns both views and data but Asp.Net Web API is used to create full blown HTTP services with easy and simple way that returns only data not view.
  2. Web API helps to build REST-ful services over the .NET Framework and it also support content-negotiation(it's about deciding the best response format data that could be acceptable by the client. it could be JSON,XML,ATOM or other formatted data), self hosting which are not in MVC.
  3. Web API also takes care of returning data in particular format like JSON,XML or any other based upon the Accept header in the request and you don't worry about that. MVC only return data in JSON format using JsonResult.
  4. In Web API the request are mapped to the actions based on HTTP verbs but in MVC it is mapped to actions name.
  5. Asp.Net Web API is new framework and part of the core ASP.NET framework. The model binding, filters, routing and others MVC features exist in Web API are different from MVC and exists in the new System.Web.Http assembly. In MVC, these featues exist with in System.Web.Mvc. Hence Web API can also be used with Asp.Net and as a stand alone service layer.
  6. You can mix Web API and MVC controller in a single project to handle advanced AJAX requests which may return data in JSON, XML or any others format and building a full blown HTTP service. Typically, this will be called Web API self hosting.
  7. When you have mixed MVC and Web API controller and you want to implement the authorization then you have to create two filters one for MVC and another for Web API since boths are different.
  8. Moreover, Web API is light weight architecture and except the web application it can also be used with smart phone apps.

Sunday 26 May 2013

MVC Razor Helpers Cheat Sheet

ASP .Net MVC Razor Helpers Cheat Sheet

 HtmlHelper

Method
Action
Output
ActionLink(s:text, s:action, o:attributes)
Writes an anchor tag to a link for a specific action.
<a href="action">text</a>
AntiForgeryToken(s:salt, s:domain, s:path)
Generates a hidden form field (anti-forgery token) that is validated when the form is submitted.

AttributeEncode(s: input)
HTML-encodes the string (as an attribute).

BeginForm(s:action, s:controller, o:values)
Writes an opening <form> tag to the response.
<form action="/controller/action/">
BeginRouteForm(s:routeName)
Writes an opening <form> tag for the route.
<form action="route">
CheckBox(s:name, b:checked)
Returns a check box input element.
<input type="checkbox" name="name" id="name" checked="checked" />
CheckBoxFor(e:expression)
Returns a check box input element for the model.
<input type="checkbox" name="name" id="name" checked="checked" />
DropDownList(s:name, list:selectlistitems)
Returns a single-selection select element.
<select name="name" id="name"></select>
DropDownListFor(e:expression, list:selectlistitems)
Returns a single-selection select element for the model.
<select name="name" id="name"></select>
Encode(s:input)
HTML-encodes the string.

EndForm()
Renders the closing </form> tag to the response.
</form>
Hidden(s:name, o:value)
Returns a hidden input element.
<input type="hidden" value="value" name="name" />
HiddenFor(e:expression)
Returns a hidden input element for the model.
<input type="hidden" value="value" name="name" />
ListBox(s:name, list:selectlistitems)
Returns a multi-select select element.
<select multiple="multiple" name="name" id="name"></select>
ListBoxFor(e:expression, list:selectlistitems)
Returns a multi-select select element for the model.
<select multiple="multiple" name="name" id="name"></select>
Password(s:name, o:value)
Returns a password input element.
<input type="password" value="value" name="name" />
PasswordFor(e:expression)
Returns a password input element for the model.
<input type="password" value="value" name="name" />
RadioButton(s:name, o:value, b:checked)
Returns a radio button input element.
<input type="radio" value="value" name="name" checked="checked" />
RadioButtonFor(e:expression, o:value)
Returns a radio button input element for the model.
<input type="radio" value="value" name="name" checked="checked" />
Partial(s:name, o:model)
Renders a partial view (.cshtml).

RouteLink(s:text, s:routeName)
Returns an anchor element (a element) that contains the virtual path of the specified action.
<a href="action">text</a>
TextArea(s:name, s:value)
Returns the specified textarea element.
<textarea name="name">value</textarea>
TextAreaFor(e:expression)
Returns the specified textarea element for the model.
<textarea name="name">value</textarea>
TextBox(s:name, o:value)
Returns a text input element.
<input type="text" name="name" value="value" />
TextBoxFor(e:expression)
Returns a text input element for the model.
<input type="text" name="name" value="value" />
TextBoxFor(e:expression)
Returns a text input element for the model.
<input type="text" name="name" value="value" />


UrlHelper

Method
Action
Output
Action(s:action, s:controller)
Generates a fully qualified URL to an action method.

Content(s:path)
Converts a virtual (relative) path to an application absolute path.

Encode(s:url)
Encodes special characters in a URL string into character-entity equivalents.

RouteUrl(s:route)
Generates a fully qualified URL for the specified route name.




List of Classes and Extensions


Name Description Extensions
ico1.gif Html5Helper A Html5 helper class which contains all the Html5 elements.
ico1.gif Html5MediaHelper A Html5 helper class which contains all the media related elements.
ico1.gif Html5CanvasHelper A Html5 helper class which contains all the canvas related elements.
ico1.gif Html5SvgHelper A Html5 helper class which contains all the svg related elements.
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" })

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"})

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"})

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"})

Samples of Usage of the Class Library

scr3.jpg scr4.jpg

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