امین گل محله امین گل محله
مطالب
دریافت خروجی Curl از HttpClient در دات‌نت (NET.)
در این مقاله قصد دارم راجع‌به یک Extension در دات نت صحبت کنم که خیلی وقت‌ها می‌تواند بسیار مفید و نجات بخش و همینطور در زمان کارتان تاثیر زیادی بگذارد. خیلی وقت‌ها پیش آمده که داریم با یک سرویس بیرونی ارتباط برقرار میکنیم، اما هنگام فراخوانی کردن، با خطا مواجه می‌شویم و ما متوجه دلیل خطای رخ داده در آن لحظه نمی‌شویم. برای خود من بار‌ها پیش آمده که Property‌های اطلاعات ورودی برای وب سرویس را بصورت Pascal Case داده باشم، ولی سرویس بیرونی فقط بصورت Camel Case برای آن قابل قبول بوده‌است و من بعد از ساعت‌ها بررسی متوجه این موضوع می‌شدم و یا ممکن بود یک Property با مقدار نادرست ارسال می‌کردم و یا ممکن بود یک Property را اصلا ارسال نمی‌کردم و یا حتی اینکه یک Header را درست نمی‌فرستادم و کلی از این موضوعات که با آن‌ها برخورد کردیم و با صرف زمان، مشکل را حل کردیم. این Extension کار ما را برای حل این مسائل خیلی راحت می‌کند.

حالا چطور و چگونه ازش استفاده کنیم؟!

این Extension کارش این است، وقتی HttpClient ما مقدار دهی شده و آماده‌ی برای ارسال درخواست به سرویس بیرونی است، می‌توانیم قبل ارسال، آن را فراخوانی کنیم و یک خروجی Curl از درخواستی را که داریم می‌فرستیم، ببینیم. سپس خروجی Curl را در ترمینال صدا بزنیم و نتیجه را ببینیم. همینطور می‌توانیم به Postman خود Import کنیم و با داکیومنتی که داده شده، بررسی کنیم و مشکل را دقیق‌تر بررسی کنیم.

نحوه Import کردن Curl در Postman 
 open the Postman -> click on the Import button -> 
select the Raw text tab -> paste the curl script here -> 
then press the Continue button -> at the end press the button import.
جای دیگری که نقش این Extension می‌تواند تاثیر گذار باشد، زمانی است که ما از نحوه‌ی فراخوانی سرویس‌های بیرونی خود که در سیستم نوشته شده، هیچ داکیومنت یا Postman Collection ای نداریم. ما با این Extension با خروجی Curl که در اختیارمان می‌گذارد، می‌توانیم Collection خود را ایجاد کنیم و در اختیار هم تیمی‌های خود قرار دهیم. می‌بینید که چقدر کارها را ساده و راحت می‌کند!

استفاده از این Extension بسیار ساده و سریع است و شما با نوشتن یک خط می‌توانید آن را فراخوانی کنید: 
آدرس Nuget Package


این Extension سه(۳) راه برای نمایش Curl دارد:

۱- چاپ در Console 
httpClient.GenerateCurlInConsole(httpRequestMessage, null);
پارامتر دوم، کانفیگ هست که شما می‌توانید بنا به نیاز، آنها را تغییر دهید (پیش فرض آن null است). مثال و توضیحات کانفیگ به شرح زیر است:
httpClient.GenerateCurlInConsole(
   httpRequestMessage,
   configs =>
   {
     configs.TurnOn = true;
     configs.NeedAddDefaultHeaders = true;
     configs.EnableCodeBeautification = false;
   });
- مقدارTurnOn پیش فرض فعال است؛ درصورت غیرفعال کردن جنریتور، غیر فعال می‌شود و عمل ایجاد اسکریپت را انجام نمی‌دهد.
- با مقدارNeedAddDefaultHeaders می‌توانید مشخص کنید در صورت داشتن هدر‌های پیش فرض، در خروجی Curl اضافه شود یا خیر. پیش فرض آن فعال هست.
- مقدارEnableCodeBeautification اگر فعال باشد اسکریپت‌های چاپ شده در Console را به ازای هر HttpMethod، با رنگ متفاوتی نشان می‌دهد؛ برای خوانایی بهتر اسکریپت. بصورت پیش فرض غیر فعال است.

۲- ذخیره در فایل 

httpClient.GenerateCurlInFile(httpRequestMessage, null);
پارامتر دوم کانفیگ هست که شما می‌توانید بنا به نیاز، آنها را تغییر دهید (پیش فرض آن null است).
مثال و توضیحات کانفیگ به شرح زیر است:
httpClient.GenerateCurlInFile(
   httpRequestMessage,
   configs =>
   {
    configs.Filename = "your filename";
    configs.Path = "your path";
    configs.TurnOn = true;
    configs.NeedAddDefaultHeaders = true;
   });
- مقدارFilename را اگر وارد کنید، می‌توانید نام فایلی را که ایجاد می‌شود، مشخص کنید. در صورت مقدار ندادن، پیش فرض تاریخ روز جاری را اعمال میکند. مثال: 20220910.curl
- مقدارPath را می‌توانید در صورت داشتن مسیری خاص، مشخص کنید. در غیر این صورت بصورت پیش فرض اطلاعات را در مسیر ProjectDirectory\bin\Debug\netX ذخیره می‌کند.
- مقدارTurnOn پیش فرض آن فعال است. درصورت غیرفعال کردن جنریتور غیر فعال می‌شود و عمل ایجاد اسکریپت را انجام نمی‌دهد.
- با مقدار NeedAddDefaultHeaders می‌توانید مشخص کنید در صورت داشتن هدر‌های پیش فرض، در خروجی Curl اضافه شود یا خیر. پیش فرض آن فعال هست.

۳- ذخیره در متغیر 

httpClient.GenerateCurlInString(httpRequestMessage);

لینک آدرس GitHub پروژه جهت دیدن سورس پروژه و دیدن مثال‌های بیشتر و همینطور برای دیدن قابلیت‌های بیشتر این extension.

خوشحال می‌شوم اگه نظری دارید راجع به پروژه و یا مشکلی دیدید در سورس کد به من اطلاع بدهید و خیلی خوشحال می‌شوم اگر در تکمیل و پیاده سازی این پروژه مشارکت کنید و اگر این پروژه براتون جذاب و یا مفید بود استار بدهید.

‫۱ سال قبل، یکشنبه ۲۳ مهر ۱۴۰۲، ساعت ۱۵:۴۰
پژمان پارسائی پژمان پارسائی
مطالب
پلاگین DataTables کتابخانه jQuery - قسمت اول
DataTables پلاگینی برای کتابخانه jQuery است. این پلاگین امکانات پیشرفته ای برای یک جدول html که حاوی داده‌ها است اضافه می‌کند، و همچنین عملیات صفحه بندی، جستجو، مرتب سازی داده‌ها را در سمت کاربر انجام می‌دهد.

به طور خلاصه می‌توانید امکانات متعدد این پلاگین را در زیر مشاهده کنید:
  • صفحه بندی داده‌ها با تعداد رکوردهای قابل تغییر در هر صفحه (variable length pagination)
  • فیلتر کردن داده‌های بایند شده به جدول (on-the-fly filtering)
  • مرتب سازی داده‌ها بر اساس ستون‌های مختلف با قابلیت تشخیص نوع داده ستون (Multi-column sorting with data type detection)
  • تغییر اندازه ستون‌ها به صورت هوشمند (Smart handling of column widths)
  • نمایش داده‌ها در جدول از اکثر data source‌ها (DOM، یک آرایه جاوا اسکریپتی، یک فایل، یا با استفاده از پردازش سمت سروری (سی شارپ، php و غیره) )
  • قابلیت جهانی شدن یا منطبق شدن با زبان‌های مختلف دنیا (Fully Internationalisable)
  • قابلیت تعویض theme آن با استفاده از jQuery UI ThemeRoller
  • وجود داشتن 2900 آزمون واحد برای آن (backed by a suite of 2900 unit test)
  • وجود داشتن پلاگین‌های متعدد برای آن
  • و رایگان بودن آن
در این مقاله شما را به طور مقدماتی با این پلاگین آشنا خواهم کرد.
برای استفاده از این پلاگین ابتدا به اینجا مراجعه کرده و آنرا به همراه مثالهای آن که در یک فایل فشرده هستند را دانلود کنید. بعد از دانلود و خارج کردن فایل دانلودی از حالت فشرده، وارد پوشه examples از آن که بشوید می‌توانید مثالهای متعدد در رابطه با این پلاگین را مشاهده نمائید.

  مثال‌های این پلاگین یکی از بهترین منابع یادگیری آن هستند. در این سری از مقالات هم از روی همین مثالها پیش میرویم. برای این کار، بعد از مراجعه به پوشه examples فایل index.html را باز کنید و مثال اول را (Zero Configuration) کلیک کنید.
 

نتیجه حاصل از اجرای مثال Zero Configuration چیزی شبیه تصویر زیر است: 
تصویر را شماره گزاری کرده ام تا بتوانم راحت‌تر آنرا برایتان تشریح کنم.
  1. داده‌های درون جدول (10 تای اول) که در قسمت tbody جدول قرار دارند
  2. قسمت thead جدول
  3. قسمت tfoot جدول
  4. اندازه صفحه (page size)
  5. کادر جستجو که در کلیه ستون‌های جدول جستجویی را انجام می‌دهد و داده‌ها بر اساس آن فیلتر می‌شوند.
  6. قابلیت مرتب سازی رکوردها بر اساس یک ستون خاص به صورت صعودی یا نزولی
  7. اطلاعات مربوط به رکوردهای جاری و تعداد کل رکوردها
  8. قابلیت تغییر صفحه با دکمه‌های previous و next

تشریح مثال Zero Configuration :

برای استفاده از این پلاگین، باید ارجاعی به کتابخانه jquery و نیز فایل jquery.dataTables.js  وجود داشته باشد. این دو فایل در زیر پوشه media/js قرار گرفته اند. 
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
و همچنین css‌های مربوطه به این پلاگین بدین صورت معرفی شده اند:
<style type="text/css" title="currentStyle">
    @import "../../media/css/demo_page.css";
    @import "../../media/css/demo_table.css";
</style>
در این مثال که ساده‌ترین مثال مربوط به این پلاگین است داده‌ها به صورت دستی در جدول قرار گرفته اند و روش‌های دیگر را به قسمت‌های بعد موکول می‌کنیم. اگر به source این مثال مراجعه کنید (از روی فایل اصلی و نه از طریق مرورگر) مشاهده می‌کنید که یک جدول html با id برابر با example وجود دارد که حاوی 57 سطر است (در قسمت tbody) که حاوی داده‌های جدول هستند. اما با مراجعه به source مثال از طریق مرورگر مشاهده می‌کنید تعداد این سطرها 10 تا هست و این بدین معنیه که پلاگین فقط تعداد رکوردهای مورد نیاز رو در قسمت tbody قرار می‌ده و از بقیه فاکتور می‌گیره و هر بار که کاربر به صفحه رو با دکمه‌های Previous و Next تغییر می‌ده این پلاگین قسمت tbody رو تغییر میده

این نکته هم جا نمونه که برای اعمال شدن پلاگین DataTables به یک جدول که به طور مثال id جدول example هست، به صورت زیر عمل می‌کنیم:
$(document).ready(function() {
    $('#example').dataTable();
} );


‫۱۱ سال و ۸ ماه قبل، سه‌شنبه ۲۹ اسفند ۱۳۹۱، ساعت ۱۵:۳۰
وحید نصیری وحید نصیری
نظرات مطالب
Blazor 5x - قسمت یازدهم - مبانی Blazor - بخش 8 - کار با جاوا اسکریپت
امکان تبدیل رخدادهای توکار مرورگرها به دایرکتیوهای Blazor در Blazor6x

یکسری دایرکتیو مانند onclick@ و امثال آن، از پیش در Blazor تعریف شده‌اند که امکان مدیریت رویدادهای جاوااسکریپتی را در کدهای سی‌شارپ میسر می‌کنند. اما تعداد این‌ها زیاد نیست. برای مثال تعداد رویدادهای قابل تعریف و پشتیبانی شده‌ی توسط مرورگرها قابل ملاحظه‌است. در Blazor 6x روشی جهت دسترسی ساده‌تر به این رویدادها ارائه شده‌است که شامل این مراحل است. برای نمونه فرض کنید می‌خواهیم به رویداد paste مرورگر دسترسی پیدا کنیم و یک دایرکتیو سفارشی oncustompaste@ را برای آن تهیه کنیم:
<input @oncustompaste="HandleCustomPaste" />
برای اینکار در ابتدا قطعه کد زیر را پس از blazor.webassembly.js در فایل index.html ثبت می‌کنیم (یا می‌توان از روش export function afterStarted که در بالا عنوان شد هم استفاده کرد):
<script> 
    Blazor.registerCustomEventType('custompaste', { 
        browserEventName: 'paste', 
        createEventArgs: event => { 
            // This example only deals with pasting text, but you could use arbitrary JavaScript APIs 
            // to deal with users pasting other types of data, such as images 
            return { 
                eventTimestamp: new Date(), 
                pastedData: event.clipboardData.getData('text') 
            }; 
        } 
    }); 
</script>
در اینجا برای رویداد paste مرورگر، تعدادی آرگومان تهیه شده و بازگشت داده می‌شود. آرگومان اول در اینجا یک مقدار اختیاری و نمایشی‌است و آرگومان دوم به شیء رویداد paste، دسترسی یافته و متن آن‌را بازگشت می‌دهد.
پس از اینکار، معادل دو پارامتر بازگشت داده شده را به صورت زیر در کدهای سی‌شارپ تهیه می‌کنیم:
namespace BlazorCustomEventArgs.CustomEvents 
{ 
    [EventHandler("oncustompaste", typeof(CustomPasteEventArgs), enableStopPropagation: true, enablePreventDefault: true)] 
    public static class EventHandlers 
    { 
        // This static class doesn't need to contain any members. It's just a place where we can put 
        // [EventHandler] attributes to configure event types on the Razor compiler. This affects the 
        // compiler output as well as code completions in the editor. 
    } 
 
    public class CustomPasteEventArgs : EventArgs 
    { 
        // Data for these properties will be supplied by custom JavaScript logic 
        public DateTime EventTimestamp { get; set; } 
        public string PastedData { get; set; } 
    } 
}
ابتدا از EventArgs ارث‌بری شده و معادل تاریخ و متن بازگشت داده شده، تبدیل به یک EventArgs سفارشی می‌شود. سپس نوع آن، به ویژگی EventHandler ای که بالای یک کلاس استاتیک خالی قرار گرفته شده، ارسال می‌شود. اینکار صرفا جهت اطلاع کامپایلر صورت می‌گیرد.
یک نکته: در اینجا نام oncustompaste به همان نام custompaste کدهای جاوااسکریپتی اشاره می‌کند. نام تعریف شده‌ی در قسمت سی‌شارپ، یک on در ابتدا اضافه‌تر دارد. اینکار سبب می‌شود که اکنون بتوان یک رویدادگردان oncustompaste@ سفارشی را که قابل مدیریت در کدهای سی‌شارپ است، داشت: 
@page "/"

<p>Try pasting into the following text box:</p>
<input @oncustompaste="HandleCustomPaste" />
<p>@message</p>

@code {
    string message;
    void HandleCustomPaste(CustomPasteEventArgs eventArgs)
    {
        message = $"At {eventArgs.EventTimestamp.ToShortTimeString()}, you pasted: {eventArgs.PastedData}";
    }
}
‫۲ سال و ۱۰ ماه قبل، شنبه ۲۲ آبان ۱۴۰۰، ساعت ۲۳:۱۳
وحید نصیری وحید نصیری
نظرات مطالب
اندکی به روز رسانی
وبلاگ‌های انگلیسی این‌ها هستند:
https://www.dntips.ir/2010/04/link-blog.html
‫۱۳ سال و ۷ ماه قبل، یکشنبه ۱۴ فروردین ۱۳۹۰، ساعت ۰۳:۱۲
وحید نصیری وحید نصیری
نظرات مطالب
خواندنی‌های 28 اردیبهشت
سلام،
- بله. این لیست هر جمعه بر اساس یافته‌های جدید من به روز می‌شود.
- بله:
https://www.dntips.ir/2009/03/it.html
‫۱۵ سال و ۶ ماه قبل، سه‌شنبه ۲۹ اردیبهشت ۱۳۸۸، ساعت ۱۴:۵۲