Basic Simple Asp.net + jQuery + JSON example

Question

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 muy interesado en la estructura del código.

actualización

he encontrado la respuesta por debajo de gran ayuda para empezar. Sin embargo, recientemente me encontré con Full ASP.NET, 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.

Answer 1

Hay varias maneras que usted puede hacer esto; esto servirá como un solo ejemplo.

Se podría escribir algo como esto para su 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, es necesario crear un "manipulador 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 ser algo como esto:

[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: Me envió este código en la CodeReview StackExchange: https://codereview.stackexchange.com/questions/3208/basic-simple-asp-net-jquery-json-example

Answer 2

Si está utilizando jQuery puede hacerlo con un GET o POST.

$.get ('<url to the service>', 
     { dateParam: date, stringParam: 'teststring' }, 
     function(data) { 
      // your JSON is in data 
     } 
); 

$.post ('<url to the service>', 
     { dateParam: date, stringParam: 'teststring' }, 
     function(data) { 
      // your JSON is in data 
     } 
); 

Tenga en cuenta que el nombre de los parámetros (por ejemplo dateParam, stringParam) tiene por qué ser el mismo que el nombre de los parámetros de su método de servicio está esperando. Además de que su servicio tendrá que formatear el resultado como JSON, el parámetro de datos en la devolución de llamada 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/

Answer 3

Aquí código de ejemplo, mediante una llamada jQuery Ajax y el WebMethod serverside devuelve datos 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á enviando datos formato JSON i.Lista de correo de coches

[webmethod] 
public List<Cars> getListOfCars(list<string> aData) 
{ 
    SqlDataReader dr; 
    List<Cars> carList = new List<Cars>(); 

     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 
     } 

// creado una clase

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

artículo del blog:

• jQuery Asp.net ajax JSON Example, C# WebMethod with sql database
• Insert Data Using jQuery Ajax in Asp.net C# [Database MS SQLServer]