Exemplo Básico Simples Asp.net + jQuery + JSON

Eu estou tentando aprender como fazer uma chamada simples para o servidor de JavaScript / jQuery. Eu tenho tentado aprender e não consegui encontrar um tutorial com esses passos simples.

Eu quero enviar uma mensagem para o servidor com dois parâmetros (um DateTime e uma String) e recuperar um DateTime. Eu quero fazer isso via JSON.

  • Como seria o código no servidor (apenas estrutura)?
  • Existe algo especial que devo fazer no lado do servidor? E quanto a segurança?
  • Como eu implementaria a chamada no jQuery?
  • E como eu lidaria com o resultado?

Estou mais interessado em estrutura de código.

Atualizar

Achei a resposta abaixo ótima para começar. No entanto, recentemente deparei com o ASP.NET Completo, LINQ, jQuery, JSON, Ajax Tutorial . É apenas um passo-a-passo fantástico e muito didático que quero compartilhar com qualquer outra pessoa que se deparar com essa questão no futuro.

Existem várias maneiras de fazer isso; isso servirá como um único exemplo.

Você poderia escrever algo assim para o seu código jQuery:

urlToHandler = 'handler.ashx'; jsonData = '{ "dateStamp":"2010/01/01", "stringParam": "hello" }'; $.ajax({ url: urlToHandler, data: jsonData, dataType: 'json', type: 'POST', contentType: 'application/json', success: function(data) { setAutocompleteData(data.responseDateTime); }, error: function(data, status, jqXHR) { alert('There was an error.'); } }); // end $.ajax 

Em seguida, você precisa criar um “manipulador genérico” em seu projeto ASP.net. Em seu manipulador genérico, use Request.Form para ler os valores passados ​​como json. O código para o seu manipulador genérico poderia ser algo como isto:

 [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class handler : IHttpHandler , System.Web.SessionState.IReadOnlySessionState { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "application/json"; DateTime dateStamp = DateTime.Parse((string)Request.Form["dateStamp"]); string stringParam = (string)Request.Form["stringParam"]; // Your logic here string json = "{ \"responseDateTime\": \"hello hello there!\" }"; context.Response.Write(json); } 

Veja como isso funciona. Isso vai te ajudar a começar!

Atualização: postei este código no CodeReview StackExchange: https://codereview.stackexchange.com/questions/3208/basic-simple-asp-net-jquery-json-example

Se você estiver usando o jQuery, poderá fazê-lo com GET ou POST.

 $.get ('', { dateParam: date, stringParam: 'teststring' }, function(data) { // your JSON is in data } ); $.post ('', { dateParam: date, stringParam: 'teststring' }, function(data) { // your JSON is in data } ); 

Observe que o nome dos parâmetros em (por exemplo, dateParam, stringParam) precisa ser o mesmo que o nome dos parâmetros que seu método de serviço está esperando. Além disso, para que seu serviço precise formatar o resultado como JSON, o parâmetro data na chamada de retorno conterá qualquer coisa que seu serviço envie de volta (por exemplo, texto, xml, json, etc).

Veja a documentação do jQuery para $ .ajax, $ .get, $ .post: http://api.jquery.com/jQuery.ajax/ , http://api.jquery.com/jQuery.get/ , http: / /api.jquery.com/jQuery.post/

Aqui, o código de amostra usando a chamada ajax do jquery e no método do servidor no lado da porta retorna os dados do formato jSon. Jquery:

 $('#myButton').on('click',function(){ var aData= []; aData[0] = “2010”; aData[0]=”” var jsonData = JSON.stringify({ aData:aData}); $.ajax({ type: "POST", url: "Ajax_function/myfunction.asmx/getListOfCars", //getListOfCars is my webmethod data: jsonData, contentType: "application/json; charset=utf-8", dataType: "json", // dataType is json format success: OnSuccess, error: OnErrorCall }); function OnSuccess(response.d)) { console.log(response.d) } function OnErrorCall(response)) { console.log(error); } }); 

Codebehind: Aqui um webmethod que está retornando dados de formato json, ou seja, lista de carros

 [webmethod] public List getListOfCars(list aData) { SqlDataReader dr; List carList = new List(); using (SqlConnection con = new SqlConnection(cn.ConnectionString)) { using (SqlCommand cmd = new SqlCommand()) { cmd.CommandText = "spGetCars"; cmd.CommandType = CommandType.StoredProcedure; cmd.Connection = con; cmd.Parameters.AddWithValue("@makeYear", aData[0]); con.Open(); dr = cmd.ExecuteReader(CommandBehavior.CloseConnection); if (dr.HasRows) { while (dr.Read()) { string carname=dr[“carName”].toString(); string carrating=dr[“carRating”].toString(); string makingyear=dr[“carYear”].toString(); carList .Add(new Cars{carName=carname,carRating=carrating,carYear=makingyear}); } } } } return carList } 

// Criado uma turma

 Public class Cars { public string carName; public string carRating; public string carYear; } 

Artigo do Blog:

  • jQuery Asp.net ajax JSON Exemplo, C # WebMethod com database sql
  • Inserir dados usando jQuery Ajax em Asp.net C # [Banco de dados MS SQLServer]