اشتراکها
We're going to use Dapper.NET on our project; that much is not in doubt. However, we're not going to start development with it, and it will not be the only ORM in use. The plan is to develop this project using Entity Framework, and later optimize to use Dapper.NET in certain scenarios where the system needs a performance boost.
DataTables پلاگینی برای کتابخانه jQuery است. این پلاگین امکانات پیشرفته ای برای یک جدول html که حاوی دادهها است اضافه میکند، و همچنین عملیات صفحه بندی، جستجو، مرتب سازی دادهها را در سمت کاربر انجام میدهد.
به طور خلاصه میتوانید امکانات متعدد این پلاگین را در زیر مشاهده کنید:
برای استفاده از این پلاگین ابتدا به اینجا مراجعه کرده و آنرا به همراه مثالهای آن که در یک فایل فشرده هستند را دانلود کنید. بعد از دانلود و خارج کردن فایل دانلودی از حالت فشرده، وارد پوشه examples از آن که بشوید میتوانید مثالهای متعدد در رابطه با این پلاگین را مشاهده نمائید.
مثالهای این پلاگین یکی از بهترین منابع یادگیری آن هستند. در این سری از مقالات هم از روی همین مثالها پیش میرویم. برای این کار، بعد از مراجعه به پوشه examples فایل index.html را باز کنید و مثال اول را (Zero Configuration) کلیک کنید.
نتیجه حاصل از اجرای مثال Zero Configuration چیزی شبیه تصویر زیر است:
تصویر را شماره گزاری کرده ام تا بتوانم راحتتر آنرا برایتان تشریح کنم.
تشریح مثال Zero Configuration :
برای استفاده از این پلاگین، باید ارجاعی به کتابخانه jquery و نیز فایل jquery.dataTables.js وجود داشته باشد. این دو فایل در زیر پوشه media/js قرار گرفته اند.
و همچنین cssهای مربوطه به این پلاگین بدین صورت معرفی شده اند:
در این مثال که سادهترین مثال مربوط به این پلاگین است دادهها به صورت دستی در جدول قرار گرفته اند و روشهای دیگر را به قسمتهای بعد موکول میکنیم. اگر به source این مثال مراجعه کنید (از روی فایل اصلی و نه از طریق مرورگر) مشاهده میکنید که یک جدول html با id برابر با example وجود دارد که حاوی 57 سطر است (در قسمت tbody) که حاوی دادههای جدول هستند. اما با مراجعه به source مثال از طریق مرورگر مشاهده میکنید تعداد این سطرها 10 تا هست و این بدین معنیه که پلاگین فقط تعداد رکوردهای مورد نیاز رو در قسمت tbody قرار میده و از بقیه فاکتور میگیره و هر بار که کاربر به صفحه رو با دکمههای Previous و Next تغییر میده این پلاگین قسمت tbody رو تغییر میده
این نکته هم جا نمونه که برای اعمال شدن پلاگین DataTables به یک جدول که به طور مثال id جدول example هست، به صورت زیر عمل میکنیم:
به طور خلاصه میتوانید امکانات متعدد این پلاگین را در زیر مشاهده کنید:
- صفحه بندی دادهها با تعداد رکوردهای قابل تغییر در هر صفحه (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 چیزی شبیه تصویر زیر است:
تصویر را شماره گزاری کرده ام تا بتوانم راحتتر آنرا برایتان تشریح کنم.
- دادههای درون جدول (10 تای اول) که در قسمت tbody جدول قرار دارند
- قسمت thead جدول
- قسمت tfoot جدول
- اندازه صفحه (page size)
- کادر جستجو که در کلیه ستونهای جدول جستجویی را انجام میدهد و دادهها بر اساس آن فیلتر میشوند.
- قابلیت مرتب سازی رکوردها بر اساس یک ستون خاص به صورت صعودی یا نزولی
- اطلاعات مربوط به رکوردهای جاری و تعداد کل رکوردها
- قابلیت تغییر صفحه با دکمههای 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>
<style type="text/css" title="currentStyle"> @import "../../media/css/demo_page.css"; @import "../../media/css/demo_table.css"; </style>
این نکته هم جا نمونه که برای اعمال شدن پلاگین DataTables به یک جدول که به طور مثال id جدول example هست، به صورت زیر عمل میکنیم:
$(document).ready(function() { $('#example').dataTable(); } );
اشتراکها
فرق بین فقط تست نوشتن و TDD
روش درست کردن دمو برای پروژههای blazor در Github (یا روش توزیع پروژههای Blazor WASM در Github-Pages)
ابتدا فایل yml زیر را در پوشهی github\workflows\deploy.yml. قرار دهید (پوشهای را به این نام، در ریشهی پروژهی خود ایجاد کنید):
در این قالب، چهار مورد را باید ویرایش کنید:
- نام شاخهی اصلی پروژه؛ که یا main است و یا master.
- شماره نگارش دات نت مورد استفاده.
- مسیر فایل csproj پروژهی wasm.
- نام اصلی مخزن کد.
سپس آنرا به مخزن کد خود commit کنید. بعد به قسمت settings->pages در github مراجعه کرده و source را بر روی نام شاخهی جدید github-pages (فوق در قسمت آخر کار) قرار داده و آنرا ذخیره کنید. الان سایت دموی شما در مسیری که در همین قسمت pages پس از ذخیره سازی، نمایش میدهد، آمادهاست.
یک نکتهی مهم
چون base href، توسط action فوق اصلاح میشود تا به پوشهی نسبی محل قرارگیری برنامه اشاره کند، نیاز است navlinkها با href شروع شدهی با / نباشند؛ چون به ریشهی سایت اشاره میکنند و نه مسیر نسبی محل قرارگیری برنامه. کلا در هر قسمتی از برنامه، این نکته باید رعایت شود. مثلا اگر فونت وبی را در فایل app.css تعریف کردهاید، مسیر آن نباید با / شروع شود؛ وگرنه یافت نخواهد شد. یک مثال:
فایل app.css برنامه در مسیر wwwroot\css\app.css قرار دارد و داخل آن فایل، فونتهای پوشهی دیگر wwwroot\lib\samim-font را به صورت زیر تعریف کردهایم؛ که یعنی مسیر فونت را از ریشهی سایت پیدا کن:
این مسیر، باید به مسیر نسبی زیر که به یک پوشهی بالاتر (از محل قرار گیری app.css) اشاره میکند، اصلاح شود:
ابتدا فایل yml زیر را در پوشهی github\workflows\deploy.yml. قرار دهید (پوشهای را به این نام، در ریشهی پروژهی خود ایجاد کنید):
name: Deploy to GitHub Pages # Run workflow on every push to the main branch on: push: branches: [ main ] jobs: deploy-to-github-pages: # use ubuntu-latest image to run steps on runs-on: ubuntu-latest steps: # uses GitHub's checkout action to checkout code form the main branch - uses: actions/checkout@v2 # sets up .NET Core SDK - name: Setup .NET Core SDK uses: actions/setup-dotnet@v1 with: dotnet-version: 5.0.302 # publishes Blazor project to the release-folder - name: Publish .NET Core Project run: dotnet publish ./src/DNTPersianComponents.Blazor.WasmSample/Server/DNTPersianComponents.Blazor.WasmSample.Server.csproj -c Release -o release --nologo # changes the base-tag in index.html from '/' to 'DNTPersianComponents.Blazor' to match GitHub Pages repository subdirectory - name: Change base-tag in index.html from / to DNTPersianComponents.Blazor run: sed -i 's/<base href="\/" \/>/<base href="\/DNTPersianComponents.Blazor\/" \/>/g' release/wwwroot/index.html # copy index.html to 404.html to serve the same file when a file is not found - name: copy index.html to 404.html run: cp release/wwwroot/index.html release/wwwroot/404.html # add .nojekyll file to tell GitHub pages to not treat this as a Jekyll project. (Allow files and folders starting with an underscore) - name: Add .nojekyll file run: touch release/wwwroot/.nojekyll - name: Commit wwwroot to GitHub Pages uses: JamesIves/github-pages-deploy-action@3.7.1 with: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} BRANCH: github-pages FOLDER: release/wwwroot
- نام شاخهی اصلی پروژه؛ که یا main است و یا master.
- شماره نگارش دات نت مورد استفاده.
- مسیر فایل csproj پروژهی wasm.
- نام اصلی مخزن کد.
سپس آنرا به مخزن کد خود commit کنید. بعد به قسمت settings->pages در github مراجعه کرده و source را بر روی نام شاخهی جدید github-pages (فوق در قسمت آخر کار) قرار داده و آنرا ذخیره کنید. الان سایت دموی شما در مسیری که در همین قسمت pages پس از ذخیره سازی، نمایش میدهد، آمادهاست.
یک نکتهی مهم
چون base href، توسط action فوق اصلاح میشود تا به پوشهی نسبی محل قرارگیری برنامه اشاره کند، نیاز است navlinkها با href شروع شدهی با / نباشند؛ چون به ریشهی سایت اشاره میکنند و نه مسیر نسبی محل قرارگیری برنامه. کلا در هر قسمتی از برنامه، این نکته باید رعایت شود. مثلا اگر فونت وبی را در فایل app.css تعریف کردهاید، مسیر آن نباید با / شروع شود؛ وگرنه یافت نخواهد شد. یک مثال:
فایل app.css برنامه در مسیر wwwroot\css\app.css قرار دارد و داخل آن فایل، فونتهای پوشهی دیگر wwwroot\lib\samim-font را به صورت زیر تعریف کردهایم؛ که یعنی مسیر فونت را از ریشهی سایت پیدا کن:
src: url('/lib/samim-font/Samim-Bold.eot?v=4.0.5');
src: url('../lib/samim-font/Samim-Bold.eot?v=4.0.5');
اشتراکها