آموزش چک کردن نام کاربری با استفاده از Jquery Ajax + Json

[barzin144]

با سلام خدمت دوستان ، همه درگیر این بودیم که در ثبت نام سایتمون جلوی ثبت، نام کاربری های تکراری را بگیریم حالا به لطفا جی کوئری و ایجکسش بدون رفرش شدن صفحه و به محض خارج شدن فوکوس از تکست باکس نام کاربری، میتونیم تکراری بودن نام کاربری را بررسی کنیم.

نمونه انجام شده این آموزش (http://json.somee.com/)

خوب با ظاهر صفحه کاری نداریم پس اول کد قسمت ایجکس و بعد کد سی شارپ سمت سرور را بررسی میکنیم.

با این کد جاوا اسکریپت ما در خاصیت focusout تکست باکس نام کاربری، در صورت پر بودن تکست باکس، ایجکس را صدا میزنیم .



<script type="text/javascript">
$(document).ready(function () {
$('.status').hide();
$('#<%= txtUserName.ClientID %>').focusout(function () {
if ($('#<%= txtUserName.ClientID %>').val() != null && $('#<%= txtUserName.ClientID %>').val() != '') {
$.ajax({
beforeSend: function () {//کارهایی که قبل از شروع ایجکس انجام میشود
//لودینگ را نمایش میدهم
$('.status').attr('src', 'Images/ajax-loader.gif');
$('.status').show();
},
type: "POST",
url: "Default.aspx/UserNameCheck",//نام صفحه و نام متدی که بررسی را انجام میدهد
data: JSON.stringify({ "Name": $('#<%= txtUserName.ClientID %>').val() }),//ورودی های متد را وارد میکنم
contentType: "application/json; charset=utf-8",
dataType: "json",//برای استفاده از فرمت جی سون
success: function (msg) {//جواب متد با فرمت جی سون را در متغییر قرار میدهد
var i = eval("(" + msg.d + ")");
if (i.Result == false) {// مقدار پاسخ متد سی شارپ را بررسی میکتم
$('#<%= txtUserName.ClientID %>').select();
$('.status').attr('src', 'Images/false.png');
$('.status').show();


}
if (i.Result == true) {// مقدار پاسخ متد سی شارپ را بررسی میکتم
$('.status').attr('src', 'Images/true.gif');
$('.status').show();
}
}
});
}
});
});
</script>





حالا متد سی شارپ را بررسی میکنیم.





public class _Result
{
public bool Result { get; set; }
}
[System.Web.Services.WebMethod()]
[System.Web.Script.Services.ScriptMethod(ResponseFo rmat = System.Web.Script.Services.ResponseFormat.Json)]
public static string UserNameCheck(string Name)
{
//*******Check for valid UserName********
DataSet.UsersDataTable oUsersDataTable =
new DataSet.UsersDataTable();


DataSetTableAdapters.UsersTableAdapter oUsersTableAdapter =
new DataSetTableAdapters.UsersTableAdapter();


oUsersTableAdapter.FillUsersByUserName(oUsersDataT able, Name);
_Result e = new _Result();
e.Result = false;
//***********************************
if (oUsersDataTable.Count != 0)
{
e.Result = false;
}
else if (oUsersDataTable.Count == 0)
{
e.Result = true;
}
return new System.Web.Script.Serialization.JavaScriptSerializ er().Serialize(e);


}




در بالای کد یک کلاس تعریف کردم برای برگشت مقدار تابع به صورت json که فقط یه متغییر bool داره برای معتبر بودن نام کاربری .

در ابتدای متد اضافه کردن این دو خط الزامی است اولی برای اینکه بتونیم تابع را از ایجکس صدا بزنیم دومی هم برای خروجی json تابع است.


[System.Web.Services.WebMethod()]
[System.Web.Script.Services.ScriptMethod(ResponseFo rmat = System.Web.Script.Services.ResponseFormat.Json)]


نکته بعدی static بودن تابع هست باید حتما static باشه و خروجیش هم string ،ورودی تابع هم متغییرش باید دقیقا با چیزی که در بخش data ی ایجکس زدید هم نام باشد.
در بخش اول متد نام کاربری را به کوئری میفرستم در صورتی که رکوردی داشت جواب کوئری یعنی همچین نام کاربری وجود دارد ولی در صورتی که رکوردی برنگردوند یعنی نام کاربری وجود ندارد پس ما مقدار bool را با این شروط مقدار دهی میکنیم و در انتها هم پاسخ رو به صورت json برمیگردونیم.