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

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

پیش نیاز های قالب 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 منتشر شد. رفع برخی ایرادات.

ورژن ۱٫۲ قالب TehranITCoreDash منتشر شد. رفع برخی ایرادات. افزوده شدن صفحه خطا و نمایش ارورها. بهینه شده برای استفاده از سرویس ها. هماهنگ شده با Dot Net 9 و codegeneration.design 9.

توجه : هر دو فایل دانلودی “رایگان و غیر رایگان” یکسان میباشند.

توجه : در صورتی که قبلا این قالب را خریداری کرده اید. نیازی به خرید مجدد نیست. از قسمت دانلود رایگان آن را دانلود فرمایید.

• اگر دستت خالیه رایگان از لینک زیر دانلود کنید بعدا پرداخت کنید. زمانی که توانایی داشتید مبلغ را به شماره کارت ۶۳۶۲۱۴۱۱۰۴۳۵۲۰۳۵ به نام محمدرضا احدیان مبلغ ۵۰۰ هزارتومان واریز کنید.

• در غیر اینصورت از لینک زیر خرید فرمایید. قیمت ۵۰۰ هزارتومان.