显示图像列表ASP.NET MVC

Question

我有一个接受ID并显示与公司关联的产品图片的应用程序。 有2个表，其中一个用于旧产品，称为ImagesArchive，另一个用于新产品NewImages。 根据要求，一个ID在NewImages表中只能有一个产品。 因此，我能够在我的代码中成功做到这一点。 但是在ImagesArchive表中，由于我正在记录该公司的所有旧产品，因此ID和产品之间存在一对多的关系。 如何使用iframe和MVC GetOld（ID）显示列表？ 捕获错误并显示未找到图像（即产品的URL不起作用）时显示错误的最佳方法是什么？

-图像模型

 public class Images   
       {
           public int ID { get; set; }
           public string URL_FilePath { get; set; }
        }

HTML文件

   <head>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
       <script type="text/javascript">
           function Imagepreview() {
               var ID = document.getElementById("ID").value;
               document.getElementById("companyImage").src = "api/Images/GetNew/" + ID;
               old();       
           }
           function old() {
               var ID = document.getElementById("KeyID").value;
               document.getElementById("companyOldImage").src = "api/Images/GetOld/" + ID;

           }
       </script>
       <style type="text/css">
           #companyImage {
               width: 181px;
           }
           #archiveImage {
               margin-left: 17px;
           }
       </style>
   </head>
    <body ">
      <div class="jumbotron" align="center">
         <h1>Images API</h1>    
         <p class="lead"></p>        
         <div class="col-md-4" align="center">       
            <input type="text" name="ID" id="ID"/>          
             <input type="button" value="Show Image" onclick="Imagepreview()"/>
             <br>
             <br>
              <iframe src="" id="companyImage" height="200" width="200"> </iframe>
              <iframe src="" id="companyOldImage" height="200" width="200"> </iframe>
         </div>
         <div id="response">
         </div>
      </div>
   </body>
</html>

---------------------- Controller Get函数----------

 [System.Web.Mvc.AcceptVerbs("GET")]
        public HttpResponseMessage GetNew(int ID)     
        {
            Images newImages = new Images();
            GetSettingsInfo();
            HttpResponseMessage result = null;

            string sql = "select id,url_filepath from [dbo].[NewImages]  WHERE ID = @ID";
            using (SqlConnection connection = new SqlConnection(ConnectionString))
             {
                using (SqlCommand query = new SqlCommand(sql, connection))
                {
                    SqlDataReader rdr;
                    query.Parameters.Add(new SqlParameter("@ID", ID));
                    query.CommandType = CommandType.Text;
                    connection.Open();
                    query.CommandTimeout = 240;
                    rdr = query.ExecuteReader();
                    if (rdr != null)
                    {
                        while (rdr.Read())
                        {
                            newImages.ID = ConvertFromDBVal<int>(rdr["ID"]);
                            newImages.URL_FilePath = ConvertFromDBVal<string>(rdr["URL_FilePath"]);               
                        }
                    }
                }
            }
         if (newImages.KeyID != 0)
            {
                if (!(newImages.URL_FilePath.Contains("http")))
                    newImages.URL_FilePath = "http://" + newImages.URL_FilePath;
                HttpWebRequest httpWebRequest = (HttpWebRequest)HttpWebRequest.Create(newImages.FilePath);           
                HttpWebResponse httpWebReponse = (HttpWebResponse)httpWebRequest.GetResponse();
                Stream stream = httpWebReponse.GetResponseStream();
                Image img = Image.FromStream(stream);
                MemoryStream ms = new MemoryStream();
                img.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
                result = new HttpResponseMessage(HttpStatusCode.OK);
                result.Content = new ByteArrayContent(ms.ToArray());
                result.Content.Headers.ContentType = new MediaTypeHeaderValue("image/png");
            }
            else
            {
                result = new HttpResponseMessage(HttpStatusCode.NotFound);
            }
                return result;     
        }

 [System.Web.Mvc.AcceptVerbs("GET")]
        public HttpResponseMessage GetOld(int ID)     
        {
            Images newImages = new Images();
  //queries ImagesArchive table instead of ImagesTable
}

Answer 1

这是我使用API给您的图片。 您将ID传递给服务，并为服务中的图像返回2个URL：

public class ImageData
{
   public string OldUrl { get; set; }
   public string NewUrl { get; set; }
}

public class ImageController : ApiController
{
   // Gets 2 images - old and new
   public ImageData GetNew(string id)
   {
      return new ImageData
      {
         OldUrl = "/images/old/" + id,
         NewUrl = "/images/new/" + id,
      };
   }
}

现在定义一些函数以从API检索新的URL。 这里我有2个功能：1个用于API检索，一个用于click事件：

/// Gets image URLs from the API

function getImagesFor(idForImage) {
       var imageUrl = $.get('api/Image/GetNew/' + idForImage)
            .done(function(data) {

               // Retrieve 'OldUrl' and 'NewUrl' from the JSON returned

               $("#oldImage").attr('src', data.OldUrl);
               $("#newImage").attr('src', data.NewUrl);
       });
}


// Hooks up the events - 'click' extracts the info and calls the service.
$(document).ready( function() {

   $("#imageButton").click(function() {
      var imageId = $("#imageId").text();
      getImagesFor(imageId);
      return false;
   });
}

这是一个基本的HTML，可以看到结果：

<script type="text/javascript">
   <!-- As above -->
</script>

<div>
  <input type="text" id="imageId"/>
  <input type="button"  id="imageButton"/><br/>
  <iframe src="" id="oldImage"/>
  <iframe src="" id="newImage"/>
</div>

显示图像列表ASP.NET MVC

问题描述

1 个解决方案

解决方案1
0 2014-07-08 15:21:07

显示图像列表ASP.NET MVC

问题描述

1 个解决方案

解决方案1 0 2014-07-08 15:21:07

解决方案1
0 2014-07-08 15:21:07