显示图像列表ASP.NET MVC

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

--Images型号

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>

----------------------控制器获取功能----------

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

来源

2014-07-04 newbieCSharp

我看你是手动拉出来自文件系统的图像，然后在HTML中将其压低。你能够引用它所在的目录吗？你会节省大量的处理工作，而IIS完成所有工作而不是ASP.NET管道？ –

另外 - 你有一个“无图像可用”的图像，如果它不存在于旧/新项目中可用作后备 –

另外一个脱离主题整理 - 你正在使用jQuery，所以使用简化句法上操纵DOM - 'document.getElementById（“companyImage”）。src =“api/Images/GetNew /”+ ID;'变成'$（“＃companyImage”）。attr（“src”，“api /图片/ GetNew /“+ ID）;' –

下面是我如何描绘你使用API。你通过ID到服务和回报2个网址，从服务的图片：

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>

来源

2014-07-08 15:21:07

显示图像列表ASP.NET MVC

回答

相关问题