יום חמישי, 6 ביוני 2013

Retrieving Images from WebApi

Part of the operator profile I need to add the operator image.
I add an image ID (key) Field to the modal.

  1: namespace MvcApplication1.Models
  2: {
  3:     public class Operator
  4:     {
  5:         public Operator()
  6:         {
  7: 
  8:         }
  9:         [Key]
 10:         public int Id { get; set; }
 11: 
 12:         private string mName;
 13: 
 14:         public string Name
 15:         {
 16:             get { return mName; }
 17:             set { mName = value; }
 18:         }
 19: 
 20:         private string mOperatorImage;
 21:          
 22:         public string  OperatorImage
 23:         {
 24:             get { return mOperatorImage; }
 25:             set { mOperatorImage = value; }
 26:         }
 27:     }
 28: }

Change the cshtml view to display the Operator Image 

  1: <body id="body" >
  2:     <div class="main-content">
  3:         <div>
  4:             <h1>All Operators</h1>
  5:             <ul id="OperatorsList"/>
  6:         </div>
  7:         <div>
  8:             <input type="button" id="CallWebApi" value="Call web api" />
  9:             <p id="product" />
 10:             <img src="http://localhost:20385/api/Images/5"//>
 11:         </div>
 12:     </div>
 13:       <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 14:        <script>
 15:          
 16:            $(document).ready(function () {
 17:                
 18:                $("#CallWebApi").on("click", function (event) {
 19:                    // Send an AJAX request
 20:                    $.getJSON("api/OperatorData/",
 21:                    function (data) {
 22:                        // On success, 'data' contains a list of products.
 23:                        $.each(data, function (key, val) {
 24:                            
 25:                            var theOperatorName = val.Name ;
 26: 
 27:                            var theOperatorImage = val.OperatorImage;
 28: 
 29:                            $('<img/>', { src: "http://localhost:20385/api/Images/" + theOperatorImage }).
 30:                                appendTo($('#OperatorsList'));
 31: 
 32:                            // Add a route for the routes list.
 33:                            $('<li/>', { text: theOperatorName })
 34:                            .appendTo($('#OperatorsList'));
 35:                        });
 36:                    });
 37:                });
 38:          });
 39:         
 40:        </script>
 41: </body>

In order to retrieve the image we are posting a request to ImagesController.


Add the Images controller :

  1: 
  2: namespace MvcApplication1.Controllers
  3: {
  4:     public class ImagesController : ApiController
  5:     {
  6:         public ImagesController()
  7:         {
  8: 
  9:         }
 10: 
 11:         // GET api/Images/5
 12:         public HttpResponseMessage Get(string id)
 13:         {
 14:             HttpResponseMessage response = new HttpResponseMessage();
 15:           
 16:             var Fs = new FileStream(@"C:\temp\zvika.png", FileMode.Open);
 17:         
 18:             Image img = Image.FromStream(Fs);
 19:             Fs.Close();
 20:             Fs.Dispose();
 21: 
 22:             MemoryStream ms = new MemoryStream();
 23:             img.Save(ms, ImageFormat.Png);
 24: 
 25: 
 26:             response.Content = new ByteArrayContent(ms.ToArray());
 27:             ms.Close();
 28:             ms.Dispose();
 29: 
 30:             response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/png");
 31:             response.StatusCode = HttpStatusCode.OK;
 32: 
 33:             return response;
 34:         }
 35:     }
 36: }

and walla


Capture25


Resources


http://www.dotnetcurry.com/ShowArticle.aspx?ID=856

ב-
תוויות: , ,

אין תגובות:

הוסף רשומת תגובה

הירשם ל- תגובות לפרסום (Atom)