Image 如何在Asp.Net WebApi MVC4中将图像从一个视图显示到另一个视图？_Image_Asp.net Mvc 4_Asp.net Web Api

Image 如何在Asp.Net WebApi MVC4中将图像从一个视图显示到另一个视图？

image asp.net-mvc-4 asp.net-web-api

Image 如何在Asp.Net WebApi MVC4中将图像从一个视图显示到另一个视图？,image,asp.net-mvc-4,asp.net-web-api,Image,Asp.net Mvc 4,Asp.net Web Api,大家好，我有一些图像，我正在动态检索并显示在这样的视图中这是我的控制器 private ProductEntities products = new ProductEntities(); public List<ProductItems> GetAllProducts() { var items = new List<ProductItems>(); var records = products.Products.

大家好，我有一些图像，我正在动态检索并显示在这样的视图中

这是我的控制器

    private ProductEntities products = new ProductEntities();
    public List<ProductItems> GetAllProducts()
    {
        var items = new List<ProductItems>();
        var records = products.Products.ToList();
        foreach (var item in records)
        {
            ProductItems model = new ProductItems();
            model.ProductID = item.ProductId;
            model.ProductName = item.ProductName;
            model.ImageURL = item.ImageURL;
            items.Add(model);
        }
        return items;
    }

private-ProductEntities-products=new-ProductEntities（）；
公共列表GetAllProducts（）
{
var items=新列表（）；
var记录=products.products.ToList（）；
foreach（记录中的var项目）
{
ProductItems模型=新ProductItems（）；
model.ProductID=item.ProductID；
model.ProductName=item.ProductName；
model.ImageURL=item.ImageURL；
增加（型号）；
}
退货项目；
}

这是我的索引页面视图

   <script type="text/javascript">
    $(document).ready(function () {
        $.getJSON("/api/ProductDetails", function (data) {
            $.each(data, function (idx, ele) {
                $("<img/>").attr({ src: ele.ImageURL }).appendTo("#makeMeScrollable");
                $("#makeMeScrollable").append('<h4><a href="#">' + ele.ProductName + '</a></h4>');

            });
        });
    });      

</script>

</head>
<body>
<h1>Products</h1>
<div class="rightsection_main">
    <div class="img_main" id="makeMeScrollable">            

       </div>
   </div>
  </body>


$（文档）.ready（函数（）{
$.getJSON（“/api/ProductDetails”），函数（数据）{
$.each（数据、函数（idx、ele）{
$("');
});
});
});      
产品

现在我想要的是，当用户单击图像时，我必须将图像的ID传递给ApicController中的方法，并在另一个视图中显示该图像。如何将图像传递给另一个视图，将ID传递给api/控制器操作

我必须将我的ProductID传递给此方法

  public IEnumerable<ProductItems> ProductDeatils(long ProductID)
    {
        var productdeatils = products.ExecuteStoreQuery<ProductItems>("GetProductDetail @ProductID ", new SqlParameter("@ProductID", ProductID));           
        return productdeatils ;
    }

public IEnumerable ProductDeatils（长ProductID）
{
var productdeatils=products.ExecuteStoreQuery（“GetProductDetail@ProductID”，新的SqlParameter（“@ProductID”，ProductID））；
退回产品直至到期；
}

问题是API操作不返回视图。它们用于使用JSON或XML等格式序列化模型。因此，当您说要使用ProductDeatils API操作来显示视图时，这没有多大意义。视图由返回ActionResults的标准ASP.NET MVC控制器操作返回。因此让我们看看如何设置

假设您有以下API控制器：

public class ProductsController : ApiController
{
    private ProductEntities products = new ProductEntities();
    public IEnumerable<ProductItems> Get()
    {
        return products.Products.ToList().Select(item => new ProductItems
        {
            ProductID = item.ProductId,
            ProductName = item.ProductName,
            ImageURL = item.ImageURL
        });
    }
}

public class ProductDetailsController : ApiController
{
    private ProductEntities products = new ProductEntities();
    public ProductItems Get(long id)
    {
        return products.ExecuteStoreQuery<ProductItems>(
            "GetProductDetail @ProductID ", 
            new SqlParameter("@ProductID", id)
        );
    }
}

和

~/Views/Home/ProductDetail.cshtml

：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <h1>Products</h1>
    <div class="rightsection_main">
        <div class="img_main" id="makeMeScrollable">            

        </div>
    </div>

    <script type="text/javascript" src="~/scripts/jquery-1.8.2.js"></script>
    <script type="text/javascript">
        var productsUrl = '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "products" })';
        var productDetailUrl = '@Url.Action("productdetail", "home", new { id = "__id__" })';

        $.getJSON(productsUrl, function (data) {
            $.each(data, function (idx, product) {
                $('<img/>').attr({ src: product.ImageURL }).appendTo('#makeMeScrollable');
                $('#makeMeScrollable').append(
                    $('<h4/>').html(
                        $('<a/>', {
                            href: productDetailUrl.replace('__id__', product.ProductID),
                            text: product.ProductName
                        })
                    )
                );
            });
        });
    </script>
</body>
</html>

@model ProductItems
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ProductDetail</title>
</head>
<body>
    <h4>@Html.DisplayFor(x => x.ProductName)</h4>
    <img src="@Model.ImageURL">
</body>
</html>

@model ProductItems
@{
布局=空；
}
产品详细信息
@Html.DisplayFor（x=>x.ProductName）

…我收到一个错误，提示“发生了一个或多个错误”。@var model=client.GetAsync（productDetailUrl）.Result.Content.ReadAsAsync（）.Result；在my hone controller中，是否调用了API控制器操作？有什么错误？是否尝试调试代码？…是的，调用了该操作，但在将数据返回到my Home controller中的控制器后，我发现了此错误。那么异常中有什么？是否查看了InnerException？错误消息在您的评论中发布不允许知道问题是什么。请调试您的代码并检查此异常的详细信息。您没有收到异常，但它引发了错误？这怎么可能：-）您知道如何调试代码吗？

@model ProductItems
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ProductDetail</title>
</head>
<body>
    <h4>@Html.DisplayFor(x => x.ProductName)</h4>
    <img src="@Model.ImageURL">
</body>
</html>