asp.net 中的 JQGrid 未显示数据（不可见）

Question

我正在按照 this 示例进行操作，但在 gridview 中显示数据时遇到了一些困难。加载页面后，它会达到 GetData 和 returns 值。

如果在我填充数据表并查看计数 ?dtResult.Rows.Count 后立即 windows，我会得到 1001。所以我知道我有数据。但是，当我调试应用程序时，我只得到三个按钮。我在这里错过了什么？

这是 aspx 代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="TestApp.test" %>
<%@ Register Assembly="Trirand.Web" TagPrefix="trirand" Namespace="Trirand.Web.UI.WebControls" %>
<!DOCTYPE html>
<html lang="en-us">
<head id="Head1" runat="server">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/redmond/jquery-ui.css" />
<!-- The jQuery UI theme extension jqGrid needs -->
<link rel="stylesheet" type="text/css" media="screen" href="/themes/ui.jqgrid.css" />
<!-- jQuery runtime minified -->
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-2.0.3.min.js" type="text/javascript"></script>
<!-- The localization file we need, English in this case -->
<script src="/js/trirand/i18n/grid.locale-en.js" type="text/javascript"></script>
<!-- The jqGrid client-side javascript -->
<script src="/js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script>    

<style type="text/css">
    body, html { font-size: 80%; }    
</style>
</head>
<body>
<form id="form1" runat="server">
<div>       
   <div id="message">
   
   <script type="text/javascript">

       function addRow() {
           var grid = jQuery("#<%= JQGrid1.ClientID %>");
           grid.editGridRow("new", grid.addDialogOptions);
       }

       function editRow() {
           var grid = jQuery("#<%= JQGrid1.ClientID %>");
           var rowKey = grid.getGridParam("selrow");
           var editOptions = grid.getGridParam('editDialogOptions');
           if (rowKey) {
               grid.editGridRow(rowKey, editOptions);
           }
           else {
               alert("No rows are selected");
           }
       }

       function delRow() {
           var grid = jQuery("#<%= JQGrid1.ClientID %>");
           var rowKey = grid.getGridParam("selrow");
           if (rowKey) {
               grid.delGridRow(rowKey, grid.delDialogOptions);
           }
           else {
               alert("No rows are selected");
           }
       }
   </script>
   
   <input type="button" onclick="addRow()" value="Add" />
   <input type="button" onclick="editRow()" value="Edit" />
   <input type="button" onclick="delRow()" value="Delete" />
  
    <trirand:jqgrid runat="server" ID="JQGrid1"
        OnRowDeleting="JQGrid1_RowDeleting"
        OnRowAdding="JQGrid1_RowAdding"
        OnRowEditing="JQGrid1_RowEditing">         
        <Columns>
            <trirand:JQGridColumn DataField="Addressbookid" Editable="false" PrimaryKey="true" />
            <trirand:JQGridColumn DataField="ClientName" Editable="true" />
            <trirand:JQGridColumn DataField="Clientno" Editable="true" />
            <trirand:JQGridColumn DataField="IndustryName" Editable="true" />             
        </Columns>
        <ToolBarSettings ShowEditButton="true" ShowAddButton="true" ShowDeleteButton="true" />
        <EditDialogSettings CloseAfterEditing="true" Caption="The Edit Dialog"  />
        <AddDialogSettings CloseAfterAdding="true" />              

    </trirand:jqgrid>

   </div>
   <br /><br />
  
   
</div>
</form>

这是代码隐藏：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

namespace TestApp
{
public partial class test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        JQGrid1.DataSource = GetData();
        JQGrid1.DataBind();
    }
   

    protected DataTable GetData()
    {
        if (Session["EditDialogData"] == null)
        {
            // Create a new Sql Connection and set connection string accordingly
            SqlConnection sqlConnection = new SqlConnection();
            sqlConnection.ConnectionString = ConfigurationManager.ConnectionStrings["Sandbox"].ConnectionString;
            sqlConnection.Open();

            string sqlStatement = "Select * from voiceportal.dbo.clients_v";

            // Create a SqlDataAdapter to get the results as DataTable
            SqlDataAdapter sqlDataAdapter = new SqlDataAdapter(sqlStatement, sqlConnection);

            // Create a new DataTable
            DataTable dtResult = new DataTable();

            // Fill the DataTable with the result of the SQL statement
            sqlDataAdapter.Fill(dtResult);

            Session["EditDialogData"] = dtResult;

            return dtResult;
        }
        else
        {
            return Session["EditDialogData"] as DataTable;
        }
    }
}

}

关于如何解决这个问题有什么建议吗？

谢谢

Answer 1

我的两分钱。

确保网格区域设置 js 文件位于正确的位置并且能够很好地服务于您的浏览器。请参阅相关行： <script src="/js/trirand/i18n/grid.locale-en.js" type="text/javascript"></script> 使用 F12 打开您的开发人员控制台，刷新页面并在控制台上查找下载的文件和错误消息，这可以判断是否进展顺利。
仔细检查您提供的数据是否与列配置匹配。特别注意骆驼外壳。 .NET 属性以大写字母开头，它们采用驼峰式大小写，但 JSON 数据通常以小写字母开头。这也取决于您是否使用任何转换（如 NewtonSoft 等）。我不知道您的 voiceportal.dbo.clients_v table 中有什么，请指定您的架构。在您的 ASPX 代码中，Addressbookid 和 Clientno 不是驼峰式的。不应该是 AddressbookId 和 ClientNo 吗？取决于您的模式以及实际通过线路传输的内容。

asp.net 中的 JQGrid 未显示数据（不可见）

JQGrid in asp.net not displaying data (not visible)

c#

jqgrid-asp.net