Простой простой пример Asp.net + jQuery + JSON

Question

Я пытаюсь узнать, как сделать простой вызов на сервер из Javascript / jQuery.Я пытался учиться и не мог найти учебник с этими простыми шагами.

Я хочу отправить сообщение на сервер с двумя параметрами (DateTime и String) и получить DateTime.Я хочу сделать это через JSON.

• Как будет выглядеть код на сервере (только структура)?
• Есть ли что-то особенное, что я должен сделать на стороне сервера?А как насчет безопасности?
• Как мне реализовать вызов в jQuery?
• А как мне обработать результат?

Меня больше всего интересует структура кода.

Обновление

Я нашел ответ ниже, чтобы начать меня.Однако недавно я наткнулся на Full ASP.NET, LINQ, jQuery, JSON, Ajax Tutorial .Это просто фантастический и очень дидактический шаг за шагом, которым я хочу поделиться со всеми, кто сталкивается с этим вопросом в будущем.

Answer 1

Есть несколько способов сделать это; это послужит примером.

Вы можете написать что-то вроде этого для своего кода 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

Далее вам нужно создать «универсальный обработчик» в вашем проекте ASP.net. В вашем универсальном обработчике используйте Request.Form, чтобы прочитать значения, переданные как json. Код вашего универсального обработчика может выглядеть примерно так:

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

Посмотрите, как это работает. Это поможет вам начать!

Обновление: Я разместил этот код на бирже CodeReview: https://codereview.stackexchange.com/questions/3208/basic-simple-asp-net-jquery-json-example

Answer 2

Здесь пример кода с использованием вызова jquery ajax и на стороне сервера веб-метод возвращает данные формата 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); }
});

Кодовое обозначение: Здесь веб-метод, который возвращает данные в формате json, т.е. список автомобилей

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

// Создан класс

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

Статья в блоге:

• jQuery Asp.net ajax JSON Пример, C # WebMethod с базой данных sql
• Вставка данных с использованием jQuery Ajax в Asp.net C # [База данных MS SQLServer]

Answer 3

Если вы используете jQuery, вы можете сделать это с помощью GET или 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
       }
);

Обратите внимание, что имя параметров в (например, dateParam, stringParam) должно совпадать с именем параметров, ожидаемых вашим методом обслуживания. Кроме того, что вашему сервису нужно будет отформатировать результат как JSON, параметр данных в обратном вызове будет содержать все, что ваш сервис отправляет обратно (например, text, xml, json и т. Д.).

См. Документацию jQuery для $ .ajax, $ .get, $ .post: http://api.jquery.com/jQuery.ajax/, http://api.jquery.com/jQuery.get/, http://api.jquery.com/jQuery.post/