0

こんにちはすべて私は動的に取得してこのようなビューで表示しているいくつかの画像を持っています

これが私のコントローラーです

    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をAPIコントローラーのメソッドに渡して、その画像を別のビューに表示する必要があることです。画像を別のビューに渡すにはどうすればよいですか。私のAPI/コントローラーアクションへのID

ProductIDをこのメソッドに渡す必要があります

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

1 に答える 1

0

重要なのは、APIアクションはビューを返さないということです。これらは、JSONやXMLなどの形式を使用してモデルをシリアル化するために使用されます。したがって、ProductDeatils APIアクションを使用してビューを表示する場合、これはあまり意味がありません。ビューは、ActionResultsを返す標準のASP.NETMVCコントローラーアクションによって返されます。それでは、これを設定する方法を見てみましょう。

次の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.NETMVCコントローラーが必要になります。

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>
于 2012-10-04T15:06:06.613 に答える