如何解决从集合ASP.NET Core中检索单个图像
我有一个模型类（order.cs），它具有一些属性，包括列出另一个类的集合-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;}
}
这些是与图像一起保存订单记录，但是图像将被保存到另一个包含订单的订单ID的表中。当我必须将其检索到数据表时，我想检索已按特定顺序插入的集合的第一张图像。我在控制器中收到以下订单详细信息。
[HttpGet]
public async Task<ActionResult> Order()
{
return View(await _context.Order.ToListAsync());
}
根图像文件夹是OrderImage，以及在db上保存路径的方式，
〜/ OrderImage / Luxury-Bed-Collections-Customize.jpg
现在在表上检索时，在视图中是
@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>
}
但是我在这里收到的只是一张缩略图。在控制台中，
无法加载资源：服务器的状态为404（）
我在哪里弄错了，将图像集合作为要显示的字符串来检索图像的正确方法是什么？建议表示赞赏。
查看数据表控制器在下面
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);
}
根据要求的订单视图
@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>
订单视图控制器的必需屏幕截图
解决方法
item.Images是ICollection<OrderImage>，因此在这一行：<img src="@("~/OrderImage/"+item.Images)" ...您尝试将string与ICollection<OrderImage>串联。
您应该遍历item.like这样的图像（在自己身上修复html）：
@foreach (var item in Model)
{
<tr>
@foreach(var image in item.Images)
{
<td>
<img src="@("~/OrderImage/"+image.Path)" asp-append-version="true" width="50px" height="50px"/>
<span class="avatar-status bg-teal"></span>
</td>
<td>
@Html.DisplayFor(modelItem => item.InvoiceId)
</td>
}
</tr>
}
或者，如果您只需要一张图像，请写下：
@foreach (var item in Model)
{
<tr>
<td>
<img src="@("~/OrderImage/"+item.Images.First().Path)" asp-append-version="true" width="50px" height="50px"/>
<span class="avatar-status bg-teal"></span>
</td>
<td>
@Html.DisplayFor(modelItem => item.InvoiceId)
</td>
</tr>
}
请不要忘记Include您控制器中的图像。
您更新的“订单”操作中的代码正确。
但是我认为对于一对多或多对多关系表，在ef核心中，使用 Include 是最简单，最直接方式。
包含是在ef核心中获取关联表数据的最常用方法。
由于您未提供其他表的代码，因此我将基于您提供的Order表和OrderImage表为您提供示例。
动作：
[HttpGet]
public async Task<ActionResult> Order()
{
return View(await _context.Order.Include(x=>x.Images).ToListAsync());
}
查看：
@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>
这是基于以下内容的查看结果：
更新
根据您的OrderImage结构，Size类中的OrderImage字段的类型为long，而在数据库中，Size字段的类型为OrderImage表是Varchar类型。 varchar类型应与课程中的string相匹配。
因此，您只需要将OrderImage类中的Size字段更改为string类型。
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;}
}
或者如果您希望大小为长型，那么请将数据库的大小类型更改为 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">
@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>
这是结果：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。