Question

我尝试从数据库悬停图像。因此，我有一个带有图像的Products表，可在面板上显示，并在数据库ProductVariants中具有第二个表，该表与Products id链接。因此，我想在悬停时显示productvariant的图片。请帮助我实现它。

Answer 1

您需要根据需要创建Web服务，例如Asp.net中的ASMX服务。在该服务中，您需要创建一个将使用productId的方法，然后使用productId作为外键从ProductVariants表中获取图像URL。现在，您将能够返回图像URL并使用它在图像元素中进行设置。

要调用Web服务，您需要使用jquery ajax，并且在ajax调用的响应中，您可以设置图像url。

示例：假设您有一个图像标签，

<img id='img1' src='abc.jpg' />

现在，您可以在img元素上使用jQuery鼠标悬停方法了，

$('#img1').on('mouseover', function() { });

在该鼠标悬停功能中，您可以调用jquery ajax，例如

$('#img1').on('mouseover', function() {
  $.ajax({
    type: "POST",
    url: "YourWebService.asmx/getVariantImage",
    data: { productId : id },
    success: function(url){
       $("#img1").attr('src', 'url');
       }
   });
 });

在您的Web服务中，您可以创建一个Web方法，该方法将使用productId并从ProductVariants表中返回相应的变体图片，例如

[WebMethod]
public string getVariantImage(int productId)
{
    // you can use your code logic to get the image url
    // from the ProductVariants table

   // if you are using LINQ you can do something like
   return db.ProductVariants.Single(x=> x.productId == productId).url;
}

Asp.net。从数据库更改悬停时的产品图片。

1 个答案: