Using JSON, AJAX, jQuery With ASP.NET MVC 4 Application - Part 2

 In this article you will learn about simple HTML 5 attributes, HTML 5 input element types and parse user input data to server side using Ajax call.

 

Using simple registration form I just implemented it.

HTML 5 attributes

• Autocomplete
  
  Usually we use “autocomplete mode” beginning in the form. Doing that it applies all the input types under form tag.
  
  Using autocomplete mode, browser automatically detect and complete rest of the values based on values that the user has entered before.
  
  Although if you want to set “autocomplete" mode to off in specific input type you can simply set autocomplete="off" after that browser will not complete that input automatically.
  
  1. <form autocomplete="on" id="user-RegInfo">  
  2.     <input type="text" class="form-control" id="user-FirstName">  
  3.     <input type="text" class="form-control" id="user-Email" autocomplete="off">  
  4.   
  5. </form>  
• Autofocus
  
  When web page get loads <input> element should automatically get focus,
  
  1. <input type="text" class="form-control" id="user-FirstName" autofocus >  
  In a web page, only one input element should have the autofocus attribute applied,
  
  
• Form
  
  When you have one or more input types you need to add under form tag.
  
  
• pattern (regexp)
  
  Using pattern attribute you can specially set what is the accepted input values <input> elements
  
  1. <input type="text" class="form-control" name="country_code" pattern="[A-Za-z]{4}" title="Four letter country code" id="user-CountryCode">  
  Below I added few pattern:
  
  a. used to check email pattern=" [^@]+@[^@]+\.[a-zA-Z]{2,6}"
  b. Three letter Country code pattern=" [A-Za-z]{3}”
  c. Enter Digits only pattern="\d{1,9}"
  d. Sri Lankan phone number pattern="(\+?\d[- .]*){10}"
  e. Strong Password pattern = “(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{10,}”
  (at least ten symbols containing at least one number, one lower, and one upper letter)
  
  
• Placeholder
  
  Simply placeholder attribute provide hint of an input field. It’s more like title attribute but better than title attribute.
  
  1. <input type="text" class="form-control" id="user-LastName" placeholder="Please enter Last name">  
  2. <input type="text" class="form-control" name="country_code" pattern="[A-Za-z]{4}" title="Four letter country code" id="user-CountryCode">  
  
  
• Required
  
  This is a very important attribute. Because without filling input field user not able to submit the form.
  
  When it comes, the front end validation required attribute plays major roll, because instead of having lengthy JavaScript validation you can have simple required attribute to do that part.
  
  1. <input type="text" class="form-control" id="user-FirstName" required>  
• Step
  
  Step attribute only use with number input type. Using step attribute you can set intervals between two numbers. In example you need to go 5 by 5 in text box.
  
  1. <input type="number" class="form-control" step="5" id="user-TeamMembers" required>  
• min and max
  
  This attribute also use with number input type.
  
  Using min and max attributes you can specify minimum and maximum value to particular textbox.
  
  1. <input type="number" class="form-control" min="0" max="20" step="2" id="user-TeamMembers" required>  

HTML5 input element types

• Text
• Number
• Email
• Search
• Date
• time
• Date-time
• Month
• week
• Range
• Tel
• url
• Color
• Data-list

Note:

HTML5 mark up is still developing and integrating with web browsers. Due to this you cannot use above each and every input element types and attributes in every web browser. Some are not supporting. So before jumping to develop an application you need to think an audience and which web browser you are going to use to develop your application.

 

The following HTML5 input element types I used to implement the example,

• text: Define any text input.
• Number: Define number input.
• Password: Define password input.
• Email: Define Email address input.

Note:

All HTML input element types should need to be inside with the form tag and html button type should be submit, otherwise HTML5 validation will not fire when you click submit button.

 

You need to add on click event to submit button because we are paring user inputs to backend using Ajax call,

1. <button type="submit" onclick="submitform()" id="save">Save</button>  

Following java script functions I used to validate form,

1. function submitform()  
2. {  
3.     var frm = document.getElementsByTagName('form')[0];  
4.   
5.     if (frm.checkValidity())  
6.     {  
7.   
8.         UserRequestSubmission();  
9.   
10.     }  
11. }  

If all the validations are ok UserRequestSubmission(); function will call.

 

UserRequestSubmission() function will handle data submission to the server side.

in UserRequestSubmission() function ,

Fill all the data to an array,

1. var regData = [['0', '1', '2', '3', '4', '5','6','7','8'],  
2. [fName, lName, cLivingCity, countryCode, cAge, pTeamMembersCount, contactNumber, userEmailAddress, userPermPassword]];  

Parse that array in to JSON.stringify() method.

1. var json = JSON.stringify(regData);  

Note: If you are parsing only one parameter to the backend no need to stringify it just parse as it is,

1. var json = "{' empNumber ':'" + 'empId' + "'}";  

Note:

using JSON.stringify() method converts a JavaScript value to a JSON text and stores that JSON text in a string. Basically before parsing data to the backend you need to serialize a JS object into a JSON string.

 

That JSON string will parse through the AJAX call to the backend.

 

 

After values parse to the backend, accessing data you can implement logic what you want to do.

Note there are two main HTTP Request Methods GET and POST,

In simple,

• GET: Requests data from server side.
• POST: Submits data to the server side.

There are some other HTTP Request methods as well,

• PUT
• DELETE
• CONNECT
• HEAD
• OPTIONS