Ejemplo básico simple de Asp.net + jQuery + JSON

Estoy tratando de aprender a hacer una simple llamada al servidor desde Javascript / jQuery. He estado tratando de aprender y no pude encontrar un tutorial con esos simples pasos.

Deseo enviar un mensaje al servidor con dos parámetros (un DateTime y un String) y obtener un DateTime. Quiero hacer eso a través de JSON.

  • ¿Cómo se vería el código en el servidor (solo estructura)?
  • ¿Hay algo especial que deba hacer en el lado del servidor? ¿Y qué hay de la seguridad?
  • ¿Cómo implementaría la llamada en jQuery?
  • ¿Y cómo manejaría el resultado?

Estoy más interesado en la estructura del código.

Actualizar

Encontré la respuesta a continuación excelente para comenzar. Sin embargo, recientemente me encontré con ASP.NET completo, LINQ, jQuery, JSON, Ajax Tutorial . Es un paso paso a paso fantástico y muy didáctico que quiero compartir con cualquier persona que se encuentre con esta pregunta en el futuro.

Hay varias formas en que puede hacer esto; esto servirá como un solo ejemplo.

Podrías escribir algo así para tu 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 

A continuación, debe crear un “controlador genérico” en su proyecto ASP.net. En su controlador genérico, use Request.Form para leer los valores pasados ​​como json. El código para su controlador genérico podría verse más o menos así:

 [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); } 

Vea cómo funciona esto. ¡Te ayudará a empezar!

Actualización: publiqué este código en CodeReview StackExchange: https://codereview.stackexchange.com/questions/3208/basic-simple-asp-net-jquery-json-example

Si está utilizando jQuery, puede hacerlo con un GET o 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 } ); 

Tenga en cuenta que el nombre de los parámetros en (por ejemplo, dateParam, stringParam) debe ser el mismo que el nombre de los parámetros que su método de servicio espera. Además de que su servicio tendrá que formatear el resultado como JSON, el parámetro de datos en la callback contendrá todo lo que devuelva su servicio (por ejemplo, texto, xml, json, etc.).

Consulte la documentación de jQuery para $ .ajax, $ .get, $ .post: http://api.jquery.com/jQuery.ajax/ , http://api.jquery.com/jQuery.get/ , http: / /api.jquery.com/jQuery.post/

Aquí el código de muestra que utiliza la llamada jquery ajax y en el servidor webmethod devuelve datos de 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: Aquí un webmethod que está devolviendo datos de formato json, es decir, una lista de automóviles

 [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 } 

// Creé una clase

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

Artículo del blog:

  • jQuery Asp.net ajax Ejemplo JSON, C # WebMethod con base de datos sql
  • Insertar datos usando jQuery Ajax en Asp.net C # [Database MS SQLServer]