web-dev-qa-db-ja.com

基本的なシンプルなAsp.net + jQuery + JSONの例

Javascript/jQueryからサーバーに簡単な呼び出しを行う方法を学習しようとしています。私は学ぼうとしていましたが、これらの簡単な手順でチュートリアルを見つけることができませんでした。

2つのパラメーター（DateTimeとString）を使用してサーバーにメッセージを送信し、DateTimeを取得します。私はJSON経由でそれをしたいです。

  • サーバー内のコードはどのようになりますか（構造のみ）？
  • サーバー側で行うべき特別なことはありますか？そして、セキュリティはどうですか？
  • JQueryで呼び出しを実装するにはどうすればよいですか？
  • そして、結果をどのように処理しますか？

私はコード構造に最も興味があります。

更新

以下の答えは、私を始めるのに最適だと思いました。しかし、私は最近偶然見つけました フルASP.NET、LINQ、jQuery、JSON、Ajaxチュートリアル 。これは素晴らしい、非常に教訓的なステップバイステップです。将来この質問に出くわした他の人と共有したいと思います。

c#jqueryasp.netajaxjson
29
Adrian Carneiro

これを行うにはいくつかの方法があります。これは単一の例として役立ちます。

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 StackExchangeに投稿しました： https://codereview.stackexchange.com/questions/3208/basic-simple-asp-net-jquery-json-example

25
Daniel Allen Langdon

ここでは、jquery ajax呼び出しを使用し、サーバーサイドのwebmethodで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

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

ブログ記事：

1
Satinder singh

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としてフォーマットする必要があるため、コールバックのデータパラメーターには、サービスが返すもの（たとえば、テキスト、xml、jsonなど）が含まれます。

$ .ajax、$。get、$。postのjQueryドキュメントを参照してください： http://api.jquery.com/jQuery.ajax/ 、 http：//api.jquery .com/jQuery.get / 、 http://api.jquery.com/jQuery.post/

1
Scott Lance