jQuery 在 ASP.Net 母版页中不工作

Question

当我在普通 ASP.Net 页面中使用 jQuery DataTable 时，它工作正常。但是，当我在母版页中使用相同的相同代码时，它会给我一个错误：

Uncaught TypeError: $(...).prepend(...).dataTableExt is not a function

我正在写这两个代码是否有作品：

工作代码：

.aspx 页面代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryDataTables.aspx.cs" Inherits="Portal.WebApp.Login.JqueryDataTables" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script src="js/jquery-1.12.3.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <link href="css/dataTables.jqueryui.min.css" rel="stylesheet" />
    <link href="css/jquery-ui.css" rel="stylesheet" />

    <script type="text/javascript">
        $(function () {
            debugger;
            $("#DataGridView").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable();
            $('#DataGridView').dataTable();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="DataGridView" Font-Names="Calibri" Font-Size="11pt" AutoGenerateColumns="false" OnPreRender="DataGridView_PreRender" runat="server"></asp:GridView>
        </div>
    </form>
</body>
</html>

.cs 页面代码

using System;
using System.Data;
using System.Web.UI.WebControls;
namespace Citizen.WebApp.Login
{
    public partial class JqueryDataTables : System.Web.UI.Page
    {
        RegistrationBLL m_RegistrationBLL = new RegistrationBLL();
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = null;
            dt = m_RegistrationBLL.GetList();
            DataGridView.DataSource = dt;
            int i;

            for (i = 0; i < dt.Columns.Count; i++)
            {
                BoundField test = new BoundField();
                test.DataField = dt.Columns[i].ToString();
                test.HeaderText = dt.Columns[i].ToString();
                DataGridView.Columns.Add(test);
                test = null;
            }
            DataGridView.DataBind();
        }

        protected void DataGridView_PreRender(object sender, EventArgs e)
        {
            if (DataGridView.Rows.Count > 0)
            {

                DataGridView.UseAccessibleHeader = true;


                DataGridView.HeaderRow.TableSection = TableRowSection.TableHeader;


                DataGridView.FooterRow.TableSection = TableRowSection.TableFooter;
            }
        }

    }
}

无效代码：

.aspx 页面代码

<%@ Page Title="" Language="C#" MasterPageFile="~/portal/master/Home.Master" AutoEventWireup="true" CodeBehind="MasterDataTable.aspx.cs" Inherits="Portal.WebApp.Login.MasterDataTable" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="js/jquery-1.12.3.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/dataTables.jqueryui.min.css" rel="stylesheet" />
    <link href="css/jquery-ui.css" rel="stylesheet" />

    <script type="text/javascript" lang="javascript">
        $(function () {
            debugger;
            $("#DataGridView").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTableExt();
            $('#DataGridView').dataTableExt();
        });
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="cphbody" runat="Server">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1">
        <title></title>
    </head>
    <body>
        <div>
            <asp:GridView ID="DataGridView" Font-Names="Calibri" Font-Size="11pt" AutoGenerateColumns="false" OnPreRender="DataGridView_PreRender" runat="server"></asp:GridView>
        </div>
    </body>
    </html>
</asp:Content>

.cs 页面代码

using System;
using System.Data;
using System.Web.UI.WebControls;
namespace Citizen.WebApp.Login
{
    public partial class MasterDataTable : System.Web.UI.Page
    {
        RegistrationBLL m_RegistrationBLL = new RegistrationBLL();
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = null;
            dt = m_RegistrationBLL.GetList();
            DataGridView.DataSource = dt;
            int i;

            for (i = 0; i < dt.Columns.Count; i++)
            {
                BoundField test = new BoundField();
                test.DataField = dt.Columns[i].ToString();
                test.HeaderText = dt.Columns[i].ToString();
                DataGridView.Columns.Add(test);
                test = null;
            }
            DataGridView.DataBind();
        }

        protected void DataGridView_PreRender(object sender, EventArgs e)
        {
            if (DataGridView.Rows.Count > 0)
            {

                DataGridView.UseAccessibleHeader = true;


                DataGridView.HeaderRow.TableSection = TableRowSection.TableHeader;


                DataGridView.FooterRow.TableSection = TableRowSection.TableFooter;
            }
        }
    }
}

Answer 1

这样调用

$(function () {
    $("table[id$='DataGridView']").prepend( $("<thead></thead>").append( $(this).find("tr:first") ) ).dataTable();
});

还要确保所有引用的 js 文件都存在。这意味着您不会在控制台中收到 404 错误。

其次，我建议将列呈现信息保留在 aspx 标记中，而不是将其保留在代码中。如下图：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Customer Id" ItemStyle-Width="90" />
        <asp:BoundField DataField="" HeaderText="Name" ItemStyle-Width="120" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100" />
    </Columns>
</asp:GridView>

不要使用预渲染事件，所有这些都可以通过标记来完成。所以尽可能地利用它。在代码中只需将数据集绑定到网格视图并调用数据绑定事件。

GridView1.DataSource = ds; // here assume ds is a dataset
GridView1.DataBind();

jQuery 在 ASP.Net 母版页中不工作

jQuery not working in ASP.Net master page

asp.net

jquery

master-pages