در این جلسه از آموزش ASP.NET Core قصد داریم نحوه نصب و استفاده از Bootstrap در ASP.NET Core را مورد بررسی قرار دهیم. Bootstrap در واقع یک فریمورک سمت کلاینت میباشد که مجموعه‌ایی از کلاسهای از پیش تعریف شده میباشد. این کلاسها برای قالبدهی و تعریف استایل صفحات وب مورد استفاده قرارمیگیرد. اگر با این فریمورک آشنایی ندارید بهتر است قبل از ادامه این جلسه با مطالعه مستندات این فریمورک با آن آشنایی پیدا کنید.
در ASP.NET Core و محیط توسعه Visual Studio با ابزار مختلفی مانند Nuget Manager، Library Manager، NPM و یا Bower میتوان کتابخانه و یا پکیجهای مورد نظر را نصب نمود. ما در این جلسه برای نصب کتابخانه‌های سمت کلاینت از Library Manager یا به اختصار LibMan استفاده خواهیم کرد.
مراحل نصب Bootstrap در پروژه ASP.NET Core MVC با استفاده از LibMan
- مرحله 1: بروی نام پروژه راست کلیک نمایید
- مرحله 2: از منوی ظاهر شده گزینه Add را انتخاب نمایید.
- مرحله 3: از زیر منوی ظاهر شده گزینه Client-Side Library را انتخاب نمایید.
- مرحله 4: Provider را بروی cdnjs قرار دهید.
- مرحله 5: در کادر مربوط به Library عبارت Bootstrap را وارد نمایید.
- مرحله 6: از لیست ظاهر شده نسخه Bootstrap مورد نظر را اتنتخاب کنید.
- مرحله 7: بسته به نیاز خود گزینه Include All Library Files و یا Choose Specific files را انتخاب نمایید (در صورت انتخاب گزینه دوم فایل های مورد نیاز را انتخاب نمایید).
- مرحله 8: در قسمت Target Location مسیر دلخواه نصب کتابخانه مورد نظر را انتخاب کنید.
- مرحله 9: در پایان جهت نصب کتابخانه کلید Install را بزنید.
نصب Booststrap
برای نصب Bootstrap و یا هر کتابخانه سمت کلاینت دیگری مانند JQuery میتوانید از Library Manager استفاده نمایید. برای این کار بروی نام پروژه خود راست کلیک نمایید و گزینه Add را انتخاب کنید. سپس از زیر منوی ظاهر شده، گزینه Client-Side Library را انتخاب کنید تا ابزار ویژوال Library Manager ظاهر گردد.
از قسمت Provider گزینه cdnjs را انتخاب نمایید. سپس در کادر مربوط به Library عبارت Bootstrap را جستجو نمایید. از لیست ظاهر شده نسخه مورد نظر را انتخاب نمایید.
سپس بنابر نیاز، کلیه فایل‌های کتابخانه یا بخشی از آن را برای نصب انتخاب کنید. برای این انتخاب میتوانید از دو انتخاب Include All Library Files و یا Choose Specific files استفاده نمایید.
در پایان، در کادر Target Location مسیر نصب را تعیین نمایید و کلید Install را بزنید. با زدن کلید Install در مسیر تعیین شده فایل‌های مربوط به کتابخانه ظاهر میگردد. همچنین در مسیر ریشه پروژه، یک فایل با نام LibMan.json ایجاد میگردد که در واقع فایل Manifest مربوط به Library Manager میباشد.
به علاوه، قابل ذکر است که امکان نصب کتابخانه جدید، دانگرید و یا بروزرسانی کتابخانه نصب شده و حذف کلی یک کتابخانه از طریق نسخه ویژاول این ابزار و یا از طریق فایل LibMan.json میسر میباشد. در ویدئو آموزشی این جلسه همه موارد ذکر شده با جزئیات کامل بیان شده است و شما میتوانید برای درک بهتر مباحث این جلسه، آنرا تماشا کنید.
جهت Clean کردن کتابخانه های نصب شده، میتوانید بروی فایل LibMan.json راست کلیک نمایید و گزینه Clean Client-Side Libraries را انتخاب نمایید.
جهت بازیابی کتابخانه های موجود در فایل LibMan.json میتوانید بروی این فایل راست کلیک نمایید و گزینه Restore Client-Side Libraries را انتخاب نمایید.
استفاده از Bootstrap
برای استفاده از کتابخانه‌های مورد نیاز، بهتر است آنها را درون فایل Layout فراخوانی نماییم تا درون تمامی نماهایی که از آن فایل Layout استفاده میکنند قابل دسترس باشد.
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="~/lib/jquery/jquery.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.js"></script>
<title>@ViewBag.Title</title>
</head>
<body>
<div class="container">
@RenderBody()
</div>
@*@RenderSection("Scripts", required: false)*@
@if (IsSectionDefined("Scripts"))
{
@RenderSection("Scripts", required: true)
}
</body>
</html>سپس کتابخانه های اضافه شده در تمامی نماها قابل دسترس میباشد و کلاسهای Bootstrap را میتوان در تمامی نماها مورد استفاده قرار داد.
قطعه کد مربوط به نما Index از کنترلر Home پس از اضافه نمودن کلاسهای Bootstrap
@{
ViewBag.Title = "Welcome to Cost Web Application";
}
<div class="alert alert-primary">
<h1>Hello from Home/Index view</h1>
</div>
قطعه کد مربوط به نما List از کنترلر Cost پس از اضافه نمودن کلاسهای Bootstrap
@model IEnumerable<Cost>
@{
ViewBag.Title = "Cost List";
}
<table class="table table-dark">
<thead>
<tr>
<th>ID</th>
<th>Amount</th>
<th>Category</th>
<th>Comment</th>
<th colspan="3" class="text-center">Actions</th>
</tr>
</thead>
<tbody>
@foreach (var cost in Model)
{
<partial name="_CostList_PartialView" model="cost" />
}
</tbody>
</table>و قطعه کد مربوط به PartialView پس از استفاده از کلاسهای Bootstrap
@model DailyCostWebApplication.Models.Cost
<tr>
<td>@Model.ID</td>
<td>@Model.Amount</td>
<td>@Model.Category</td>
<td>@Model.Comment</td>
<td><a class="btn btn-primary d-block" href="#">View</a></td>
<td><a class="btn btn-info btn-block d-block" href="#">Edit</a></td>
<td><a class="btn btn-danger btn-block d-block" href="#">Delete</a></td>
</tr>
قطعه کد مربوط به نما Detail از کنترلر Cost پس از اضافه نمودن کلاسهای Bootstrap
@model CostDetailViewModel
@{
//Layout = null;
ViewBag.Title = "Cost Detail";
}
<div class="row">
<div class="col-lg-4 offset-lg-4 col-md-6 offset-md-3 col-12">
<div class="card">
<div class="card-header">
@Model.PageTitle
</div>
<div class="card-body">
<p class="card-text">ID: @Model.CostData.ID</p>
<p class="card-text">Amount: @Model.CostData.Amount</p>
<p class="card-text">Category: @Model.CostData.Category</p>
<p class="card-text">Comment: @Model.CostData.Comment</p>
<a href="#" class="btn btn-primary">Cost List</a>
</div>
</div>
</div>
</div>
در صورت نیاز به جزئیات بیشتر، میتوانید ویدئو آموزشی این جلسه را تماشا نمایید. همچنین برای آگاهی از جلسات بعدی این دوره آموزشی، ما را در اینستاگرام، تلگرام، یوتیوب و آپارات دنبال کنید. همچنین لیست کامل جلسات در این قسمت در دسترس شما میباشد.
دانلود اسلایدهای آموزشی این جلسه از اینجا