در این مقاله با هم به سراغ تبدیل واحد ارزی به صورت به روز شده و با استفاده از jQueryAjax و Web Service در ASP.Net خواهیم رفت. به همراه توضیحات کامل و مرتب تصاویر آنها نیز قرار داده شده است. پس با من همراه باشید …
تبدیل واحد ارزی
گوگل و یاهو API های زیادی برای استفاده در اپلیکیشن ها فراهم می کنند. در اینجا یک مبدل فرمت واحد ارزی را به شما نشان خواهیم داد.
برای این مقاله ما یک فرم وب اپلیکیشن از scratch ساخته ایم که اطلاعات را از گوگل و یاهو می گیرد و در رابط کاربری با استفاده از jQuery Ajax و Web service نمایش می دهد.
در این قسمت قدم به قدم به شما توضیح می دهیم.
زمینه
گوگل از API های مخفی خود برای نمایش فرمت واحد ارزی به روز در موتور جستجوی خود استفاده می کند. دلیل مخفی بودن آن، این است که API با یک فایل سند رسمی نیامده است.
API مبدل فرمت واحد های ارزی یاهو یک فایل .csv به همراه نرخ تبدیل ارز را به شما می دهد.
استفاده از کد
اجزا اصلی این پروژه ASPX، CSS، jQuery و Web service می باشند.
HTML/ASPX
UI شامل کنترل کمی می باشد. دو dropdowns، یک text box و یک دکمه، که نتیجه آن در یک جدول <td> نمایش داده می شود.
در اینجا از Textbox برای گرفتن میزانی که نیاز است از فرمت واقعی به فرمت دلخواه تبدیل شود استفاده می شود و دو drop downs به صورت آزمایشی با کد ارز و نام کشور پر می شوند. زمانی که روی تبدیل کلیک کنید یک متد jQuery Ajax که webmethod است، فرا می خواند.
CSS
این را فقط برای فهم بهتر و آشنایی بیشتر با UI ایجاد کرده ایم.
.main
{
font-family: tahoma;
font-size: 12px;
border: solid 1px #03325C;
border-collapse: collapse;
color: #094D23;
width: 400px;
}
.main th
{
border-color: #03325C #03325C #03325C #03325C;
border-style: solid solid solid solid;
border-width: 1px 1px 1px 1px;
color: #EDF7FF;
padding: 4px 5px 4px 10px;
vertical-align: bottom;
text-align: center;
background-color: #0E3252;
}
.result
{
border-color: #989898 #989898 #989898 #989898;
border-style: solid solid solid solid;
border-width: 1px 1px 1px 1px;
color: #1A0229;
padding: 4px 5px 4px 10px;
vertical-align: bottom;
text-align: left;
background-color: #C7CCD1;
font-weight:bold;
}
.center
{
text-align: center;
}
.controls
{
font-family: tahoma;
font-size: 12px;
color: #032610;
}
JQuery
در اینجا کد jQuery را توضیح می دهیم که web serviceیی را فرا می خواند که نرخ را از API گوگل و یاهو باز می گرداند.
$(document).ready(function () {
$('#submit').click(function () {
var errormsg = "";
var amount = $('#txtAmount').val();
var from = $('#drpFrom').val();
var to = $('#drpTo').val();
$.ajax({ type: "POST",
url: "WebService.asmx/ConvertGOOG",
data: "{amount:" + amount + ",fromCurrency:'" + from + "',toCurrency:'" + to + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function () {
$('#results').html("Converting...");
},
success: function (data) {
$('#results').html(amount + ' ' + from + '=' + data.d.toFixed(2) + ' ' + to);
},
error: function (jqXHR, exception) {
if (jqXHR.status === 0) {
errormsg = 'Not connect.\n Verify Network.'; ;
} else if (jqXHR.status == 404) {
errormsg = 'Requested page not found. [404]'; ;
} else if (jqXHR.status == 500) {
errormsg = 'Internal Server Error [500].'; ;
} else if (exception === 'parsererror') {
errormsg = 'Requested JSON parse failed.'; ;
} else if (exception === 'timeout') {
errormsg = 'Time out error.'; ;
} else if (exception === 'abort') {
errormsg = 'Ajax request aborted.'; ;
} else {
errormsg = 'Uncaught Error.';
}
$('#results').html(errormsg);
$('<a href="#" >Click here for more details</a>').click(function () {
alert(jqXHR.responseText);
}).appendTo('#results');
}
});
});
});
در کد بالا رخداد click() با دکمه submit ( ارسال) گره خورده است و قابلیت jQuery val() برای بازیابی مقادیر کنترل استفاده می شود، که به وب سرویس می رود. با استفاده از $.ajax یک jQuery Ajax را مجبور به فراخوانی وب سرویس .NET می کنیم. در اینجا قبل از شروع فراخوانیِ ajax مقادیر نتیجه را با استفاده از تنظیمات beforeSend و $.ajax، به عنوان “Converting…” مشخص می کنیم. اگر فراخوانی موفقیت آمیز باشد در این صورت نرخ ارز در جدول نتیجه نمایش داده می شود و درغیر این صورت یک خطا دریافت می کنید.
هم چنین می توانید متد وب گوگل را با تنظیم کردن url به صورت زیر فرا خوانید.
url: “WebService.asmx/ConvertGOOG”,
Yahoo
هم چنین نیز می توانید متد وب یاهو را با تنظیم کردن url به روش زیر فرا خوانید.
url: “WebService.asmx/ConvertYHOO”,
زمانی که element و ID “submit” (دکمه تبدیل) کلیک شود سپس این متد اجرا می شود. با استفاده از قابلیت val() jQuery مقادیر کنترل html در یک متغیر ذخیره می شوند و آن متغیر به متد وب سرویس می رود. jQuery Ajax را با $.ajax احضار می کنید، نام وب سرویس و متد در تنظیمات url jQuery.ajax() ذکر می شوند. پس زمانی که کلیک کنید جدول نتیجه “Converting…” را نمایش می دهد. اگر احضار موفقیت آمیز باشد در این صورت خروجی مورد انتظار در نتیجه <td> نمایش داده می شود در غیر این صورت یک خطا و توضیح نمایش می دهد و یک لینک که دلیل خطا را با جزئیات نشان داده است.
تنظیمات خطا یا jQuery Ajax call
از این بلوک برای گرفتن پاسخ jQuery Ajax به وب متد استفاده می شود. این کد توضیحات خطا را تنظیم می کند و یک لینک برای جزئیات خطا اضافه می کند، شما می توانید خروجی آن را مشاهده نمایید.
error: function (jqXHR, exception) {
if (jqXHR.status === 0) {
errormsg = 'Not connect.\n Verify Network.'; ;
} else if (jqXHR.status == 404) {
errormsg = 'Requested page not found. [404]'; ;
} else if (jqXHR.status == 500) {
errormsg = 'Internal Server Error [500].'; ;
} else if (exception === 'parsererror') {
errormsg = 'Requested JSON parse failed.'; ;
} else if (exception === 'timeout') {
errormsg = 'Time out error.'; ;
} else if (exception === 'abort') {
errormsg = 'Ajax request aborted.'; ;
} else {
errormsg = 'Uncaught Error.';
}
$('#results').html(errormsg);
$('<a href="#" >Click here for more details</a>').click(function () {
alert(jqXHR.responseText);
}).appendTo('#results');
}
وب سرویس
در اینجا متد تبدیل سه پارامتر ورودی دریافت و قبول می کند. این پارامترها: مقدار، از فرمت و به فرمت می باشند.
گوگل
از وب متد ConvertGOOG برای پاسخگویی به فراخوانی Google API برای ارائه نزخ ارز استفاده می شود. پاسخ دریافت شده تجزیه می شود و فقط قسمت نرخ باز می گردد.
یاهو
از وب متد ConvertYHOO برای پاسخگویی به فراخوانی Yahoo API برای ارائه نرخ ارز استفاده می شود. پاسخ دریافتی تجزیه می شود و فقط قسمت نرخ باز می گردد.
فرمت مورد انتظار نرخ یک عدد اعشاری مناسب می باشد.
موفق باشید !
هیچ دیدگاهی نوشته نشده است.