مطالب
تفاوت AngularJS با KnockoutJS
با پیشرفت HTML 5 و پدید آمدن چارچوب‌های مختلف JavaScript توسعه‌ی نرم افزار‌های تک صفحه ای تحت وب (Single Page Applications) محبوب شده است. 
اخیرا مطالب خوبی در رابطه با AngularJS در وبسایت جاری منتشر شده است. KnockoutJS توسط Microsoft معرفی شد و در قالب پیشفرض پروژه‌های SPA قرار گرفت ، بنابراین احتمالا این سوال برای افرادی مطرح شده است که تفاوت بین KnockoutJS و AngularJS چیست ؟ 
می توان پاسخ داد این مقایسه ممکن نیست. 
KnockoutJS : یک پیاده سازی مستقل JavaScript از الگوی MVVM با امکانات Databinding می‌باشد. Knokcout یک کتابخانه‌ی Databinding است نه یک کتاب خانه‌ی SPA
AngularJS : طبق معرفی در این مطلب AngularJS فریم ورکی متن باز و نوشته شده به زبان جاوا اسکریپت است. هدف از به وجود آمدن این فریم ورک، توسعه هر چه ساده‌تر SPA‌ها با الگوی طراحی MVC و تست پذیری هر چه آسان‌تر آن‌ها است. این فریم ورک توسط یکی از محققان Google در سال 2009 به وجود آمد. بعد‌ها این فریم ورک تحت مجوز MIT به صورت متن باز در آمد و اکنون گوگل آن را حمایت می‌کند و توسط هزاران توسعه دهنده در سرتاسر دنیا، توسعه داده می‌شود. 

بنابراین شاید بهتر باشد ذکر شود AngularJS یک Presentation Framework مخصوص برنامه‌های وب تک صفحه ای می‌باشد در حالی که KnockoutJS کتاب خانه ای با تمرکز بر Databinding می‌باشد ، بنابراین مقایسه‌ی این‌ها چندان صحیح نیست.

اگر قصد بر بررسی گزینه‌های دیگر در کنار Angular باشد ، می‌توان از Durandal نام برد. Durandal یک چارچوب SPA می‌باشد ، این چارچوب بر فراز jQuery ، RequireJS و Knockout توسعه پیدا کرده است. (سابقا برای routing از SammyJS استفاده می‌کرد که در نسخه‌های اخیر از موتور خودش استفاده می‌کند.)

Durandal از Knockout جهت Databinding و از RequireJS برای مدیریت وابستگی‌ها استفاده می‌کند.
Angular همه‌ی امکانات بالا را مستقل پیاده سازی کرده و حتی نیازی به jQuery ندارد. اگر jQuery وجود داشته باشد Angular از آن استفاده می‌کند در غیر این صورت از jQuery Lite یا jqLite استفاده می‌کند. jqLite پیاده سازی توابع متداول jQuery برای دستکاری DOM می‌باشد. اطلاعات بیشتر در اینجا

بنابراین با استفاده تنها از KnockoutJS نمی‌توان یک برنامه‌ی کامل SPA توسعه داد ، در کنار آن نیاز به کتابخانه‌های دیگری مثل jQuery برای مدیریت درخواست‌های  AJAX و استفاده از دیگر API‌ها ، Sammy برای routing و RequireJS برای مدیریت وابستگی‌ها می‌باشد.

در Knockout و در نتیجه Durandal عمل Databinding به این صورت است :
// JavaScript
var vm = {
    firstName = ko.observable('John')
};
ko.applyBindings(vm);
<!-- HTML -->
<input data-bind="value:firstName"/>
در Angular :
// JavaScript
// Inside of a personController
this.firstName = 'John';
در Angular همچنین از یک روش Controller As استفاده می‌شود :
<!-- HTML -->
<div ng-controller="personController as vm">
    <input ng-model="vm.firstName"/>
</div>
اگر تنها نیاز به یک کتابخانه‌ی Databinding باشد ، Knockout گزینه‌ی مناسبی است ، به خوبی از عمل مقید سازی داده‌ها پشتیبانی می‌کند و Syntax خوش دستی دارد اما اگر نیاز به چارچوبی برای توسعه‌ی پروژه‌های SPA می‌باشد می‌توان از Angular یا Durandal استفاده کرد. 
مقایسه‌ی Knockout با Angular همانند مقایسه‌ی موتور بنز با ماشین پورشه می‌باشد. 



مطالب
پَرباد - آموزش پیاده‌سازی پرداخت آنلاین در دات نت - آموزش پایه
در قسمت مقدمه، با پَرباد و ویژگی‌های آن آشنا شدید. در این مقاله قصد داریم آموزش پایه استفاده از آن را آموزش دهیم.

آنچه شما در این مقاله یاد خواهید گرفت:
  • آموزش پرداخت آنلاین
  • درخواست پرداخت
  • تایید پرداخت
  • بازگرداندن مبلغ پرداخت شده

آموزش پرداخت آنلاین

قبل از شروع یادگیری، بهتر است بدانید پرداخت آنلاین چگونه انجام می‌شود. در زیر مراحل یک پرداخت آنلاین استاندارد رو به صورت مرحله‌ای مشاهده می‌کنید:

  1. تمامی اطلاعات لازم مانند مبلغ قابل پرداخت، درگاه بانکی و غیره را جهت پرداخت صورت حساب مورد نظراتان آماده می‌کنید.
  2. درخواست پرداخت را توسط پَرباد انجام می‌دهید.
  3. نتیجه درخواست (مانند کد رهگیری) را از پَرباد دریافت کرده و در پایگاه داده وب سایت خودتان برای فاکتور مورد نظر ذخیره می‌کنید.
  4. پَرباد کاربر راه به درگاه بانکی هدایت می‌کند و کاربر در درگاه بانکی پرداخت را انجام می‌دهد. سپس دوباره به وب سایت شما باز می‌گردد.
  5. عملیات تایید پرداخت را توسط پَرباد انجام می‌دهید.
  6. نتیجه تایید پرداخت (شامل کد رهگیری، کد تراکنش بانکی، مبلغ، نام بانک و غیره) را از پَرباد دریافت می‌کنید و در پایگاه داده خودتان برای فاکتور مورد نظر ذخیره می‌کنید. ( با توجه به کد رهگیری که در مرحله ۳ دریافت و ذخیره کرده بودید)


کلیه عملیات پرداخت در پَرباد، به دو روش قابل استفاده هستند:
  • اینترفیس IOnlinePayment (برای پروژه‌هایی که از تزریق وابستگی‌ها استفاده می‌کنند)
  • کلاس StaticOnlinePayment (برای پروژه‌هایی که از تزریق وابستگی‌ها استفاده نمی‌کنند) 


درخواست پرداخت

var result = await _onlinePayment.RequestAsync(Gateways.[Your Selected Gateway], [Tracking Number], [Amount], [Verify URL]);
  • Gateway، درگاه بانکی مورد نظر جهت پرداخت است.
  • TrackingNumber یک کد رهگیری یکتا جهت شناسایی صورت حساب است. (در مقاله‌ی آموزش پیشرفته ، نحوه ایجاد اتوماتیک این کد را یاد خواهید گرفت)
  • Amount مبلغ مورد نظر (به ریال) جهت پرداخت است.
  • Verify URL یک آدرس در وب سایت شما است. زمانیکه کاربر، پرداخت را در درگاه بانکی انجام داد، به این آدرس جهت تایید پرداخت هدایت خواهد شد.

نمونه کد‌ها

ASP.NET WebForms
using Parbad;

protected void BtnPay_Click(object sender, EventArgs e)
{
    // استفاده به صورت استاتیک و بدون تزریق وابستگی

    var result = StaticOnlinePayment.Instance.Request(Gateways.Mellat, 123, 25000, "http://www.mywebsite.com/foo/bar/");

    if (result.IsSucceed)
    {
        // کاربر را به سمت درگاه بانکی هدایت میکند
        // همچنین بهتر است کد رهگیری که در شئ نتیجه است را، برای فاکتور مورد نظر در پایگاه داده خودتان ذخیره کنید
        result.GatewayTransporter.Transport();
    }
    else
    {
        // درخواست پرداخت موفقیت آمیز نبود
    }
}

ASP.NET MVC
using Parbad.Mvc5;

private readonly IOnlinePayment _onlinePayment;

// تزریق وابستگی به کنترلر
public PaymentController(IOnlinePayment onlinePayment)
{
    _onlinePayment = onlinePayment;
}

public async Task<ActionResult> Pay()
{
    var result = await _onlinePayment.RequestAsync(Gateways.Mellat, 123, 25000, "http://www.mywebsite.com/foo/bar/");

    if (result.IsSucceed)
    {
        // کاربر را به سمت درگاه بانکی هدایت میکند
        // همچنین بهتر است کد رهگیری که در شئ نتیجه است را، برای فاکتور مورد نظر در پایگاه داده خودتان ذخیره کنید
        return result.GatewayTransporter.TransportToGateway();
    }
    else
    {
        // درخواست پرداخت موفقیت آمیز نبود
    }
}

ASP.NET CORE
using Parbad.AspNetCore;

private readonly IOnlinePayment _onlinePayment;

public PaymentController(IOnlinePayment onlinePayment)
{
    _onlinePayment = onlinePayment;
}

public async Task<IActionResult> Pay()
{
    var result = await _onlinePayment.RequestAsync(Gateways.Mellat, 123, 25000, "http://www.mywebsite.com/foo/bar/");

    if (result.IsSucceed)
    {
        // کاربر را به درگاه بانکی هدایت می‌کند
        // همچنین بهتر است کد رهگیری که در شئ نتیجه است را، برای فاکتور مورد نظر در پایگاه داده خودتان ذخیره کنید
        return result.GatewayTransporter.TransportToGateway();
    }
    else
    {
        // do something else
    }
}


شئ result در کد بالا حاوی اطلاعاتی مانند کد رهگیری، مبلغ داده شده، درگاه بانکی انتخاب شده، پیام و غیره است.
نکته: کد رهگیری را در پایگاه داده وب سایت خودتان برای فاکتور مورد نظر ذخیره کنید. این کد پس از عملیات تایید پرداخت (که پایین‌تر توضیح داده شده)، توسط پَرباد به شما داده خواهد شد و شما می‌توانید فاکتور مورد نظر در پایگاه داده خودتان را آپدیت کنید.

تایید پرداخت

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

نمونه کد
public async Task<IActionResult> Verify()
{
    var result = await _onlinePayment.VerifyAsync(invoice =>
    {
        // در این مرحله هنوز درخواست واریز وجه از وب سایت شما به بانک ارسال نشده است
        // بنابراین شما می‌توانید اطلاعات صورتحساب را با پایگاه داده خود چک کنید
        // و در صورت لزوم تراکنش را لغو کنید

        if (!Is_There_Still_Enough_SmartPhone_In_Shop(invoice.TrackingNumber))
        {
            // لغو عملیات پرداخت
            invoice.CancelPayment("We have no more smart phones to sell.");
        }
    });

    if(result.IsSucceed)
    {
        // پرداخت موفقیت آمیز بوده است. کد تراکنش بانکی را در پایگاه داده خود ذخیره کنید
        var transactionCode = result.TransactionCode;
    }
    else
    {
        // پرداخت به دلایلی موفقیت آمیز نبوده.
        // در صورت تمایل می‌توانید پراپرتی پیام در شئ نتیجه را مشاهده کنید و یا به کاربر نمایش دهید
    }
}

نکته ۱: در صورت موفقیت آمیز بودن پرداخت، باید کد تراکنش بانکی (Transaction Code) را طبق دستورالعمل بانک‌ها به کاربر نمایش دهید.
نکته ۲: در صورتیکه قصد لغو عملیات پرداخت را دارید، حتما متد CancelPayment را فراخوانی کنید.
نکته ۳: در صورت فراخوانی متد CancelPayment به منظور لغو پرداخت، اگر مبلغی از حساب مشتری به حساب شما واریز شده باشد، پس از حدود ۱۵ دقیقه تا ۱ روز، به حساب مشتری به صورت خودکار توسط بانک برگشت داده خواهد شد (مدت زمان برگشت مبلغ به حساب مشتری برای هر بانک متفاوت است).
برای مثال: در زمانیکه مشتری در درگاه بانکی در حال پرداخت است، این احتمال وجود دارد که موجودی کالای شما به اتمام رسیده باشد و شما  قصد دارید عملیات پرداخت را لغو کنید. برای این منظور مانند مثال بالا، در درون متد Verify، ابتدا با توجه به شماره رهگیری که پَرباد به شما می‌دهد پایگاه داده‌ی فروشگاه خود را بررسی می‌کنید و در صورت لزوم متد CancelPayment را فراخوانی می‌کنید.


بازگرداندن مبلغ پرداخت شده

در صورتیکه پس از عملیات پرداخت تشخیص می‌دهید که مبلغ پرداخت شده باید دوباره به حساب مشتری برگردانده شود، می‌توانید به روش زیر عمل کنید:
// کد رهگیری صورت حساب مورد نظر
var trackingNumber = 123;

var result = await _onlinePayment.RefundCompletelyAsync(trackingNumber);

نکته: شما فقط و فقط زمانی به استفاده از این متد نیاز دارید که یک پرداخت، با موفقیت انجام شده باشد و مبلغ از حساب مشتری کم شده باشد و همچنین شما قصد بازگشت مبلغ را به حساب مشتری داشته باشید. در غیر اینصورت هیچگونه نیازی به استفاده از این متد نیست. در واقع اگر متد Verify را به شکل صحیح (نمونه مثال بالاتر ذکر شده) استفاده کنید، نیازی به استفاده از این متد ندارید.

نمونه کدها

مقاله‌های مرتبط:
مطالب
فراخوانی یک تابع بعد از اتمام Render در AngularJS
در این مقاله در خصوص موضوعی صحبت خواهم کرد که شاید مشکل اکثر برنامه نویسان باشد؛ مخصوصا در استفاده از پلاگین‌های jQuery در پروژه‌های AngularJS.
مطمئنا برای شما هم پیش آمده که نیاز داشته باشید تابعی را بعد از اتمام Render در AngularJS صدا بزنید یا متوجه اتمام Render بشوید.

سوال اول: چرا این بحث مطرح هست؟
وقتی شما از AngularJS در پروژه‌ای استفاده می‌کنید و سبک کاری شما Model Based یا بهتر بگویم MVVM می‌باشد، عملیات Binding در View، توسط AngularJS انجام می‌شود و AngularJS توسط Watcher‌ها تغییرات را در View اعمال می‌کند.

سوال دو: مشکل کجاست؟
مشکل اینجاست که چه موقعی Binding یا Render تمام می‌شود؟ فرض کنید شما یک لیست دارید و می‌خواهید در View نمایش دهید. مسلما از ng-repeat استفاده می‌کنید و AngularJS از مدلی که مشخص شده است موارد را خوانده و در View نمایش می‌دهد. فرض کنید همه‌ی این موارد باید توسط jQuery UI دارای قابلیت Draggable بشوند. اما چه موقعی تابع مربوطه را صدا بزنیم؟ از کجا مطمئن شویم که element‌های لیست شهر‌ها در View موجود هستند؟ کد زیر را نگاه کنید.
<div class="city" ng-repeat="item in items">
     {{item.title}}
<div>
و در Controller
$scope.items=[
     {title:'اردبیل'},
     {title:'تهران'},
     {title:'تبریز'},
     {title:'مشهد'},
     {title:'اصفهان'}
];
ما فرض می‌کنیم بعد از اینکه شهر‌ها در View به صورت لیست نمایش داده شدند، کاربر باید بتواند شهر‌ها را Drag کند و مکان آنها را با ماوس جابجا کند. برای این کار ما از تابع jQuery UI زیر استفاده می‌کنیم:
$('.city').draggable();

سوال سوم: خوب مشکل کجاست؟
مشکل اینجاست که ما چه موقعی این تابع را صدا بزنیم تا مطمئن شویم که elementهای کلاس city در View موجود هستند و نسبت به تغییر لیست شهر که ممکن هست در طول اجرا این شهر‌ها کم یا زیاد شوند چه موقعی تابع jQuery UI را صدا بزنیم؟

سوال چهارم: راه حل چیست؟
در این چند سالی که من با AngularJS کار می‌کنم، از یک روش خیلی ساده استفاده میکنم و با همین روش از همه‌ی پلاگین‌های غیر AngularJS بدون تبدیل کردن این پلاگین‌ها به معادل AngularJS و یا گشتن چند ساعتی در اینترنت برای پیدا کردن پلاگین مشابه و منطبق با AngularJS که خیلی از مواقع هم پیدا نمی‌شوند، راحت شده‌ام. کد زیر را مشاهده کنید.
app.directive('ngFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$eval(attr.ngFinishRender);
                }, 0);
            }
        }
    }
});
این کد یک Directive جدید را در پروژه‌ی AngularJS شما تعریف می‌کند که توسط AngularJS قابل پردازش هست. این Directive را در View اضافه می‌کنم و کد View بالایی به کد زیر تغییر می‌کند:
<div class="city" ng-repeat="item in items" ng-finish-render="init()">
     {{item.title}}
<div>
اما این Directive چه عملی را انجام می‌دهد؟ این Directive توسط AngularJS پردازش شده و تابع init را که در مقدار ng-finish-render نوشته شده است، بعد از اتمام ng-repeat اجرا می‌کند. خوب تابع init را در controller می‌نویسیم؛ به کد زیر دقت کنید.
$scope.items=[
     {title:'اردبیل'},
     {title:'تهران'},
     {title:'تبریز'},
     {title:'مشهد'},
     {title:'اصفهان'}
];

$scope.init=function(){
     $('.city').draggable();
}
شما به همین راحتی می‌توانید از همه‌ی پلاگین‌های غیر AngularJS استفاده کنید و متوجه اتمام Render در View شوید.
بازخوردهای دوره
بوت استرپ (نگارش 3) چیست؟
سلام؛ من از طریق package سایت nuget بوت استرپ را روی پروژه asp.net نصب کردم وجواب گرفتم ولی روی پروژه asp.net mvc نصب کردم جواب نمی‌دهد. 
نظرات مطالب
آغاز به کار با Twitter Bootstrap در ASP.NET MVC
فایل‌های دیگری را که یاد کردید، جزو بسته‌ی بوت استرپ نیستند. آن‌ها را دستی از یک پروژه‌ی MVC دیگر کپی کنید. از نیوگت هم قابل دریافت هستند: (^ و ^)
نظرات مطالب
آموزش Knockout.Js #1
در این مطلب فقط بوت استرپ نگارش 2 در MVC 5 پیش فرض شده. قبلا ناک آوت در MVC4 بود جزو اسکریپت‌های پیش فرض.
اشتراک‌ها
پلاگینی زیبا برای Leaflet جهت تغییر رنگ و شکل مارکر

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

پلاگینی زیبا برای Leaflet جهت تغییر رنگ و شکل مارکر