使用剃刀页面和实体框架在Bootstrap Carousel中显示图像

本简短的文章显示了如何使用Bootstrap Carousel和实体框架核心显示存储在剃刀页面应用程序中的图像中的图像。

图像可以以两种方式存储在数据库中:您可以保存文件 到服务器的文件系统并存储图像文件的名称和/或路径,或 您可以以二进制格式存储文件本身。每种方法都有其优势和 缺点。而不是进入关于哪种存储方法更好的辩论,我将展示如何与之合作 旋转木马使用两种方法。

旋转木马通过一系列内容过渡,这可以包括 图像和文本。提供大量的旋转木马组件,测距 在他们的特征和复杂性方面广泛。靴子旋转木马 不需要任何其他组件以及其简单性的好处。 它适用于大多数用例,支持循环内容 向左,淡化过渡,更换内容。它还支持控件,指标和 captions.

The key elements of a Bootstrap carousel are an element with the carousel class applied to it, and a number of elements with the carousel-item class applied to them within an element with carousel-inner applied to it.

<div class="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active>...</div>
        <div class="carousel-item>...</div>
        <div class="carousel-item>...</div>
    </div>
</div>

要显示的内容将放在其中 carousel-item elements, one of which needs to have the active class added to make 旋转木马可见。

旋转木马支持许多可以申请的选项 via CSS classes or data-* attributes, or they can be specified in 客户端代码。目前,旋转木马只是取代一套内容 with the next without any transition between them. The slide class 导致内容从右到左滑入。默认间隔之间 transitions is 5 seconds. You can use the data-interval attribute 指定以毫秒为单位的间隔。这 data-ride 选项用于指定旋转木马是否应自动播放。价值 carousel 结果旋转木马自动播放负载。使用这些选项, 建立后将导致旋转旋转内容从右滑动 每2秒留下一次,并自动播放:

<div class="carousel slide" data-ride="carousel" data-interval="2000">
    <div class="carousel-inner">
        <div class="carousel-item active>...</div>
        <div class="carousel-item>...</div>
        <div class="carousel-item>...</div>
    </div>
</div>

首先,我将查看存储在文件系统中的图像。我正在使用Northwind 演示的示例数据库并将在旋转木马中显示员工的照片。 The Employee entity has a property named PhotoPath, which is a string. In my 版本,存储在相应数据库列中的值只是文件 员工的照片的名称。图像文件位于 wwwroot /图像:

图片

I have an EmployeeService class responsible for obtaining data using Entity 框架核心。它有一种方法可以获得所有员工数据:

public class EmployeeService : IEmployeeService
{
    private readonly NorthwindContext context;
    public EmployeeService(NorthwindContext context) => this.context = context;
    public async Task<List<Employee>> GetEmployees() => await context.Employees.ToListAsync();
}

The GetEmployees method is called in the PageModel class and the data assigned to a public property:

public class CarouselModel : PageModel
{
    private readonly IEmployeeService employeeService;
    public CarouselModel(IEmployeeService employeeService) =>  this.employeeService = employeeService;
    public List<Employee> Employees { getset; }
    public async Task OnGetAsync()
    {
        Employees = await employeeService.GetEmployees();
    }
}

In the content page, the PhotoPath property is used to build a relative URL to each image as each employee is iterated and a corresponding carousel-item element is rendered:

<div class="carousel slide" data-ride="carousel" data-interval="2000" style="width:192px;">
    <div class="carousel-inner">
        @foreach (var employee in Model.Employees)
        {
        <div class="carousel-item @(employee == Model.Employees.First() ? "active" : "")">
            <img src="~/images/@employee.PhotoPath" alt="@employee.FirstName @employee.LastName">
        </div>
        }
    </div>
</div>

注意,旋转木马的宽度被限制为宽度 images. Also see that the active class is applied to the carousel-item element generated for the first employee entity in the sequence to ensure the carousel appears. The first and last name of the employee is used to generate a suitable alt attribute value.

那么你如何将二进制图像变成旋转木马?可能是最简单的方法 to use 数据URIS.. 使用此方法,您将编码为基本64字符串的二进制数据嵌入 assign it to the src attribute of an img element.

映射到数据库varbinary或blob类型的.NET数据Taype是一个 byte array. The Employee entity has a property named Photo that maps to the 适当的数据库列:

public byte[] Photo { getset; }

This is how the code that generates the carousel-item elements is modified to 使用数据URI:

@foreach (var employee in Model.Employees)
{
<div class="carousel-item @(employee == Model.Employees.First() ? "active" : "")">
    <img src="data:image/jpg;base64,@Convert.ToBase64String(employee.Photo)" alt="@employee.FirstName @employee.LastName">
</div>
}

The format of the data URI is the scheme data folowed by a colon, then the mime type, in this case image/jpg, although just image 会做。这是一个半冒号,然后是 编码。支持许多编码,但基本64编码用于 二进制数据。接下来是所需的逗号,然后是实际数据, 使用合适的.NET方法进行编码。

那个包括标题怎么样?这是通过添加的实现 carousel-caption class to an element within each carousel-item:

@foreach (var employee in Model.Employees)
{
<div class="carousel-item @(employee == Model.Employees.First() ? "active" : "")">
    <img src="data:image/jpg;base64,@Convert.ToBase64String(employee.Photo)" alt="@employee.FirstName @employee.LastName">
    <div class="carousel-caption">
        <p class="mb-0">@employee.FirstName @employee.LastName</p>
    </div>
</div>
}

概括

无论您是存储文件系统还是二进制数据,它都是漂亮的 易于使用剃刀页面中的引导转盘显示它们。