ایتا - پروژه ASP.Net Core MVC (وب و سی شارپ) #carouselExampleIndicators

بیایید این بخش از کد ویو Razor برای صفحه اصلی را بررسی کنیم و توضیح دهیم که هر بخش آن چه وظیفه‌ای دارد.

توضیح کد
۱. بخش اسلایدر (slider-box)
کد:

html
<div class="slider-box">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            @for (int i = 1; i <= Model.Sliders.Count - 1; i++)
            {
                <li data-target="#carouselExampleIndicators" data-slide-to="@i" ></li>
            }
        </ol>
        <div class="carousel-inner">
            @foreach (var item in Model.Sliders)
            {
                if (_sliderCount == 1)
                {
                    <div class="carousel-item active">
                        <a href="@item.Link">
                            <img src="~/@item.Src" class="d-block w-100" alt="...">
                        </a>
                    </div>
                }
                else
                {
                    <div class="carousel-item">
                        <a href="@item.Link">
                            <img src="~/@item.Src" class="d-block w-100" alt="...">
                        </a>
                    </div>
                }
                _sliderCount++;
            }
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="fa fa-angle-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="fa fa-angle-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>
توضیح:
ساختار کلی اسلایدر: استفاده از کلاس‌های carousel و carousel slide برای ایجاد یک اسلایدر با استفاده از Bootstrap.

carousel-indicators:
 نمایش نقاط نمایانگر که نشان‌دهنده تعداد اسلایدها هستند.

لیست نقاط: استفاده از یک حلقه for برای ایجاد نقاط به ازای تعداد اسلایدها.

carousel-inner: شامل تمام اسلایدها.

@foreach: حلقه‌ای برای ایجاد هر اسلاید.

بررسی اولین اسلاید: اگر اولین اسلاید است، کلاس active به آن اضافه می‌شود.

تصویر اسلاید: نمایش تصویر هر اسلاید با استفاده از مسیر Src و لینک مرتبط با آن.

۲. نمایش تصاویر تبلیغاتی
کد:

html
<div class="col-lg-3 col-md-4 col-xs-12 pl mt-1">
    <div class="adplacement-container-column">
        <a href="#" class="adplacement-item">
            <div class="adplacement-sponsored-box">
                <img src="~/@Model.PageImages.Where(p => p.ImageLocation == ImageLocation.L1)?.FirstOrDefault()?.Src ?? '' ">
            </div>
        </a>
        <a href="#" class="adplacement-item">
            <div class="adplacement-sponsored-box">
                <img src="~/@Model.PageImages.Where(p => p.ImageLocation == ImageLocation.L2)?.FirstOrDefault()?.Src ?? ''">
            </div>
        </a>
    </div>
</div>
توضیح:
نمایش تصاویر تبلیغاتی در مکان‌های L1 و L2:

فیلتر کردن تصاویر: استفاده از LINQ برای انتخاب تصاویری که محل قرارگیری آن‌ها ImageLocation.L1 و ImageLocation.L2 باشد.

اولین تصویر مناسب: استفاده از FirstOrDefault برای انتخاب اولین تصویر که معیار را برآورده می‌کند.

مسیر تصویر: استفاده از خاصیت Src برای نمایش تصویر.

۳. بنر تصویر مرکز تمام صفحه
کد:

html
<div class="-container-column mt-4">
    <a href="#" class="adplacement-item img-banner">
        <div class="adplacement-sponsored-box">
            <img src="~/@Model.PageImages.Where(p => p.ImageLocation == ImageLocation.R1)?.FirstOrDefault()?.Src ?? ''">
        </div>
    </a>
</div>
توضیح:
نمایش تصویر در مکان R1:

فیلتر کردن تصاویر: استفاده از LINQ برای انتخاب تصویری که محل قرارگیری آن ImageLocation.R1 باشد.

اولین تصویر مناسب: استفاده از FirstOrDefault برای انتخاب اولین تصویر که معیار را برآورده می‌کند.

مسیر تصویر: استفاده از خاصیت Src برای نمایش تصویر.
1 مشاهده13:46
پرسش‌ها

قوانین

داغ‌ترین‌ها

چندسکویی
