2014-07-04 5 views
0

회사와 관련된 ID 및 쇼 제품 이미지를 허용하는 응용 프로그램이 있습니다. 2 개의 테이블이 있는데 하나는 ImagesArchive라는 oldproducts에 대한 것이고, 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 
} 
+0

: 결과를 볼 수

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

그리고 heres는 기본 HTML 이미지를 파일 시스템에서 찾은 다음 HTML에서 푸시 다운합니다. 대신에 존재하는 디렉토리를 참조 할 수 있습니까? 처리량을 많이 절약하면 IIS가 ASP.NET 파이프 라인 대신 모든 작업을 수행합니까? –

+0

또한 - 이전/새 항목에 존재하지 않는 경우 대체 이미지로 사용할 수있는 "이미지 사용 불가능"이미지가 있습니까? –

+0

그리고 jQuery를 사용하는 항목이 하나 더 많습니다. src = "api/Images/GetNew /"+ ID;'$ ("# companyImage"). attr ("src", "api/Images/GetNew/"+ ID); ' –

답변

0

다음은 API 사용 방법입니다. 당신은 서비스에서 이미지 2 개 URL을 서비스에 ID를 전달하고 반환 :

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을 검색하는 일부 기능을 정의합니다. 하나는 API가 검색을 수행하고 클릭 이벤트 하나 : 여기에 나는이 개 기능을 가지고 난 당신이 수동으로 밖으로 당기는 참조

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