从集合ASP.NET Core中检索单个图像 [英] Retrieve single image from collection ASP.NET Core

查看:78
本文介绍了从集合ASP.NET Core中检索单个图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个模型类(order.cs),它具有一些属性,其中包括列出另一类的集合-orderimage。

 公共类Order 
{
[Key]
public ind Id {get;组; }

[Display(Name = Invoice ID)]
公共字符串InvoiceId {get;组; }

[Display(Name = Delivery Date)]
公共字符串DeliveryDate {get;组; }

[ForeignKey( ShippingLocation))
[Display(Name = Shipping Location))
公共字符串ShippingLocationId {get;组; }

[Display(Name = Branch ID)]
公共字符串BranchId {get;组; }

[Display(Name = Product Name))
公共字符串ProductName {get;组; }

[Display(Name = Product Color)]
公共字符串ProductColor {get;组; }

[Display(Name = Product Size))
公共字符串ProductSize {get;组; }

[Display(Name = Quantity))
公共字符串Quantity {get;组; }

[ForeignKey( OrderStatus))
[Display(Name = Status))]
公共字符串OrderStatusId {get;组; }

[Display(Name = Sales Consultant))
公共字符串SalesPersonId {get;组; }

[Display(Name = Order Note)]
公共字符串OrderNote {get;组; }

[Display(Name = Delivery Note)]
公共字符串DeliveryNote {get;组; }

公共虚拟ICollection< OrderImage>图片{集;得到; } = new List< OrderImage>();

公共虚拟ShippingLocation ShippingLocation {获取;组; }

公共虚拟OrderStatus OrderStatus {get;组; }
}

公共类OrderImage
{
[Key]
public int Id {set;得到; }
公共字符串Name {set;得到; }
public long Size {set;得到; }
公共字符串类型{set;得到; }
公用字符串Path {set;得到; }
[ForeignKey( Order))
public int orderId {set;得到; }
个公共虚拟订单Order {get; set;}
}

这些是与图像一起保存订单记录,但是图像将保存到另一个包含订单的订单ID的表。当我必须将其检索到数据表时,我想检索已按特定顺序插入的集合的第一张图像。我在控制器中收到以下订单详细信息。

  [HttpGet] 
public async Task< ActionResult> Order()
{
return View(await _context.Order.ToListAsync());
}

根映像文件夹是OrderImage,以及在db上保存路径的方式,


〜/ OrderImage / Luxury-Bed-Collections-Customize.jpg


现在当我在表中检索,在视图中是

  @foreach(模型中的变量项)
{
< tr>
< td>
< img src = @(〜/ OrderImage / + item.Images) asp-append-version = true; width = 50px height = 50px /
< span class = avatar-status bg-teal< / span>
< / td>
< td>
@ Html.DisplayFor(modelItem => item.InvoiceId)
< / td>
< / tr>
}

但是我在这里收到的只是一个缩略图。在控制台中,是


加载资源失败:服务器响应状态为404()



我在哪里弄错,将图像集合作为要显示的字符串检索的正确方法是什么?


Viewing Datatable controller在下面

 公共异步任务< ActionResult> Order()
{
var _orderList = await(来自_context中的ORD.Order
加入_context中的AUR.ORD.SalesPersonId上的UserRoles等于AUR.UserId
加入_context中的AU。 AUR.UserId上的用户等于AU.Id
加入_context中的AR.AUR.RoleId上的角色等于AR.Id从UserTable.DefaultIfEmpty()中的AR进入UserTable
并加入_context中的OI。 ORD.Id上的OrderImage等于OI.orderId从OrderOrderImageTable.DefaultIfEmpty()中的OI到OrderOrderImageTable
中选择新订单
{
InvoiceId = ORD.InvoiceId,
DeliveryDate = ORD.DeliveryDate,
Shi ppingLocationId = SL.Name,
ProductName = ORD.ProductName,
ProductColor = ORD.ProductColor,
ProductSize = ORD.ProductSize,
数量= ORD.Quantity,
OrderStatusId = ORD.OrderStatusId,
SalesPersonId = AU.FirstName,
OrderNote = ORD.OrderNote,
DeliveryNote = ORD.DeliveryNote,
Images = ORD.Images
} ).ToListAsync();
return View(_orderList);
}

请求的订单视图

  @model IEnumerable< Order> 
< html>
< head>
< ;!-标题->
< title> ZETA-简单的业务< / title>
< ;!-Favicon->
< link rel = icon href ="〜/ Theme / img / brand / favicon.png" type = image / x-icon />
< / head>
< body>
< header>
< nav class = navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3>
< div class = container>
< a class = navbar-brand asp-area = asp-controller =主页 asp-action =索引> ZETA / a。
< button class = navbar-toggler type = button data-toggle =收合 data-target =。navbar-collapse aria-controls = navbarSupportedContent;
aria-expanded =假; aria-label =切换导航
< span class = navbar-toggler-icon< / span>
< / button>
< / div>
< / nav>
< / header>
< h4>订单< / h4>
< hr />
<!-已打开主要内容->
< div class =主要内容水平内容>
<!-容器已打开->
< div class = container>
<!-面包屑->
< div class = breadcrumb-header justify-content-between
< div class = my-auto>
< div class = d-flex>
< h4 class ="内容标题mb-0 my-auto"订单< / h4>"跨度class ="文字静音mt-1 tx-13 mr-2 mb-0 ;> /查看全部< / span>
< / div>
< / div>
< div class = d-flex my-xl-auto right-content>
< div class = col-sm-12 col-md-12>
< a class =模态效应btn btn-outline-primary btn-block; data-effect = effect-scale。 data-toggle = modal href ="#addOrderModal">添加新< / a>
< / div>
< / div>
< / div>
<!-面包屑->
<!-行已打开->
< div class = row row-sm>
< div class = col-xl-12>
< div class = card mg-b-20>
< div class = card-header pb-0&;
< / div>
< div class = card-body>
< div class = table-sensitive
< div class = row>
< div class = col-sm-12 col-md-6>
< div id =" example_filter" class = dataTables_filter
< label>
< input type =搜索 class = form-control form-control-sm;占位符=搜索... aria-controls = example
< / label>
< / div>
< / div>
< / div>
< table id =" newOrderTab" class = table text-md-nowrap
< thead>
< tr>
< th class = border-bottom-0-0>
@ Html.DisplayNameFor(model => model.Images)
< / th>
< th class = border-bottom-0-0>
@ Html.DisplayNameFor(model => model.InvoiceId)
< / th>
< th class = border-bottom-0-0>
@ Html.DisplayNameFor(model => model.ShippingLocationId)
< / th>
< th class = border-bottom-0-0>
@ Html.DisplayNameFor(model => model.ProductName)
< / th>
< th class = border-bottom-0-0>
@ Html.DisplayNameFor(model => model.SalesPersonId)
< / th>
< / tr>
< / thead>
< tbody>
@foreach(模型中的变量项)
{
< tr>
@foreach(item.Image中的可变图像)
{
< td>
< img src = @(〜/ OrderImage / + image.Name) asp-append-version = true; width = 50px height = 50px />
< span class = avatar-status bg-teal< / span>
< / td>
}
< td>
@ Html.DisplayFor(modelItem => item.InvoiceId)
< / td>
< td>
@ Html.DisplayFor(modelItem => item.ShippingLocationId)
< / td>
< td>
@ Html.DisplayFor(modelItem => item.ProductName)
< / td>
< td>
@ Html.DisplayFor(modelItem => item.SalesPersonId)
< / td>
< / tr>
}
< / tbody>
< / table>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>

< ;!-jQuery min js->
< script src =〜/ Theme / plugins / jquery / jquery.min.js< / script>

< script type = text / javascript>
$(document).ready(function(){
$(#newOrderTab)。DataTable({
response:true,
paging; :false,
info:false,
bFilter:false,
autoWidth:false,
dom: Bfrtip,
buttons:[
{扩展名: excel},
{扩展名: pdf},
{扩展名: print},
{扩展名:'colvis'}
]
});
});
< / script>
< / body>
< / html>

必需的订单视图控制器的屏幕截图



更新


根据您的 OrderImage 结构, OrderImage 类中的 Size 字段的类型为 long ,而在数据库中, OrderImage 表的 Size 字段为 Varchar 类型。 varchar 类型应与类中的 string 相匹配。


因此,您只需将OrderImage类中的Size字段更改为 string 类型。

 公共类OrderImage 
{
[Key]
public int Id {set;得到; }
公共字符串Name {set;得到; }
public string Size {set;得到; } //更改此行
public string类型{set;得到; }
公用字符串Path {set;得到; }
[ForeignKey( Order))
public int orderId {set;得到; }
个公共虚拟订单Order {get; set;}
}

或者如果您想要长尺寸,请更改尺寸类型数据库的 BIGINT


Update2


如果只想显示表格中的第一张图片,您可以使用以下代码:

 < table id =" newOrderTab" class = table text-md-nowrap 
< thead>
< tr>

< th class = border-bottom-0-;
@ Html.DisplayNameFor(model => model.Images)
< / th>

< th class = border-bottom-0-;
@ Html.DisplayNameFor(model => model.InvoiceId)
< / th>
< th class = border-bottom-0-0>
@ Html.DisplayNameFor(model => model.ShippingLocationId)
< / th>
< th class = border-bottom-0-0>
@ Html.DisplayNameFor(model => model.ProductName)
< / th>
< th class = border-bottom-0-0>
@ Html.DisplayNameFor(model => model.SalesPersonId)
< / th>
< / tr>
< / thead>
< tbody>
@foreach(模型中的可变项)
{
< tr>

< td>
< img src = @(〜/ OrderImage / + item.Images.FirstOrDefault()。Path)。 asp-append-version = true; width = 50px height = 50px />
< span class = avatar-status bg-teal< / span>
< / td>

< td>
@ Html.DisplayFor(modelItem => item.InvoiceId)
< / td>
< td>
@ Html.DisplayFor(modelItem => item.ShippingLocationId)
< / td>
< td>
@ Html.DisplayFor(modelItem => item.ProductName)
< / td>
< td>
@ Html.DisplayFor(modelItem => item.SalesPersonId)
< / td>
< / tr>
}
< / tbody>
< / table>

结果是:



I have one model class (order.cs) which has some properties including a collection which listifies another class - orderimage.

public class Order
{
    [Key]
    public int Id { get; set; }

    [Display(Name = "Invoice ID")]
    public string InvoiceId { get; set; }

    [Display(Name = "Delivery Date")]
    public string DeliveryDate { get; set; }

    [ForeignKey("ShippingLocation")]
    [Display(Name = "Shipping Location")]
    public string ShippingLocationId { get; set; }

    [Display(Name = "Branch ID")]
    public string BranchId { get; set; }

    [Display(Name = "Product Name")]
    public string ProductName { get; set; }

    [Display(Name = "Product Color")]
    public string ProductColor { get; set; }

    [Display(Name = "Product Size")]
    public string ProductSize { get; set; }

    [Display(Name = "Quantity")]
    public string Quantity { get; set; }

    [ForeignKey("OrderStatus")]
    [Display(Name = "Status")]
    public string OrderStatusId { get; set; }

    [Display(Name = "Sales Consultant")]
    public string SalesPersonId { get; set; }

    [Display(Name = "Order Note")]
    public string OrderNote { get; set; }

    [Display(Name = "Delivery Note")]
    public string DeliveryNote { get; set; }

    public virtual ICollection<OrderImage> Images { set; get; } = new List<OrderImage>();

    public virtual ShippingLocation ShippingLocation { get; set; }

    public virtual OrderStatus OrderStatus { get; set; }
}

public class OrderImage
{
    [Key]
    public int Id { set; get; }
    public string Name { set; get; }
    public long Size { set; get; }
    public string Type { set; get; }
    public string Path { set; get; }
    [ForeignKey("Order")]
    public int orderId { set; get; }
    public virtual Order Order {get; set;}
}

These were to save an order record along with images but the images will be saved to another table including Order ID of an order. When I have to retrieve it to the datatable I want to retrieve the first image of the collection which has been inserted for a particular order. I am receiving order details as follows in the controller.

    [HttpGet]
    public async Task<ActionResult> Order()
    {
        return View(await _context.Order.ToListAsync());
    }

The root image folder is OrderImage and the way how the path saved on db is,

~/OrderImage/Luxury-Bed-Collections-Customize.jpg

Now when I retrieve on table, in the view it is

    @foreach (var item in Model)
       {
        <tr>
            <td>
                <img src="@("~/OrderImage/"+item.Images)" asp-append-version="true" width="50px" height="50px"/>
                <span class="avatar-status bg-teal"></span>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.InvoiceId)
            </td>
        </tr>
        }

but all what I am receiving here is a thumbnail. in the console it is,

Failed to load resource: the server responded with a status of 404 ()

Where am I making a mistake, What would be the proper way to retrieve a collection of image as a string to show. Suggestions are appreciated.

Viewing Datatable controller is below

public async Task<ActionResult> Order()
        {
            var _orderList = await (from ORD in _context.Order
                                    join AUR in _context.UserRoles on ORD.SalesPersonId equals AUR.UserId 
                                    join AU in _context.Users on AUR.UserId equals AU.Id
                                    join AR in _context.Roles on AUR.RoleId equals AR.Id into UserTable
                                    from AR in UserTable.DefaultIfEmpty()
                                    join OI in _context.OrderImage on ORD.Id equals OI.orderId into OrderOrderImageTable
                                    from OI in OrderOrderImageTable.DefaultIfEmpty()
                                    select new Order
                                    {
                                        InvoiceId = ORD.InvoiceId,
                                        DeliveryDate = ORD.DeliveryDate,
                                        ShippingLocationId = SL.Name,
                                        ProductName = ORD.ProductName,
                                        ProductColor = ORD.ProductColor,
                                        ProductSize = ORD.ProductSize,
                                        Quantity = ORD.Quantity,
                                        OrderStatusId = ORD.OrderStatusId,
                                        SalesPersonId = AU.FirstName,
                                        OrderNote = ORD.OrderNote,
                                        DeliveryNote = ORD.DeliveryNote,
                                        Images = ORD.Images
                                    }).ToListAsync();
            return View(_orderList);
        }

The Order View as requested

@model IEnumerable<Order>
<html>
<head>
    <!-- Title -->
    <title> ZETA -  Business in Simple </title>
    <!-- Favicon -->
    <link rel="icon" href="~/Theme/img/brand/favicon.png" type="image/x-icon" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">ZETA</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
        </nav>
    </header>
    <h4>Order</h4>
    <hr />
    <!-- main-content opened -->
    <div class="main-content horizontal-content">
        <!-- container opened -->
        <div class="container">
            <!-- breadcrumb -->
            <div class="breadcrumb-header justify-content-between">
                <div class="my-auto">
                    <div class="d-flex">
                        <h4 class="content-title mb-0 my-auto">Order</h4><span class="text-muted mt-1 tx-13 mr-2 mb-0"> / View All</span>
                    </div>
                </div>
                <div class="d-flex my-xl-auto right-content">
                    <div class="col-sm-12 col-md-12">
                        <a class="modal-effect btn btn-outline-primary btn-block" data-effect="effect-scale" data-toggle="modal" href="#addOrderModal">Add New</a>
                    </div>
                </div>
            </div>
            <!-- breadcrumb -->
            <!-- row opened -->
            <div class="row row-sm">
                <div class="col-xl-12">
                    <div class="card mg-b-20">
                        <div class="card-header pb-0">
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <div class="row">
                                    <div class="col-sm-12 col-md-6">
                                        <div id="example_filter" class="dataTables_filter">
                                            <label>
                                                <input type="search" class="form-control form-control-sm" placeholder="Search..." aria-controls="example">
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <table id="newOrderTab" class="table text-md-nowrap">
                                    <thead>
                                        <tr>
                                            <th class="border-bottom-0">
                                                @Html.DisplayNameFor(model => model.Images)
                                            </th>
                                            <th class="border-bottom-0">
                                                @Html.DisplayNameFor(model => model.InvoiceId)
                                            </th>
                                            <th class="border-bottom-0">
                                                @Html.DisplayNameFor(model => model.ShippingLocationId)
                                            </th>
                                            <th class="border-bottom-0">
                                                @Html.DisplayNameFor(model => model.ProductName)
                                            </th>
                                            <th class="border-bottom-0">
                                                @Html.DisplayNameFor(model => model.SalesPersonId)
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach (var item in Model)
                                        {
                                        <tr>
                                            @foreach (var image in item.Images)
                                            {
                                                <td>
                                                    <img src="@("~/OrderImage/"+ image.Name)" asp-append-version="true" width="50px" height="50px" />
                                                    <span class="avatar-status bg-teal"></span>
                                                </td>
                                            }
                                            <td>
                                                @Html.DisplayFor(modelItem => item.InvoiceId)
                                            </td>
                                            <td>
                                                @Html.DisplayFor(modelItem => item.ShippingLocationId)
                                            </td>
                                            <td>
                                                @Html.DisplayFor(modelItem => item.ProductName)
                                            </td>
                                            <td>
                                                @Html.DisplayFor(modelItem => item.SalesPersonId)
                                            </td>
                                        </tr>
                                        }
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JQuery min js -->
    <script src="~/Theme/plugins/jquery/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#newOrderTab").DataTable({
                "responsive": true,
                "paging": false,
                "info": false,
                "bFilter": false,
                "autoWidth": false,
                "dom": 'Bfrtip',
                "buttons": [
                    { extend: 'excel'}, 
                    { extend: 'pdf'},
                    { extend: 'print'},
                    { extend: 'colvis'} 
                ]
            });
        });
    </script>
</body>
</html>

Required Screen shots of order view controller

Order Result View

Order Image Result View

解决方案

The code in Order action you have updated is correct.

But I think for one-to-many or many-to-many relational tables, in ef core, using Include is the simplest and most direct way.

Include is the most commonly used method to get the data of the associated table in ef core.

Since you did not provide the code of other tables, I will provide you with examples based on the Order table and OrderImage table you gave.

Action:

    [HttpGet]
    public async Task<ActionResult> Order()
    {
         
        return View(await _context.Order.Include(x=>x.Images).ToListAsync());
    }

View:

@model IEnumerable<Order>
@{
    ViewData["Title"] = "Order";
    Layout = null;
    var maxCount = Model.Max(x => x.Images.Count);
}
<html>
<head>
    <!-- Title -->
    <title> ZETA -  Business in Simple </title>
    <!-- Favicon -->

    <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#newOrderTab").DataTable({
                "responsive": true,
                "paging": false,
                "info": false,
                "bFilter": false,
                "autoWidth": false,
                "dom": 'Bfrtip',
                "buttons": [
                    { extend: 'excel' },
                    { extend: 'pdf' },
                    { extend: 'print' },
                    { extend: 'colvis' }
                ]
            });
        });
    </script>
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">ZETA</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
        </nav>
    </header>
    <h4>Order</h4>
    <hr />
    <!-- main-content opened -->
    <div class="main-content horizontal-content">
        <!-- container opened -->
        <div class="container">
            <!-- breadcrumb -->
            <div class="breadcrumb-header justify-content-between">
                <div class="my-auto">
                    <div class="d-flex">
                        <h4 class="content-title mb-0 my-auto">Order</h4><span class="text-muted mt-1 tx-13 mr-2 mb-0"> / View All</span>
                    </div>
                </div>
                <div class="d-flex my-xl-auto right-content">
                    <div class="col-sm-12 col-md-12">
                        <a class="modal-effect btn btn-outline-primary btn-block" data-effect="effect-scale" data-toggle="modal" href="#addOrderModal">Add New</a>
                    </div>
                </div>
            </div>
            <!-- breadcrumb -->
            <!-- row opened -->
            <div class="row row-sm">
                <div class="col-xl-12">
                    <div class="card mg-b-20">
                        <div class="card-header pb-0">
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <div class="row">
                                    <div class="col-sm-12 col-md-6">
                                        <div id="example_filter" class="dataTables_filter">
                                            <label>
                                                <input type="search" class="form-control form-control-sm" placeholder="Search..." aria-controls="example">
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <table id="newOrderTab" class="table text-md-nowrap">
                                    <thead>
                                        <tr>
                                            @for (int i = 0; i < maxCount; i++)
                                            {
                                                <th class="border-bottom-0">
                                                    Images[@i]
                                                </th>
                                            }
                                            <th class="border-bottom-0">
                                                @Html.DisplayNameFor(model => model.InvoiceId)
                                            </th>
                                            <th class="border-bottom-0">
                                                @Html.DisplayNameFor(model => model.ShippingLocationId)
                                            </th>
                                            <th class="border-bottom-0">
                                                @Html.DisplayNameFor(model => model.ProductName)
                                            </th>
                                            <th class="border-bottom-0">
                                                @Html.DisplayNameFor(model => model.SalesPersonId)
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach (var item in Model)
                                        {
                                        <tr>
                                            @for (int i = 0; i < maxCount; i++)
                                            {
                                                if (i >= item.Images.Count())
                                                {
                                                    <td>no pic</td>
                                                }
                                                else
                                                {
                                                    <td>
                                                        <img src="@("~/OrderImage/"+ item.Images.Skip(i*1).Take(1).FirstOrDefault().Path)" asp-append-version="true" width="50px" height="50px" />
                                                        <span class="avatar-status bg-teal"></span>
                                                    </td>
                                                }

                                            }

                                            <td>
                                                @Html.DisplayFor(modelItem => item.InvoiceId)
                                            </td>
                                            <td>
                                                @Html.DisplayFor(modelItem => item.ShippingLocationId)
                                            </td>
                                            <td>
                                                @Html.DisplayFor(modelItem => item.ProductName)
                                            </td>
                                            <td>
                                                @Html.DisplayFor(modelItem => item.SalesPersonId)
                                            </td>
                                        </tr>
                                        }
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JQuery min js -->

</body>
</html>

Here is the view result based on these:

Update

Based on your OrderImage structure, the Size field in your OrderImage class is of type long, while in the database, the Size field of the OrderImage table is of Varchar type. The varchar type should match the string in class.

Therefore, you only need to Change the Size field in the OrderImage class to string type.

public class OrderImage
{
    [Key]
    public int Id { set; get; }
    public string Name { set; get; }
    public string Size { set; get; }//change this line
    public string Type { set; get; }
    public string Path { set; get; }
    [ForeignKey("Order")]
    public int orderId { set; get; }
    public virtual Order Order {get; set;}
}

Or If you want the size to be long type, then please change the size type of the database to BIGINT

Update2

If you only want to show the first image in the table, you can use the following code:

<table id="newOrderTab" class="table text-md-nowrap">
                                    <thead>
                                        <tr>

                                            <th class="border-bottom-0">
                                                @Html.DisplayNameFor(model => model.Images)
                                            </th>

                                            <th class="border-bottom-0">
                                                @Html.DisplayNameFor(model => model.InvoiceId)
                                            </th>
                                            <th class="border-bottom-0">
                                                @Html.DisplayNameFor(model => model.ShippingLocationId)
                                            </th>
                                            <th class="border-bottom-0">
                                                @Html.DisplayNameFor(model => model.ProductName)
                                            </th>
                                            <th class="border-bottom-0">
                                                @Html.DisplayNameFor(model => model.SalesPersonId)
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach (var item in Model)
                                        {
                                            <tr>

                                                <td>
                                                    <img src="@("~/OrderImage/"+ item.Images.FirstOrDefault().Path)" asp-append-version="true" width="50px" height="50px" />
                                                    <span class="avatar-status bg-teal"></span>
                                                </td>

                                                <td>
                                                    @Html.DisplayFor(modelItem => item.InvoiceId)
                                                </td>
                                                <td>
                                                    @Html.DisplayFor(modelItem => item.ShippingLocationId)
                                                </td>
                                                <td>
                                                    @Html.DisplayFor(modelItem => item.ProductName)
                                                </td>
                                                <td>
                                                    @Html.DisplayFor(modelItem => item.SalesPersonId)
                                                </td>
                                            </tr>
                                        }
                                    </tbody>
                                </table>

Here is the result:

这篇关于从集合ASP.NET Core中检索单个图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆