web-dev-qa-db-ja.com

asp.netでJSONとJQueryを使用してWebMethodからDataTableを返す方法は?

JSONは初めてです。 StringからWebMethodを返し、返された値をasp.net Labelコントロールに割り当てるサンプルを作成しました。

サンプルJSONが文字列を返す:

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "JSONSample.aspx/DisplayData",
            data: "{}",
            dataType: "json",
            success: function(data) {
                //alert("hi");
                $("#ctl00_MainContent_lbltxt").text(data.d);
            },
            error: function(result) {
                alert("Error");
            }
        });
    });
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">

<label id="lbltxt" runat="server"></label>
</asp:Content>

。csファイル内(文字列を返す):

[WebMethod]
    public static string DisplayData()
    {
        return DateTime.Now.ToString();
    }

これは正常に動作します。

DataTableおよびJSONを使用してJQueryにアクセスする方法

[WebMethod]
    public static DataTable DisplayData()
    {
        DataTable dt = new DataTable();
        return dt.GetData();
    }

DataTableを返して、GridViewをバインド/ JSONとJQueryを使用してDataTableの各行にアクセスReturnを使用してDataTableJSONに適切な方法を教えてください。

handlersを使用したサンプルとWebMethodを使用したサンプルをいくつか見ました。どちらを使用しますか?

他の利点とは何ですか。

感謝してください!

7
SHEKHAR SHETE

これが私が通常行う方法です。データテーブルの内容をディクショナリにロードし、それをシリアライズしてすべてが機能します。必要に応じてコードを変更できます。

    [WebMethod]
    public string GetQueryInfo()
   {
    String daresult = null;
    DataTable yourDatable = new DataTable();
    DataSet ds = new DataSet();
    ds.Tables.Add(yourDataTable);
    daresult = DataSetToJSON(ds);
    return daresult;
    }


    public string DataSetToJSON(DataSet ds)
   {

    Dictionary<string, object> dict = new Dictionary<string, object>();
   foreach (DataTable dt in ds.Tables) {
    object[] arr = new object[dt.Rows.Count + 1];

    for (int i = 0; i <= dt.Rows.Count - 1; i++) {
        arr[i] = dt.Rows[i].ItemArray;
    }

    dict.Add(dt.TableName, arr);
    }

   JavaScriptSerializer json = new JavaScriptSerializer();
    return json.Serialize(dict);
   }

aspxで

                     $.ajax({
                         type: "POST",
                         url: 'Webservices/GetQueryInfo',
                         data: {},
                         contentType: "application/json; charset=utf-8",
                         dataType: 'json',

                         success: function (data) {
                          var objdata = $.parseJSON(data.d);
                       // now iterate through this object's contents and load your gridview
                          }

                     });

Javaスクリプトまたはjqueryを使用してグリッドビューをロードする方法については、多くのチュートリアルがあります。これにより、少なくとも開始点がわかります。素敵な例を見つけることができます こちら .gridviewでCRUD操作を行うには、リンク here を参照してください

13
Abide Masaraure