آموزش کار با قالب TehranITCoreDash در asp.net core

با آموزش کار با قالب TehranITCoreDash در asp.net core با ما همراه باشید. در این آموزش درباره قالب TehranITCoreDash که یک قالب برای پنل مدیریتی پروژه های Asp.Net Core هستند صحبت میکنیم. برسی میکنیم چگونه میتوان قالب را به پروژه ها اضافه کرد. و چگونه میتوان از ان استفاده کرد. مواردی که در این آموزش مورد برسی قرار میدهیم شامل : پیش نیاز های قالب TehranITCoreDash، منو های سایدبار، صفحه Login، ویرایشگر TinyMCE فارسی، دیت پیکر فارسی و موارد دیگر میشود.

پیش نیاز های قالب TehranITCoreDash

scaffolding templates in Asp.net core

قالب TehranITCoreDash از scaffold templates پشتیبانی میکند. از همین رو باید حتما پکیج مورد نیاز آن از طریق manage nuget packages manager نصب شود. به ورژن آن دقت کنید و از بروزترین استفاده کنید.

Microsoft.VisualStudio.Web.CodeGeneration.Design

کپی قالب TehranITCoreDash در روت پروژه

کپی قالب TehranITCoreDash در روت پروژه

محتویات پوشه قالب TehranITCoreDash را در روت پروژه خود کپی کنید. ممکن است مقداری زمان بر باشد و شما فکر کنید کار تمام شده است!! ولی نشده است.

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

TehranITCoreDash sidebar

برای سفارشی سازی و اضافه کردن منو های سایدبار میتوانید از پوشه Shared پوشه Parshials فایل _SidebarPartialView را باز کزده و از کد های زیر در آن استفاده کنید.

• کد ایجاد منو – همراه با ساب منو

<!--item subMenu-->
<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>

• کد ایجاد منو – بدون ساب منو

<!--item-->
<li>
<a href="login.html">
<i class="bi bi-blockquote-right"></i>
<span>عنوان منو</span>
</a>
</li>

صفحه Home Page

TehranITCoreDash HomePage

به ویو خود قالب _TehranITHomePage را نسبت دهید. برای فراخوانی بخش های صفحه هوم پیج میتوانید پارشیال های زیر را فراخوانی کنید.

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

صفحه Login

ehranITCoreDash LoginPage

به ویو خود قالب _TehranITLoginرا نسبت دهید. و از کد های زیر برای فراخوانی بخش هایی مثل فرم لاگین و لاگین از طریق شیکه های اجتماعی را اضافه کنید.

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

چیدمان صفحات

ehranITCoreDash Boxes

• کد های زیر برای صفحات مربوط به محتوا است. در صورتی که خواستید از کد های زیر برای صفحات فرم استفاده کنید کافی است به صورت زیر اقدارم کنید. و به جای Div از Form استفاده کنید.

@* Content *@
<div class="row tehranit-box"></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">
@* Items *@
</div>
<div class="col-4">
@* Items *@
</div>
</div>

• باکس محتوا

<div class="content-box">
@* Content *@
</div>

• تایتل باکس

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

ویرایشگر TinyMCE فارسی

tehranITCoreDash TinyMCE

TinyMCE یک ویرایشگر متن غنی (WYSIWYG: What You See Is What You Get) است که به توسعه‌دهندگان وب اجازه می‌دهد تا به راحتی یک ویرایشگر متنی قابل سفارشی‌سازی را به برنامه‌های وب خود اضافه کنند. این ویرایشگر به کاربران امکان می‌دهد که متن‌ها را به شکل غنی با فرمت‌های مختلف مانند بولد، ایتالیک، زیرخط، لیست‌ها، جدول‌ها، و غیره ویرایش و قالب‌بندی کنند، بدون نیاز به دانش HTML. و در کمترین زمان ممکن میتوان به محتوا استایل و طرح داد.

• کدهای ویو

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

• کدهای Js

<!--wysiwyg tiny-->
<script src="assets/lib/tinymce/js/tinymce/tinymce.min.js"></script>
<script>
jQuery('body').bind('classChanged', function () {
console.log('class changed');
tinymce.remove();
MyTiny();
});
MyTiny();
</script>
<!--end wysiwyg tiny-->

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

TehranITCoreDash DatePicker

• کدهای ویو

<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

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

• کدهای Js

<!--JalaliDatePicker-->
<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>
<!--end JalaliDatePicker-->

برچسب ها – TagsInput

TehranITCoreDash Tags Input

• کدهای ویو

<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="جی کوئری, جاوا" autofocus>
</div>

• کدهای Css

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

• کدهای Js

<!--TagsInput-->
<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>
<!--end TagsInput-->

صفحه خطا

• کدهای کنترلر

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

دانلود فایل های پروژه شامل پروژه HTML و قالب Asp.Net Core تهران آی تی

«از آنجا که فایل‌های قالب به‌صورت مستمر در حال به‌روزرسانی هستند، صفحه‌ای را برای این قالب ایجاد کردیم تا راحت‌تر با آن دسترسی داشته باشید و آخرین آموزش‌های آن را مشاهده کنید.»

• برای دانلود قالب TehranITCoreDash اینجا کلیک کنید.