2012-02-09 111 views
1

.netアプリケーションでJQGridを使用しています。私はオンラインのコードサンプルを使用しましたが、エラーは発生しませんが、iamが間違っているかどうかはわかりません。前にJQgridに取り組んでいた人が自分のコードを見て、間違っていることを私に見せてくれますか?私はサーバー側のコードにステップインすることができますし、エラーをスローしません。ここでJQGrid with webservice with loading data

はaspxページです:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
<title></title> 
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui-1.8.17.custom.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="ui.jqgrid.css" /> 

    <script src="jquery.js" type="text/javascript"></script> 

    <script src="grid.locale-en.js" type="text/javascript"></script> 

    <script src="jquery.dataTables.min.js" type="text/javascript"></script> 

    <script src="jquery.jqGrid.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
     jQuery(document).ready(function() { 
      jQuery("#list").jqGrid({ 
       type: "GET", 
       url: "MyService.asmx/GetRecipie", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 

       colNames: ['Inv No', 'Date', 'Amount'], 
       colModel: [ 
     { name: 'job_id', index: 'job_id', width: 55 }, 
     { name: 'job_num', index: 'job_num', width: 90 }, 
     { name: 'order_num', index: 'order_num', width: 80, align: 'right'}], 
       pager: jQuery('#pager'), 
       rowNum: 10, 
       rowList: [10, 20, 30], 
       sortname: 'id', 
       sortorder: "desc", 
       viewrecords: true, 
       imgpath: 'themes/basic/images', 
       caption: 'My first grid', 
       loadError: Error 

      }); 
     }); 

     function Error(xhr, st, err) { 
      jQuery("#rsperror").html("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText); 
     } 


    </script> 

</head> 
<body> 
    <table id="list" class="scroll"> 
    </table> 
    <div id="pager" class="scroll" style="text-align: center;"> 
    </div> 
</body> 
</html> 

私のWebサービス

 [WebMethod] 
     [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = false)] 
     public string GetRecipie() 
     { 
      string strQuery = "SELECT * FROM job where job_id like '%2345%'"; 
      DataTable dtRecipie = null; 
      Recipie objRecipie = default(Recipie); 
      SqlConnection con = new SqlConnection("Integrated Security=SSPI;Persist Security Info=False;DATABASE=TESTDB;Data Source=SQL;"); 
      using (con) 
      { 
       con.Open(); 
       using (SqlDataAdapter sqlAdapter = new SqlDataAdapter(strQuery, con)) 
       { 
        dtRecipie = new DataTable(); 
        sqlAdapter.Fill(dtRecipie); 
       } 
      } 
      List<Recipie> drlist = new List<Recipie>(); 
      foreach (DataRow dr in dtRecipie.Rows) 
      { 
       objRecipie = new Recipie(); 
       objRecipie.jobId = Convert.ToInt32(dr["job_id"].ToString()); 
       objRecipie.JobNumber = dr["job_num"].ToString(); 
       objRecipie.OrderNumber = dr["order_num"].ToString(); 
       drlist.Add(objRecipie); 
      } 

      JavaScriptSerializer jSearializer = new JavaScriptSerializer(); 
      return jSearializer.Serialize(drlist); 

     } 
    } 


    public class Recipie 
    { 
     public int jobId; 
     public string JobNumber; 
     public string OrderNumber; 
    } 


} 
+0

UseHttpGet = falseですが、POSTではなくGETを使用してAjax呼び出しが行われるためですか? – Tuan

+0

@Tuan:一般的にはあなたが正しいですが、HTTP GETは 'type:" GET "'のためではなく、パラメータの正しい名前が 'mtype:" POST "でなければなりません。パラメータ 'dataType:" json "'も間違っています(間違った場合)。したがって、デフォルトの 'datatype:" xml "はjqGridによって使用されます。公開されたコードには非常に多くのエラーが含まれているため、リストが長すぎます。例えば、 'drlist'オブジェクト(' List ')をウェブメソッドから返す代わりに、' JavaScriptSerializer.Serialize'を手動で呼び出します。結果の文字列はもう一度JSONエンコードされます。私は続けることができます... – Oleg

+0

@ user1098028:[回答](http://stackoverflow.com/a/3161542/315935)を読むことをお勧めします。 [Here](http://stackoverflow.com/a/4031603/315935)と[こちら]からダウンロード可能なデモプロジェクトへのリンクがあります。私はあなたの環境にデモを変更できることを願っています。 – Oleg

答えて

0

1グリッドをロードするためにgqueryを呼び出す - あなたはせずに、あなたのエンティティのリストをシリアル化していますjqgridが理解できる形式に変更します。

{ 
    "page":"1", 
    "total":4, 
    "records":"10", 

    "rows":[ 
     {"id":"1","cell":["Prabir","Shrestha"]}, 
     {"id":"2","cell":["Bill","Gates"]}, 
     {"id":"3","cell":["Steve","Ballmer"]} 
    ] 
} 

から:http://blog.prabir.me/post/Using-jqGrid-with-ASPNET-Web-Forms-e28093-Part-I.aspx

あなたはこのようになりますJSONを返す必要があります。このサイトでは、データをこの形式に変換する方法について説明しています。

UseHttpGet = falseを使用しているWebサービスには、type: "GET"でjqgridを初期化している間に、もう1つのことがあります。それらのうちの1つを変更する必要があります。