Geek asks and answers

Client-side JavaScript and / or JavaScript code using jquery calling the WCF service to get the System.IO.Stream collection?

I am creating a WCF service that will be consumed by simple client-side JavaScript and some client-side jQuery JavaScript as well.

1) How can I implement simple client-side JavaScript so that it invokes the WCF service so that it retrieves the System.IO.Stream compilation immediately? Moreover, how will I repeat through the collection obtained on the simple side of JavaScript in such a way that I can link each of the System.IO.Stream objects in the collection to an HTML image element?

2) Is it possible to implement JavaScript code that uses jquery so that it will reference the WCF service in such a way that it restores the System.IO.Stream assembly immediately? Moreover, how would I iterate over a collection obtained using JavaScript that uses jQuery in such a way that I can link each of the System.IO.Stream Objects in the collection for an HTML image element?

 /*********Start of Excerpt from the Interface Code of a WCF Service

 Contract*****************/

 using System;

 using System.Collections.Generic;

 using System.Linq;

 using System.Runtime.Serialization;

 using System.ServiceModel;

 using System.ServiceModel.Activation;

 using System.Text;

 using System.ServiceModel.Web;

 using System.IO;

 using ConsoleForWCFServiceTutorial.PerlsDataContracts;

 using ConsoleForWCFServiceTutorial.DataAccessObjectsDAO;


 namespace ConsoleForWCFServiceTutorial

 {

    [ServiceContract(Namespace =

 "http://ConsoleForWCFServiceTutorial.CarService")]

    public interface ICarService

    {

   [OperationContract]

   [WebInvoke(Method = "GET",

                   BodyStyle = WebMessageBodyStyle.WrappedRequest)]

        Stream[] getImagesList();




    }

 }

 /*********End of Excerpt from the Interface Code of a WCF Service
 Contract*****************/




 /*********Start of Excerpt of the code associated with the Class that
 implements the WCF Service Contract*****************/

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Collections;
 using System.ServiceModel.Activation;
 using System.Configuration;
 using System.Data;
 using System.IO;
 using System.ComponentModel;
 using ConsoleForWCFServiceTutorial.PerlsDataContracts;
 using ConsoleForWCFServiceTutorial.DataAccessObjectsDAO;


 namespace ConsoleForWCFServiceTutorial
 {
      [AspNetCompatibilityRequirements(RequirementsMode =
      AspNetCompatibilityRequirementsMode.NotAllowed)]
 class CarService : ICarService
 {

       public Stream[] getImagesList()
        {


            List<Stream> myImagesList = new List<Stream>();

            string fileName = Path.Combine("BMWpicture.jpg");

            FileStream fileStream =
              new FileStream(fileName, FileMode.Open, FileAccess.Read);
            // Set the content type as image/ jpeg
            System.ServiceModel.Web.WebOperationContext.
              Current.OutgoingResponse.ContentType = "image/jpeg";


            myImagesList.Add(fileStream);

            string fileName2 = Path.Combine("MercedesBenzpicture.jpg");

            FileStream fileStream2 =
              new FileStream(fileName2, FileMode.Open, FileAccess.Read);
            // Set the content type as image/ jpeg
            System.ServiceModel.Web.WebOperationContext.
              Current.OutgoingResponse.ContentType = "image/jpeg";


            myImagesList.Add(fileStream2);

            return myImagesList.ToArray();
        }
    }
 }
 /*********End of Excerpt of the code associated with the Class that
 implements the WCF Service Contract*****************/


 <!--Start of Excerpt of the plain JavaScript client code that
 invokes one of the Methods in the WCF Service
 Contract-->

 <script type="text/javascript">

 function getImagesList2() {

   var listOfStreams =
 'http://localhost:8732/Design_Time_Addresses/ConsoleForWCFServiceTutorial/carService     /getImagesList'

   document.getElementById("image11").onload = function () {
     }; // img.onload = function()


      document.getElementById("image11").src = listOfStreams[0];



   document.getElementById("image12").onload = function () {
        }; // img.onload = function()


      document.getElementById("image12").src = listOfStreams[1];

 }
 </script>
 <!--End of Excerpt of the plain JavaScript client code that
 invokes one of the Methods in the WCF Service
 Contract-->

 <!--Start of Excerpt of the HTML code that is affected by the
 JavaScript client and WCF Service interaction-->
 <body>
    <form id="form1" runat="server">
    <div>


                 <img src=""  id="image11" alt="Smiley face" />     

               <img src=""  id="image12" alt="Smiley face" />


         <br />
         <a class="large blue button" id="A7"
 onClick="getImagesList2()">getImagesList2</a>


        </div>
    </form>
 </body>
 </html>

 <!--End of Excerpt of the HTML code that is affected by the
 JavaScript client and WCF Service interaction-->

1) How can I implement simple client-side JavaScript so that it invokes the WCF service so that it retrieves the System.IO.Stream compilation immediately? Moreover, how will I repeat through the collection obtained on the simple side of JavaScript in such a way that I can link each of the System.IO.Stream objects in the collection to an HTML image element?

2) Is it possible to implement JavaScript code that uses jquery so that it will reference the WCF service in such a way that it restores the System.IO.Stream assembly immediately? Moreover, how would I iterate over a collection obtained using JavaScript that uses jQuery in such a way that I can link each of the System.IO.Stream Objects in the collection for an HTML image element?

+3
source share
1

WCF, CORS, Base64String ( , ). → fooobar.com/questions/117389/... img , , jquery. , ( , , Base64Strings), WCF, ( , WCF jquery).

<?xml version="1.0"?>


<system.web>
    <compilation debug="true" targetFramework="4.0" />
</system.web>
<system.serviceModel>
    <services>
        <service  name="EmployeeService.EmployeeSearchService/*Your service name replaces EmployeeService.EmployeeSearchService */" behaviorConfiguration="DefaultServiceBehavior">
            <endpoint binding="webHttpBinding" contract="EmployeeService.IEmployeeSearchService"      behaviorConfiguration="DefaultEPBehavior" />
        </service>
    </services>
    <behaviors>
        <endpointBehaviors>
            <behavior name="DefaultEPBehavior">
                <webHttp />
            </behavior>
        </endpointBehaviors>
        <serviceBehaviors>
            <behavior name="DefaultServiceBehavior">
                <serviceMetadata httpGetEnabled="true" />
                <serviceDebug includeExceptionDetailInFaults="true" />
            </behavior>
        </serviceBehaviors>
    </behaviors>
    <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
</system.serviceModel>
<system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
    <!--
    To browse web app root directory during debugging, set the value below to true.
    Set to false before deployment to avoid disclosing web app folder information.
  -->
    <directoryBrowse enabled="true"/>
</system.webServer>
<connectionStrings>
    <add name="myConnString" connectionString=""/>
</connectionStrings>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
using System.Web.Script.Serialization;

namespace EmployeeService
{
    // NOTE: You can use the "Rename" command on the "Refactor" menu to change the             class name "Service1" in code, svc and config file together.
// NOTE: In order to launch WCF Test Client for testing this service, please select Service1.svc or Service1.svc.cs at the Solution Explorer and start debugging.
public class EmployeeSearchService : IEmployeeSearchService
{
    public List<Customer> GetAllImages()
    {
        WebOperationContext.Current.OutgoingResponse.Headers.Add(
            "Access-Control-Allow-Origin", "*"); WebOperationContext.Current.OutgoingResponse.Headers.Add(
            "Access-Control-Allow-Methods", "POST"); WebOperationContext.Current.OutgoingResponse.Headers.Add(
            "Access-Control-Allow-Headers", "Content-Type, Accept");
        List<Base64String> s = new List<Base64String>();
        //DO YOUR IMAGE CONVERSION TO BYTE ARRAY AND THEN TO BASE64STRINGS AND ADD THEM TO THE LIST ABOVE
        var jsonData = new
        {
            totalImages = s.Count,
            Images = (
                from row in s
                select new
                {
                    imgString = row
                }
         ).ToArray()
        };
        return (new JavaScriptSerializer()).Serialize(jsonData);
    }
}
}


using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
using EmployeeSearchService.BE;
namespace EmployeeService
{
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IService1" in both code and config file together.
[ServiceContract]
public interface IEmployeeSearchService
{
    [OperationContract]
    [WebInvoke(Method = "GET",
       ResponseFormat = WebMessageFormat.Json,
       RequestFormat = WebMessageFormat.Json,
       BodyStyle = WebMessageBodyStyle.Bare)]
    object GetAllImages();
}
}

jquery , , count Image, "result.Image [0]"

$.support.cors = true;
var methodName = '/GetAllImages';
var urlService = 'some http service url';
$.ajax({
    type: "GET",
    url: urlService + methodName,
    data: {},
    dataType: "Json",
    processdata: "false",
    success: function (result) {
        if (result != null) {
            images = $.parseJSON(result);
            for(var i = 0 ; i < result.totalImages ; i++)
               $('<img>').src('data:image/png;base64,' + result.Image[i]).insertAfter('#myDiv');
        }
        else { }
    },
    error: function (msg) {
        alert(msg);
    }
});

, .

+2

More articles:


All Articles