Solución Servicio Rest WCF ( consumir desde JQuery un OperationContract de WCF)

El procedimiento de consumir un servicio WCF  ( OperationContract ) es un dolor de cabeza fuera del entorno .NET  y se vuelve complejo con todas las formas que existen en "foros" se viene complicando las cosas; vamos a hacerlo fácil...
Requisitos Jquery , Visual Studio ( estoy usando 2015).

1. Creamos una solución en blanco desde visual studio .


2 A la solución creada dar click derecho y seleccionamos add new project . y seleccionamos ASP.NET Web Application .

3 Visualizaremos un menú para elegir bajo que tipo de Plantilla de Arquitectura trabajar, elegimos Empty.

4 Nos construye el esqueleto básico para poder trabajar con el; Al proyecto (no solución) le damos click derecho y agregamos un nuevo item de tipo WCF Service (.svc).

5 Nos creara un Interface con un OperationContract por default, aqui debemos modificar el head del los metodos.
     [OperationContract]
        [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json)]
        string DoWork();

        [OperationContract]
        [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json)]
        string HolaMundo(string sParametro1,string sParametro2);

6. Ya en la clase , agregamos (aquí debes agregar tu lógica de negocio). agregamos acorde a su cuerpo de los métodos de instancia de la interfaces lo siguiente:
     public string DoWork()
        {
            return "Hola Mundo";
        }

        public string HolaMundo(string sParametro1, string sParametro2)
        {
            return string.Concat("Parametro 1:", sParametro1, " Parametro 2:", sParametro2);
        }
7. Ahora modificaremos el Web.config en el nodo <system.serviceModel> colapsamos el que se encuentra actualmente (ctrl + m + m) y lo sustituimos por el siguiente.
 <system.serviceModel>
    <behaviors>
      <serviceBehaviors>
        <behavior name="ServiceBehavior">
          <serviceMetadata httpGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="true" />
        </behavior>
      </serviceBehaviors>
      <endpointBehaviors>
        <behavior name="EndpBehavior">
          <webHttp />
        </behavior>
      </endpointBehaviors>
    </behaviors>
    <services>
      <service behaviorConfiguration="ServiceBehavior" name="WebApplication.Servicio">
        <endpoint address="" binding="webHttpBinding" contract="WebApplication.IServicio" behaviorConfiguration="EndpBehavior" />
        <!--<endpoint address="Rest" behaviorConfiguration="EndpBehavior"  binding="webHttpBinding" contract="WebApplication.IServicio"></endpoint>-->
        <endpoint address="Soap" binding="basicHttpBinding" contract="WebApplication.IServicio"></endpoint>
      </service>
    </services>
  </system.serviceModel>
Seguramente te marcara algún  error aquí , es normal por que seguramente nuestros elementos anteriores los llamamos de diferente forma, te recomiendo usas el intelissence para apoyarte a solucionar esto (ctrl + space).

8. ctrl + shift + b ; asegurarnos que ya todo este bien y después agreguemos un nuevo elemento Default.html  y le agregamos el Script dentro de las etiquetas head de un archivo de html
    var counter = 0;
        function CallMyService() {
            counter++;
            $.ajax({
                type: "POST",
                url: "http://localhost:28272/Servicio.svc/DoWork",
                //data: '{"Count": "' + counter + '"}',
                data: '{}',
                //data: '{"Count": "' + counter + '","sCountB":"' + counter + '"}',
                contentType: "application/json", // content type sent to server
                success: ServiceSucceeded,
                error: ServiceFailed
            });
        }

        function ServiceFailed(result) {
            Log('Service call failed: ' + result.status + '  ' + result.statusText);
        }

        function ServiceSucceeded(result) {
            resultObject = result.DoworkResult;
            Log("Success: " + resultObject);
            alert(resultObject);
        }
y en el body la siguiente tag html
    <input id="Button1" type="button" value="Llama servicio" onclick="CallMyService();" />


9. F5  , No olvidemos poner a Default.html como el elemento inicial a ejecutar, y ya que se ejecute y se vea en el navegador predeterminado de nuestra maquina , mandamos a llamar a nuestro boton. y eso es todo , Alguna duda puedes ponerla dentro del blog o en mi twitter @eblaher.

Alekium Salam.
 




Comentarios

  1. Este comentario ha sido eliminado por el autor.

    ResponderBorrar
  2. Melvin Cava3/27/2019

    Muy bien explicado esta soluciono me funciono, soluciono el problema que tenia al llamar el servicio de JQuery y Json. el servicio publicado desde WCF

    ResponderBorrar

Publicar un comentario

Entradas más populares de este blog

Solución [Edit 200 rows ] editar mas de 200 registros en Microsoft SQL Server Management Studio

Solución Error al crear diagramas en SQL Server

Solución Bloquear pantalla en POSTBACK con javascript y webforms Boceto