Question

我是asp.net网络表单的新手，我无法点击网址。 Jqgrid正在显示，但获取数据的网址没有出现。这是我的aspx内容，名为emplosyee_list.aspx。

<%@ Page Title="" Language="C#" MasterPageFile="~/main.Master" AutoEventWireup="true" CodeBehind="employee_list.aspx.cs" Inherits="CollegeManagementSystem.employee_list" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Content" runat="server">
      <div id="page-wrapper">
           <a href="employee_details.aspx" class="btn btn-default">Back</a>

            <div class="container-fluid">
               <div class="col-lg-5">

                       <div>
                           <span class="headerFont">Employee List</span>
                           <hr class="lining"/>
                       </div>


               </div>

            </div>

     </div>

    <div >
        <table id="grid">

        </table>
    </div>
    <link href="../Content/Site.css" rel="stylesheet" />
    <link href="../Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
    <link href="../Content/StyleSheet1.css" rel="stylesheet" />
    <script src="../Scripts/jquery-1.9.1.js"></script>
    <script src="../Scripts/jquery-1.9.1.min.js"></script>
    <script src="../Scripts/jquery.jqGrid.js"></script>
    <script src="../Scripts/jquery.jqGrid.min.js"></script>
    <script src="../Scripts/employeeJquery.js"></script>

</asp:Content>

这是我的employee_list.aspx.cs

{
    public partial class employee_list : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public string GetList()
        {

            var list = GetDataFromDB();
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            return serializer.Serialize(list);

        }


        public static List<Dictionary<string, object>> GetDataFromDB()
        {
            DataTable dt = new DataTable();
            using (SqlConnection con = new SqlConnection(@"Data Source=.;Initial Catalog='College Management System';Integrated Security=True"))
            {
                using (SqlCommand cmd = new SqlCommand("SELECT username, name, DOB, date, gender,address,mobile,phone,email FROM employee_details ORDER BY username", con))
                {
                    con.Open();
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    da.Fill(dt);

                    JavaScriptSerializer serializer = new JavaScriptSerializer();
                    List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
                    Dictionary<string, object> row;
                    foreach (DataRow dr in dt.Rows)
                    {
                        row = new Dictionary<string, object>();
                        foreach (DataColumn col in dt.Columns)
                        {
                            row.Add(col.ColumnName, dr[col]);
                        }
                        rows.Add(row);
                    }
                    return rows;
                }

            }
        }
    }
}

这是我的Jqgrid代码

 $("#grid").jqGrid({
                url: '/Admin/employee_list.aspx/GetList',
                datatype: "json",
                colNames: ['User', 'Name', 'DOB', 'Date',
                        'Gender', 'Address', "Mobile", 'Phone', 'Email', ],
                colModel: [
                { name: 'User', index: 'User', width: 50, stype: 'text' },
                { name: 'Name', index: 'Name', width: 150 },
                   { name: 'DOB', index: 'DOB', width: 100 },
                { name: 'Date', index: 'Date', width: 80, align: "right" },
                { name: 'Gender', index: 'Gender', width: 80, align: "right" },
                { name: 'Address', index: 'Address', width: 80, align: "right" },
                { name: 'Mobile', index: 'Mobile', width: 150, sortable: false },
                { name: 'Phone', index: 'Phone', width: 100, sortable: false },
                { name: 'Email', index: 'Email', width: 150, sortable: false }

                ],
                pager: { enable: true, limit: 5, sizes: [2, 5, 10, 20] },
                rowNum: 10,
                rowList: [10, 20, 30],
                sortname: 'id',
                viewrecords: true,
                pager :'#gridpager',
                sortorder: "desc",
                edit: true,
                add: true,
                del: true,
                search: true,
                searchtext: "Search",
                addtext: "Add",
                edittext: "Edit",
                deltext: "Delete",
                caption: "List Employee Details"
            });

网址没有提示，控制台上没有错误问题

Answer 1

我在您的代码中看到以下错误：

您应该在HTML页面上包含jQuery UI CSS。您可以使用例如<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet" />
您不能在同一页面上包含最小化和非最小化版本。因此，您应该删除对非最小化文件jquery-1.9.1.js和jquery.jqGrid.js的引用。
您应该在 i18n/grid.locale-en.js之前添加对jquery.jqGrid.min.js（或其他语言环境文件）的引用。

您应该从GetList()行JavaScriptSerializer serializer = new JavaScriptSerializer();和serializer.Serialize的电话中删除。而不是WebMethod应该返回object。 dot net框架将根据HTTP请求的contentType将对象序列化为JSON或XML。 GetList方法的代码看起来像

[WebMethod] public object GetList() { return GetDataFromDB(); }

您应该在jqGrid选项中包含以下内容：

mtype: 'POST', ajaxGridOptions: { contentType: "application/json" }, loadonce: true, jsonReader: { root: function (obj) { // after the fix of WebMethod the next line // can be reduced to // return obj.d; return typeof obj.d === "string" ? $.parseJSON(obj.d) : obj.d; }, repeatitems: false }, serializeGridData: function(postData) { return JSON.stringify(postData); }, height: "auto", gridview: true

此外，pager参数的值似乎是错误的。你没有写你使用的jqGrid版本和哪个fork （）。我不知道Guriddo jqGrid JS的具体选项，但如果在版本＆lt; = 4.7中使用免费的jqGrid或旧的jqGrid，则pager参数的值不正确。

我建议您从index删除所有colModel个媒体资源。

如何在asp.net Web表单中点击JQGrid网址？

1 个答案: