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();" />
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.
Este comentario ha sido eliminado por el autor.
ResponderBorrarMuy 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