آموزش استفاده از قالب TehranITCoreDash

برای استفاده از قالب پنل ادمین TehranITCoreDash ابتدا باید محتویات پوشه Layout-AspNetCore را در روت پروژه ASP.NET Core خود کپی کنید. این قالب به عنوان یک ساختار آماده برای پنل مدیریت طراحی شده و شامل Layout، Partial View ها، فایل‌های CSS، JavaScript، کتابخانه‌ها و بخش‌های آماده رابط کاربری است.

قبل از شروع کار، پکیج زیر را از طریق NuGet Package Manager نصب کنید، چون قالب از Scaffold Templates پشتیبانی می‌کند:

Microsoft.VisualStudio.Web.CodeGeneration.Design

مراحل راه‌اندازی قالب TehranITCoreDash

کپی فایل‌های قالب : محتویات پوشه زیر را داخل روت پروژه خود قرار دهید. بعد از کپی فایل‌ها، مسیرهای Layout، Partial View ها، فایل‌های استایل و اسکریپت‌ها در پروژه قابل استفاده می‌شوند.

Layout-AspNetCore

استفاده از Layout اصلی پنل : برای صفحات مدیریتی، Layout اصلی قالب را به View موردنظر نسبت دهید. این Layout برای صفحاتی مثل داشبورد، لیست‌ها، فرم‌ها، مدیریت کاربران، مدیریت محصولات و سایر صفحات پنل ادمین استفاده می‌شود.

@{
    Layout = "_TehranITContent";
}

استفاده از صفحه Home Page : برای صفحه اصلی داشبورد، Layout مربوط به Home Page را به View خود نسبت دهید و سپس Partial View های آماده را فراخوانی کنید. این بخش‌ها برای نمایش باکس‌های آماری، خلاصه اطلاعات و بخش‌های اولیه داشبورد استفاده می‌شوند.

@{
    Layout = "_TehranITHomePage";
}

<partial name="Partials/HomePage/_Box1PartialView" />
<partial name="Partials/HomePage/_Box2PartialView" />
<partial name="Partials/HomePage/_Box3PartialView" />
<partial name="Partials/HomePage/_Box4PartialView" />

استفاده از صفحه Login : برای ساخت صفحه ورود، Layout مخصوص Login را به View خود نسبت دهید و فرم ورود را با Partial View آماده فراخوانی کنید. بخش SocialLogin برای نمایش ورود با شبکه‌های اجتماعی یا دکمه‌های ورود جانبی در صفحه Login استفاده می‌شود.

@{
    Layout = "_TehranITLogin";
}

<partial name="Partials/Login/_LoginFormPartialView" />

@section SocialLogin {
    <partial name="Partials/Login/_SocialPartialView" />
}

مدیریت منوهای سایدبار

برای تغییر یا اضافه کردن منوهای سایدبار، فایل زیر را ویرایش کنید:

Shared/Partials/_SidebarPartialView.cshtml

منو همراه با زیرمنو

<li class="sub-menu">
    <a href="javascript:void(0);">
        <i class="bi bi-blockquote-right"></i>
        <span>عنوان منو</span>
        <i class="bi bi-chevron-down sub-menu-icon"></i>
    </a>
    <ul>
        <li>
            <a href="#">
                <span>ساب منو</span>
            </a>
        </li>
    </ul>
</li>

منوی ساده بدون زیرمنو

<li>
    <a href="#">
        <i class="bi bi-blockquote-right"></i>
        <span>عنوان منو</span>
    </a>
</li>

در پروژه واقعی، مقدار href=”#” را می‌توانید با مسیر Controller و Action یا مسیر صفحه موردنظر جایگزین کنید.

چیدمان صفحات

برای ساخت صفحات داخلی پنل، قالب از ساختار row و col بوت‌استرپ استفاده می‌کند. کلاس اصلی برای باکس‌بندی صفحات:

<div class="row tehranit-box"></div>

اگر صفحه شما فرم دارد، می‌توانید به جای div از form استفاده کنید:

<form action="" method="post" class="row tehranit-box">
</form>

چیدمان تک‌ستونه

<div class="row tehranit-box">
    <div class="col-12">
        <!-- Items -->
    </div>
</div>

چیدمان چندستونه

<div class="row tehranit-box">
    <div class="col-8">
        <!-- Main Content -->
    </div>

    <div class="col-4">
        <!-- Side Content -->
    </div>
</div>

باکس محتوا

<div class="content-box">
    <!-- Content -->
</div>

عنوان باکس

<div class="title-box">
    <span>عنوان تایتل باکس</span>
    <i class="bi bi-send-arrow-up"></i>
</div>

استفاده از TinyMCE فارسی

برای اضافه کردن ویرایشگر متن فارسی، ابتدا در View یک textarea قرار دهید:

<div class="col-12 mb-3">
    <textarea id="tiny"></textarea>
</div>

سپس فایل JavaScript مربوط به TinyMCE را اضافه کنید:

<script src="assets/lib/tinymce/js/tinymce/tinymce.min.js"></script>
<script>
    jQuery('body').bind('classChanged', function () {
        tinymce.remove();
        MyTiny();
    });

    MyTiny();
</script>

TinyMCE برای ساخت فیلدهایی مثل توضیحات محصول، متن مقاله، محتوای صفحه و توضیحات بلند استفاده می‌شود.

استفاده از دیت پیکر فارسی

برای تاریخ شمسی، قالب از JalaliDatePicker استفاده می‌کند. این بخش برای فرم‌هایی مثل تاریخ انتشار، تاریخ تولد، تاریخ شروع، تاریخ پایان و فیلترهای زمانی کاربرد دارد.

کد View

<div class="col-12 col-md-6 mb-3">
    <label for="DatePicker-1" class="form-label">دیت پیکر ساده</label>
    <input type="text" class="form-control MyDatePicker" id="DatePicker-1" name="DatePicker-1" data-jdp data-jdp-only-date>
</div>

فایل CSS

<link href="assets/lib/JalaliDatePicker-main/dist/jalalidatepicker.min.css" rel="stylesheet" />

فایل JavaScript

<script src="assets/lib/JalaliDatePicker-main/dist/jalalidatepicker.min.js"></script>
<script>
    jalaliDatepicker.startWatch({
        minDate: "attr",
        maxDate: "attr",
        minTime: "attr",
        maxTime: "attr",
        time: true
    });
</script>

استفاده از TagsInput

برای دریافت برچسب‌ها، کلمات کلیدی یا دسته‌بندی‌های متنی، می‌توانید از TagsInput استفاده کنید.

کد View

<div class="col-12 mb-3">
    <label for="input-example" class="form-label">بــرچسب ها</label>
    <input class="form-control" id="input-example" name="input-example" value="جی کوئری, جاوا">
</div>

فایل CSS

<link href="assets/lib/TagsInput/dist/tagify.css" rel="stylesheet" />

فایل JavaScript

<script src="assets/lib/TagsInput/dist/tagify.js"></script>
<script src="assets/lib/TagsInput/dist/tagify.polyfills.min.js"></script>
<script>
    var input = document.querySelector('input[name=input-example]');
    new Tagify(input, {
        placeholder: 'برچسب ...',
        trim: true
    });
</script>

صفحه خطا و نمایش پیام‌ها

قالب دارای ساختار صفحه خطا و نمایش پاسخ است. برای نمونه می‌توانید از یک ViewModel برای نمایش وضعیت عملیات استفاده کنید. این بخش برای نمایش پیام‌های خطا، موفقیت، عدم دسترسی یا خطاهای سمت سرور کاربرد دارد.

public IActionResult Index()
{
    var Response = new ResponseViewModel
    {
        IsSuccess = false,
        Message = "یک مشکل از سمت سرور روی داده است.",
        StatusCode = 500,
    };

    return View("Response", Response);
}

نکته پایانی

TehranITCoreDash یک قالب آماده برای شروع سریع پروژه‌های ASP.NET Core است و کاربر می‌تواند آن را بدون نیاز به دیتابیس یا منطق تجاری خاص داخل پروژه خود قرار دهد. بعد از نصب قالب، امکان شخصی‌سازی منوها، صفحه ورود، داشبورد، فرم‌ها، باکس‌های محتوا، ویرایشگر متن، تاریخ شمسی و برچسب‌ها وجود دارد.