Olá pessoal sejam bem vindos a mais um artigo sobre Ajax utilizando jQuery, no artigo de hoje vou ensinar como centralizar as informações e métodos no WebService e posteriormente consumir com jQuery.
O motivo básico do porque devemos trabalhar com webservice seria organização e centralização dos métodos da nossa camada de negocio em forma de serviço.
O primeiro passo é criar um projeto do tipo web no visual Studio, criar uma pasta com nome Service e adicionar um item “WebService.asmx” coloque o nome de AjaxService.
Depois que criar deixe a linha System.Web.Script.Service.ScriptService descomentada e adicione uma nova namespace System.Web.Script.Services.
Agora vamos criar uma classe dentro do nosso serviço para auxiliar nos métodos que retorna objeto.
public class AjaxMessage
{
public AjaxMessage(string pMessage, string pDescription)
{
this.Message = pMessage;
this.Description = pDescription;
}
public string Message { get; set; }
public string Description { get; set; }
}
Vamos criar três métodos o primeiro retorna path do caminho web do nosso projeto o segundo retorna o caminho do nosso serviço o último retorna um objeto AjaxMessage.
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script,
using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class AjaxService : System.Web.Services.WebService
{
// Get path web to service
public static string GetUrl()
{
return string.Format("/Service/AjaxService.asmx",
GetHost());
}
// Get path web in application
public static string GetHost()
{
string hostUrl = HttpContext.Current.Request.Url.Scheme
+ "://" + HttpContext.Current.Request.Url.Authority
+ HttpContext.Current.Request.ApplicationPath;
if (hostUrl.Substring(hostUrl.Length - 1, 1) == "/")
{
hostUrl = hostUrl.Substring(0, hostUrl.Length - 1);
}
return hostUrl;
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet
= true, XmlSerializeString = false)]
public AjaxMessage GetMensage()
{
return new AjaxMessage("Sucesso", "Consulta realizada
com sucesso no webservice");
}
}
Vamos criar nossas funções javascript para consumir o serviço como mostra abaixo e lembre-se de adicionar no projeto biblioteca do jQuery , acrescente no começo da nossa página abaixo da tag Page a namespace do nosso serviço.
<%@ Import Namespace="AjaxWebService.Service" %>
Após importa a namespace do serviço acrescente as funções JavaScript.
<script src="Script/jquery.1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function RequestService() {
$.ajax({
type: "GET",
url: "<%= AjaxService.GetUrl() %>/GetMensage",
contentType: "application/json; charset=utf-8",
data: "{}",
dataType: "json",
success: function(data) { SucessCallback(data.d); },
error: function(data) { FailureCallBack(data); }
});
}
function SucessCallback(result) {
$('p').html('Resultado: ' + result.Message
+ ' <br /> Descrição: ' + result.Description);
}
function FailureCallBack(result) {
alert(result.status + ' ' + result.statusText);
}
</script>
Agora vamos adicionar abaixo da tag form da nossa página Default o HTML abaixo:
<a onclick="RequestService()" href="javascript:void(0)">Recuperar informações</a>
<p></p>
Agora vamos executar o projeto e clicar no link, após clicar no link se tiver sucesso na consulta do WebService vai aparecer á mensagem na tela dentro da tag “p” com as informações do nosso método.
Espero que tenham gostado até a próxima.
