jsongデータをjqgridにロードしない

Question

なぜjsonデータがjqgridにロードされないのですか？私はここで

AJAX

javascriptの&を使用してJQGridでのC＃でASP.netを使用しています

は、以下の私のコードです：ファイルで

public string Alarm_Main() 
{ 
    SqlConnection con = new SqlConnection(ConnString); 
    DataTable dt = new DataTable(); 
    con.Open(); 
    string query = "select * from MST_ALARM_TYPE"; 
    SqlDataAdapter da = new SqlDataAdapter(query, con); 
    DataSet ds = new DataSet(); 
    da.Fill(ds); 
    con.Close(); 
    return JsonConvert.SerializeObject(ds.Tables[0]); 
} 

：DataService.aspxは、コードを以下に示し：

<script> 
    $(function() { 
     $("#list").jqGrid({ 
      url: 'DataService.asmx/Alarm_Main', 
      datatype: 'json', 
      mtype: 'POST', 
      serializeGridData: function (postData) { 
       alert(JSON.stringify(postData)); 
       return JSON.stringify(postData); 
      }, 
      ajaxGridOptions: { contentType: "application/json;charset=utf-8;" }, 
      loadonce: true, 
      jsonReader: { 
       page: function (obj) { return 1; }, 
       total: function (obj) { return 1; }, 
       records: function (obj) { return obj.d.length; }, 
       root: function (obj) { return obj.d; }, 
       repeatitems: false, 
       id: "0" 
      }, 
      colNames: ['', '알람코드', '등록날짜', '알람명', '등록자', ''], 
      colModel: [ 
       { name: 'myradio', width: 30, search: false, fixed: true, align: 'center', resizable: false, sortable: false, frozen: true, formatter: function (cellValue, option) { return '<input type="radio" name="radio_' + option.gid + '"/>'; }, frozen: true }, 
       { name: 'alarm_type_code', index: 'alarm_type_code', align: 'center', width: 200, frozen: true, sorttype: 'number' }, 
       { name: 'regist_date', index: 'regist_date', width: 200, editable: true, frozen: true, align: 'center', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "Y-m-d", newformat: "Y-m-d" } }, 
       { name: 'alarm_type_name', index: 'alarm_type_name', width: 200, frozen: true }, 
       { name: 'regist_name', index: 'regist_name', width: 200, frozen: true }, 
       { name: 'myac', width: 50, search: false, fixed: true, sortable: false, resizable: false, fommatter: 'action', formatoptions: {keys:true}} 
      ], 
      rowNum: 10, 
      rowList: [5, 10, 20, 50], 
      width: '100%', 
      pager: '#pager', 
      gridview: true, 
      rownumbers: false, 
      sortable: true, 
      multiselect: true, 
      scrollOffset: 0, 
      cellEdit: true, 
      sortorder: 'desc', 
      caption: '그리드 제목', 
      height: '100%', 
      shrinkToFit: true, 
      loadonce: true 
     }); 
     jQuery("#list").jqGrid('setFrozenColumns'); 
     jQuery("#list").trigger('reloadGrid'); 
     jQuery("#list").jqGrid('navGrid', '#pager', { excel: true, add: true, edit: true, view: true, del: true, search: true, refresh: true }, 
      { closeAfterAdd: true, reloadAfterSubmit: false, closeOnEscape: true }, 
      { closeAfterAdd: true, reloadAfterSubmit: false, closeOnEscape: true }, 
      { reloadAfterSubmit: false, closeOnEscape: true }, 
      { multipleSearch: true, multipleGroup: true, showQuery: true, closeOnEscape: true, onSearch: function() { } }, { closeOnEscape: true }); 
     jQuery("#list").jqGrid('bindKeys', { "onEnter": function (rowid) { alert("You enter a row with id:" + rowid) } }); 
     jQuery("#list").jqGrid('navButtonAdd', '#pager', { caption: "Excel", onClickButton: function() { jquery("#list").jqGrid('excelExport', { url: 'D:\\' }); } }); 
     jQuery("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: "cn" }); 
    }); 
</script> 

画面に何も表示されません。

何が問題になりますか？

Answer 1

以下は、jqgridでado.netを使用する方法の例ですが、これが役立つといいですね。

コントローラ」

public ActionResult GetCustomer(int rows, string sidx, string sord, int page) 
     { 
      List<Customer> _customerList = new List<Customer>(); 

      DataTable dt = new DataTable(); 
      string strConString = @"Data Source=gen5win10;Initial Catalog=AsifDb;Integrated Security=True"; 

      using (SqlConnection con = new SqlConnection(strConString)) 
      { 
       con.Open(); 
       SqlCommand cmd = new SqlCommand("Select * from Customer", con); 

       SqlDataAdapter da = new SqlDataAdapter(cmd); 
       da.SelectCommand = cmd; 
       DataSet ds = new DataSet(); 
       da.Fill(ds); 

       for (int i = 0; i < ds.Tables[0].Rows.Count; i++) 
       { 
        Customer cobj = new Customer(); 
        cobj.CustomerId = Convert.ToInt32(ds.Tables[0].Rows[i]["CustomerId"].ToString()); 
        cobj.ID = Convert.ToInt32(ds.Tables[0].Rows[i]["CustomerId"].ToString()); 
        cobj.Name = ds.Tables[0].Rows[i]["Name"].ToString(); 
        cobj.Phone = ds.Tables[0].Rows[i]["Phone"].ToString(); 
        cobj.Address = ds.Tables[0].Rows[i]["Address"].ToString(); 
        cobj.Date = Convert.ToDateTime(ds.Tables[0].Rows[i]["Date"].ToString()); 

        _customerList.Add(cobj); 
       } 

      } 

       int pageIndex = Convert.ToInt32(page) - 1; 
      int pageSize = rows; 

      var Results = _customerList.Select(
        a => new 
        { 
         a.ID, 
         a.Name, 
         a.Phone, 
         a.Address, 
         a.Date, 
        }); 

      int totalRecords = Results.Count(); 
      var totalPages = (int)Math.Ceiling((float)totalRecords/(float)rows); 
      if (sord.ToUpper() == "DESC") 
      { 
       Results = Results.OrderByDescending(s => s.ID); 
       Results = Results.Skip(pageIndex * pageSize).Take(pageSize); 
      } 
      else 
      { 
       Results = Results.OrderBy(s => s.ID); 
       Results = Results.Skip(pageIndex * pageSize).Take(pageSize); 
      } 
      var jsonData = new 
      { 
       total = totalPages, 
       page, 
       records = totalRecords, 
       rows = Results 
      }; 
      return Json(jsonData, JsonRequestBehavior.AllowGet); 

} 

HTML：

<link href="~/Scripts/jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet" /> 
<link href="~/Scripts/Guriddo_jqGrid_JS_5.2.0/css/ui.jqgrid.css" rel="stylesheet" /> 

<script src="~/Scripts/Guriddo_jqGrid_JS_5.2.0/js/jquery-1.11.0.min.js"></script> 
<script src="~/Scripts/jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.js"></script> 

<script src="~/Scripts/Guriddo_jqGrid_JS_5.2.0/js/i18n/grid.locale-en.js"></script> 
<script src="~/Scripts/Guriddo_jqGrid_JS_5.2.0/js/jquery.jqGrid.min.js"></script> 

<h2>Customers</h2> 

<br> 

<script type="text/javascript"> 
    $(document).ready(function() { 

     $('#sample').jqGrid({ 
      datatype: 'Json', 
      url: '/Customer/GetCustomer', 
      type: 'POST', 
      colNames: ['ID', 'Name', 'Phone', 'Address', 'Date'], 
      colModel: 
      [ 
       {key:true , name: 'ID', index: 'ID', editable: false }, 
       {name: 'Name', index: 'Name', editable: true ,editoptions: {maxlength: 15 },editrules:{ required: true, }, }, 
       { name: 'Phone', index: 'Phone', editable: true, editoptions: { maxlength: 15, },editrules: { required: true, },}, 
       {name: 'Address', index: 'Address', editable: true, editoptions: { maxlength: 30,}, editrules: {required: true,},}, 
       { name: 'Date', index: 'Date', editable: false, formatter: "date" }, 
      ], 
      pager: jQuery('#pager'), 
      jsonReader: { 
       root: "rows", 
       page: "page", 
       total: "total", 
       records: "record", 
       repeatitems: false, 
       Id: "0" 
      }, 
      caption: 'Sample JqGrid Table', 
      viewrecords: true, 
      rowNum: 10, 
      rowList: [10, 20, 30, 40], 
      height: '100%', 
      // multiselect: true 

     }).navGrid('#pager', { edit: true, add: true, del: true, search: true, refresh: true }, 
      { 
       // edit options 
       url: '/Customer/EditCustomer', 
       closeOnEscape: true, 
       closeAfterEdit: true, 
       recreateForm: true, 
       afterComplete: function (response) 
       { 
        if (response.responseText) { 
         alert(response.responseText); 
        } 
       } 

      }, 

      { 
       //add 
       url: '/Customer/AddCustomer', 
       closeOnEscape: true, 
       closeAfterAdd: true, 
       afterComplete: function (response) { 
        if (response.responseText) { 
         alert(response.responseText); 
        } 
       } 
      }, 
      { //Options for Delete 
       url:'/Customer/DeleteCustomer', 
       closeOnEscape: true, 
       closeAfterAdd: true, 
       afterComplete: function (response) 
       { 
        if (response.responseText) { 
         alert(response.responseText); 
        } 
       } 

      } 
      ); 

    }); 


</script> 



<table id="sample"></table> 
<div id="pager"> </div>