如何在 asp.net 网页表单中点击 JQGrid url？

Question

我是 asp.net 网络表单的新手，我无法点击 url。 Jqgrid 正在显示，但获取数据的 url 未命中。这是我名为 emplosyee_list.aspx.

的 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"
            });

url没有命中，控制台也没有报错什么问题

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.
您应该在 jquery.jqGrid.min.js.

i18n/grid.locale-en.js

您应该从 GetList() 中删除行 JavaScriptSerializer serializer = new JavaScriptSerializer(); 和 serializer.Serialize 的调用。而不是 WebMethod 应该 return 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 的具体选项，但如果使用免费 jqGrid 或版本 <= 4.7 的旧 jqGrid，pager 参数值错误。

我建议您删除 colModel 中的所有 index 属性。

如何在 asp.net 网页表单中点击 JQGrid url？

How to hit JQGrid url in asp.net web form?

asp.net

jqgrid

jqgrid-asp.net