در این مقاله قصد داریم شما را با صفات HTML 5، المان ورودی HTML 5 و انتقال اطلاعات ورودی کاربر به سرور با استفاده از فراخوانی Ajax آشنا کنیم.

قبل از مطالعه ی این مقاله لطفا مقاله ی زیر را مطالعه کنید.

استفاده از AJAX , JSIN , JQuery درMVC  (قسمت اول)

در این مقاله قصد داریم شما را با  صفات HTML 5، المان ورودی HTML 5 و انتقال اطلاعات ورودی کاربر به سرور با استفاده از فراخوانی Ajax آشنا کنیم.

صفات HTML 5

_ Autocomplete

معمولا از حالت “autocomplete mode” در form استفاده می شود. با استفاده از این ویژگی تمام انواع inputها زیر تگ form ارائه داده میشود.

با استفاده از autocomplete mode، مرورگر به طور خودکار مقدار inputها را با مقداری که قبلا کاربر وارد کرده است پر می کند.

اگر می خواهید که برای input خاصی، حالت “autocomplete" را off کنید کافی است که برای آن autocomplete="off" را  تنظیم کنید بعد از این کار مرورگر به طورخودکار input موردنظر را پر نخواهد کرد.

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

هنگامی که صفحه وب المان <input> را بارگذاری میکند باید  بطور خودکار روی ان focus کند.

1.	<input type="text" class="form-control" id="user-FirstName" autofocus >  

در یک صفحه وب، تنها باید یک المان input صفت autofocus را داشته باشد.

_ Form

اگر که شما یک یا چند تگ فرم دارید لازم است که آنها را داخل تگ فرم قرار دهید.

_ pattern (regexp)

 با استفاده از صفت pattern شما می توانید مقادیر المان های <input> را به صورت ویژه تنظیم کنید.

1.	<input type="text" class="form-control" name="country_code" pattern="[A-Za-z]{4}" title="Four letter country code" id="user-CountryCode">  

در زیر ما چند pattern(الگو) اضافه کرده ایم.

الف. الگویی برای بررسی ساختار ایمیل می باشد : " [^@]+@[^@]+\.[a-zA-Z]{2,6}"

ب. الگویی برای سه عدد اول در شماره هر کشور " [A-Za-z]{3}”

پ. الگویی تنها برای وارد کردن اعداد دیجیتال : "\d{1,9}"

ت. الگویی برای شماره تلفن Sri Lankan (سری لانکا): "(\+?\d[- .]*){10}"

ث. الگویی برای Strong Password: “(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{10,}”

(استفاده از حداقل ده کاراکتر که حداقل شامل یک عدد، یک حرف کوچک و یک حرف بزرگ باشد.)

_ Placeholder

به بیان ساده صفت placeholder  مقدار داخل فیلد input را پر میکند و تقریبا مانند صفت title عمل میکند ولی از آن بهتر است.

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

این صفت یکی از صفات مهم می باشد. زیرا با استفاده از این صفت اگر کاربر فیلد input مربوطه را پر نکند نمیتواند اطلاعات مربوطه را بفرستد.

این صفت نقش اساسی در قسمت سرور validation required بازی می کند، زیرا  شما میتوانید به جای استفاده از یک کد طولانی JavaScript validation تنها از صفت required برای اعتبار سنجی فیلدهای خود استفاده کنید.

<input type="text" class="form-control" id="user-FirstName" required>

_ Step

صفت Step تنها برای inputهایی از نوع number مورد استفاده قرار میگیرد. با استفاده از این صفت بین دو عدد فضای خالی ایجاد خواهد شد. برای مثال در نمونه کد زیر فاصله بین اعداد 5 تا 5 تا می باشد.

    <input type="number" class="form-control" step="5" id="user-TeamMembers" required>  

_ min and max

این صفت هم برای input های از نوع number مورد استفاده قرار میگیرند.

با استفاده از صفات min و max می توانید مینیمم و ماکزیمم مقدار داخل textbox مشخص را کنید.

1.	<input type="number" class="form-control" min="0" max="20" step="2" id="user-TeamMembers" required>  

انواع المان های HTML5 input

_ Text

_ Number

_ Email

_ Search

_ Date

_ time

_   Date-time

_ Month

_ week

_ Range

_ Tel

_ url

_ Color

_   Data-list

نکته: ویژگی ها در HTML5 هنوز در حال توسعه و تلفیق با مرورگرها می باشد. به همین دلیل شما نمی توانید در همه ی مرورگرها از المان های بالا استفاده کنید بعضی از آن ها در مرورگرها پشتیبانی نمی شوند. بنابراین قبل از برنامه نویسی یک نرم افزار به مشتریان و مخاطبان محصول خود فکر کنید و متناسب با یک مرورگر را برای نرم افزار خود انتخاب کنید.

برای انواع المان های ورودی زیر، مثالی آورده شده است.

_ text: یک input از نوع text ایجاد میکند.

_ Number: یک input از نوع number  ایجاد میکند.

_ Password: یک input از نوع password  ایجاد میکند.

_ Email: یک input از نوع Email address  ایجاد میکند.

نکته:

همه المان های ورودی html باید داخل تگ form قرار بگیرند و المان از نوع button باید submit شود. در غیر این صورت HTML5 validation اجازه فرستادن اطلاعات را نخواهد داد .

شما نیاز دارید که رویداد on click برای دکمه خود بنویسید چرا که اطلاعات ورودی توسط کاربر با فراخوانی Ajax در سمت سرور پردازش می شود.

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

در توابع java script زیر از 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.	}  

اگر همه ی اعتبارسنجی ها ok بود ، تابع UserRequestSubmission(); صدا زده خواهد شد.

تابع UserRequestSubmission() اطلاعات فرستاده شده را سمت سرور مدیریت خواهد کرد.

در تابع UserRequestSubmission() همه ی اطلاعات در یک آرایه قرار می گیرند.

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

آن آرایه به یک متد JSON.stringify() تبدیل میشود.

var json = JSON.stringify(regData);  

نکته: اگر میخواهید تنها یک پارامتر را از سمت client تبدیل کنید نیازی به استفاده از تابع stringify نیست و تنها کد زیر را بنویسید.

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

نکته: با استفاده از متد JSON.stringify() یک مقدار از نوع JavaScript به یک JSON text تجزیه میشود و این JSON text در یک رشته ذخیره میشود. بطور کلی برای دریافت داده از سمت client نیاز است که یک شی از نوع JS به رشته از نوع JSON تبدیل شود.

این رشته از نوع JSON توسط یک AJAX call به سمت client فرستاده میشوند.

بعد از اینکه اطلاعات از سمت client گرفته شدند، می توان پردازش های مورد نیاز را روی آنها انجام داد.

نکته قابل توجه این است که دو نوع  متد اصلی HTTP Request، به نام GET و POST وجود دارد.

 به عبارت ساده :

GET: درخواست اطلاعات از سمت سرور است.

POST: اطلاعات را به سمت سرور میفرستد.

انواع دیگر HTTP Request در زیر آمده است:

_ PUT

_ DELETE

_ CONNECT

_ HEAD

_ OPTIONS

آموزش asp.net mvc