Question

我所有的一些图像都是动态检索并在这样的视图中显示

这是我的控制器

    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;
    }

这是我的索引页面视图

   <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>

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

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

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

Answer 1

问题是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)
        );
    }
}

好的，现在我们需要标准的ASP.NET MVC控制器来提供视图：

public class HomeController : Controller
{
    public ActionResult Products()
    {
        return View();
    }

    public ActionResult ProductDetail(long id)
    {
        using (var client = new HttpClient())
        {
            var productDetailUrl = Url.RouteUrl(
                "DefaultApi", 
                new { httproute = "", controller = "productdetails", id = id },
                Request.Url.Scheme
            );
            var model = client
                .GetAsync(productDetailUrl)
                .Result
                .Content
                .ReadAsAsync<ProductItems>()
                .Result;
            return View(model);
        }
    }
}

以及单击链接时显示产品列表和产品详细信息的相应视图：

~/Views/Home/Products.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>

和~/Views/Home/ProductDetail.cshtml：

@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>

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

1 个答案: