If at first you don't succeed, call it version 1.0

Contact Me

Sarvesh Kushwaha
Email : sarveshkushwaha@outlook.com

Total Pageviews

Powered by Blogger.

Google+ Followers

Saturday, 2 February 2013

HTML5 for C# & Asp.net Developers ( Tips )


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 HTML5 in their projects .


HTML5 Form Validation -

1. Require field validaton- in asp.net we use require field validator to validate textbox , dropdown .. ,
    html5 attribute "required" allow us to provide the same validation .

  
 Example - <asp:textbox id="txtbx" runat="server" required="required" title="use                  me as validation message"/> or                   <input type="text" required  />
    
 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 - 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"/>   To validate E-mail we can directly use input type email(no regular expression    required :               <input type="email" name="usermail">

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




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 found some attributes and type of HTML5 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">

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>


4. Auto-complete - 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"/>
<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 .
Reactions:

9 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. In all validation controls set two main property are customtovalidate and errormessage.

    ReplyDelete
  3. I have two different panels first of login and second of register. how could i differ validations of both these. When I am clicking on Login button it is also asking for register panels validations. In C# I cant put theme in different form tags.

    ReplyDelete
  4. Good and short article as per asp.net view.

    ReplyDelete
  5. I've a ASP.NET dropdown list and its post back is true let say if the value is zero in drop down it should show error How can I get that using pattern

    ReplyDelete