Click here to Skip to main content
Click here to Skip to main content

HTML5 for Asp.net & C# Developers

, 11 Feb 2013
Rate this:
Please Sign up or sign in to vote.
HTML5 Quick Tips for Asp.net Developers

Editorial Note

Having trouble writing or posting articles? These articles aim to gather together tips and tricks from authors and mentors to help you write great articles.

Introduction

I learned some interesting things in HTML5 which an asp.net and c# developer should know and use those things in real time development , which saves time and provide efficient speed as well . for asp.net developer , HTML5 minimized the use of validations and ajax . even though HTML5 validations may be unreliable because of its browser compatibility , but still there are several jQuery plugins which provide partial support for the HTML5 validation attributes including : 

 jQuery Validation — http://docs.jquery.com/Plugins/Validation
 html5Form —         http://www.matiasmancini.com.ar/jquery-plugin-ajax-form-validation-html5.html
 h5Validate —        http://ericleads.com/h5validate/  

lets me describe here how developers can utilize HTML 5 in their projects :- 

HTML5 Form Validation -  

1. Require field validation : 

In asp.net we use require field validator to validate textbox , dropdown . Html5 attribute "required" allow us to provide the same validation. 

 Example - 
<span style="font-size: 14px;"><asp:textbox id="txtbx" runat="server" required="required" title="use me as validation message"/>   or <input type="text" required  />   </span>

we can write required="required" or required , both will work on compatible browsers.now no need to write an extra line or we can say no need to use server side control require field validator , but still server side control ensure us for proper validation.  

2. Regular Expression validation  :  

In asp.net we use regular expression to validate a string .HTML5 provided us an attribute named "pattern" . 

 Example - <asp:textbox id="txtbx" runat="server" pattern="^\d*$" title="only numbers"/> or                     <input type="text"pattern="^\d*$" title="only numbers"/>   

\d is the regular expression for a number, * means that it accepts more than one of them. 

To validate E-mail we can directly use input type email( no regular expression    required :               <input type="email" name="usermail"> 

 

3. Range validator :  

Instead of using textbox and range validator for numeric range , we can use HTML5 input of type number with min and max attribute . 

  <input max="5" min="1" name="quantity" type="number" /> 

above input type take will take maximum 5 as number. 

4. Custom validator :   

In asp.net we used to create our own custom validator , here HTML5 brings a constraint validation API to perform custom validation. You can perform any custom validation that you need only requirement is that you have to write a JavaScript function. 

 <body>
    <form id="form1" runat="server">
    <div>
        <input id="respect" type="text" required />
  
        <asp:Button ID="btnsave" runat="server" Text="validate" />
    </div>
    </form>
    <script type="text/javascript">
        var respect = document.getElementById("respect");
           respect.addEventListener("input", function () {
            var value = (respect.value);
            if (value === "girls") 
            {
                // input is fine -- pass the error message
                respect.setCustomValidity("");
            }
            else
            {
                respect.setCustomValidity("Respect girls");    
            }
        });
    </script>
</body>  

 In above example i have taken input type text ,and my custom validation will only accept string "girls" if string will be equal to "girls" then validation pass otherwise it will show validation message "respect girls". 

 HTML5 other attributes and input Type  - 

 i learned some attributes and type in HTML5, which are better replacement of Asp.net ajax's some control.  

1. Watermark :  

In asp.net we used to apply watermark using ajax , now its very easy by just putting "placeholder" attribute in asp.net textbox control .  

 Example - <asp:textbox id="txtbx" placeholder="Watermark text !" runat="server"></asp:textbox> 

 

2. Calender :  

instead of using ajax calender we can use input type date .  

<input type="date" name="anything"><span style="font-size: 14px;"> </span> 

3. Progress bar :  

 HTML5 brings a new element i.e Progress . we can dynamically change the value to show the continuous progress. 

<progress value="76" max="100"></progress>  

HTML5 brings a new element i.e Progress . we can dynamically change the value to show the continuous progress. 

4. AutoComplete :  

one of new element in HTML5 is datalist .we can assign values in datalist and then can bind that datalist to a particular textbox for the autocomplete options . below is the example :- 

 <datalist id="ddlCities">
    <option value="Ghaziabad" />
    <option value="Delhi" />
    <option value="Lucknow" />
    <option value="Kanpur" />
</datalist> 

 now to assign this to a particular textbox , you will have to use the list attribute for an input type textbox .we can create the list using javascript , and to make use of this an asp.net developer can use webservice and javascript to make autocomplete wit this element . 

<input type="text" id="textbox" list="ddlCities"/> or
<asp:TextBox ID="txt" runat="server" list="ddlCities"></asp:TextBox> 

 and result will be the - 

 

 

 As we saw , HTML5 brings new elements to help developer and these really helps when you are working with asp.net mvc . 

License

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

Share

About the Author

Sarvesh Kushwaha
Software Developer
India India
I do believe life is to help others ... So here i am .. in my spare time i learn new things of programming and try to help people with my knowledge .
I'm an energetic, self-motivated and hard-working Developer and Information Technology Professional with experience in projects, website design and development.
 
Visit My Technical Blog
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 PinmemberAntonio Ripa5-Jan-14 23:54 
GeneralRe: My vote of 5 PinmemberSarvesh Kushwaha6-Jan-14 14:14 
QuestionThank You PinmemberMember 1024170829-Aug-13 19:53 
GeneralRe: Thank You PinmemberSarvesh Kushwaha29-Aug-13 23:28 
QuestionMy vote Pinmemberisoint11-May-13 4:40 
AnswerRe: My vote PinmemberSarvesh Kushwaha14-May-13 18:30 
GeneralMy vote of 4 Pinmembersamiran bhuin7-May-13 1:38 
QuestionThanks.... PinmemberHidayat Meman20-Feb-13 0:26 
AnswerRe: Thanks.... PinmemberSarvesh Kushwaha20-Feb-13 7:44 
thanks ......Because IE7 does not supports HTML5 . to use html5 in ie7 you can use following http://html5boilerplate.com or http://code.google.com/p/html5shiv
Smile | :) Smile | :) ...
GeneralRe: Thanks.... PinmemberHidayat Meman20-Feb-13 17:27 
GeneralMy vote of 5 PinmemberHidayat Meman20-Feb-13 0:24 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140827.1 | Last Updated 11 Feb 2013
Article Copyright 2013 by Sarvesh Kushwaha
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid