ASP.NET页面调用Web用户控件时JS/jQuery函数未执行问题

将Web用户控件UC_ProjectsDashboard.ascx引入index.aspx页面后，控件的C# Page_Load事件可正常执行，但控件内的jQuery函数GET_ITO_PROJECTS_DASHBOARD未触发运行。

相关代码 #

index.aspx #

<%@ Page Title="" Language="C#" MasterPageFile="~/WebPages/main.Master" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="ITO.WebPages.index" EnableEventValidation="false" %>

<%@ Register Src="~/WebUserControls/UC_ProjectsDashboard.ascx" TagPrefix="uc2" TagName="UC_ProjectsDashboard" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <uc2:UC_ProjectsDashboard runat="server" />
</asp:Content>

用户控件UC_ProjectsDashboard.ascx #

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UC_ProjectsDashboard.ascx.cs" Inherits="ITO.WebUserControls.UC_ProjectsDashboard" %>
<div class="row">
    <div class="col-12">
        <div id="card-main_Index" class="card customCard card-outline-primary">
   
                     <div class="card-header">
                <h4 class="m-b-0 text-white card-title text-center">
                    <label id="lblTitle" runat="server" clientidmode="Static">Project Dashboard</label>
                </h4>
            </div>
             
                        <div class="card-body">                          
                              
                              
                               <div class="row" style="margin-top:10px;">
                             
                                <div class="col-12 col-lg-1">
                        
                                       </div>
                                   <div class="col-12 col-lg-5 gvResultmeeting-container hide">
                                    <div class="form-group">
                                          <div class="card card-outline-success">
                                            <div class="card-header" style="background-color: #808080; font-size: 18px; padding: .75rem 1.25rem; font-weight: 600; height: 50px; color: #ffffff;">
                                              الاجتماعات التمهيديه
                                            </div>
                                            <div class="card-body">
                                                <table id="gvResultmeeting" class="table table-striped table-hover table-bordered">
                                                    <thead>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                               
                        
                                <div class="col-12 col-lg-5  gvResultrequests-container hide">
                                    <div class="form-group">
                                        <div class="card card-outline-success">
                                            
                                                  <div class="card-header" style="background-color: #ffcc00; font-size: 18px; padding: .75rem 1.25rem; font-weight: 600; height: 50px; color: #ffffff;">
                                           الرد على الاستفسارات
                                            </div>
                                            <div class="card-body">
                                                <table id="gvResultrequests" class="table table-striped table-hover table-bordered">
                                                    <thead>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                   <div class="col-12 col-lg-1">
                      
                                       </div>
                            </div>
                              <div class="row" style="margin-top:10px;">
                             
                                
                                   <div class="col-12 col-lg-12">
                                    <div class="form-group">
                                          <div class="card card-outline-success">
                                            <div class="card-header" style="font-size: 18px; padding: .75rem 1.25rem; font-weight: 600;color: #ffffff;">
                                              المشروعات
                                            </div>
                                            <div class="card-body">
                                                <table id="gvResultprojects" class="table table-striped table-hover table-bordered">
                                                    <thead>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        
                             
                            </div>

                            </div>

                    
                
                </div>
            </div>
        </div>


<script>
    $(function () {
        debugger
        if ($("#txtP_PERM_ID").val() == "2059") {
            GET_ITO_PROJECTS_DASHBOARD();
        }
       
    });
</script>

可能的原因及解决方法 #

1. jQuery库未加载或加载顺序错误 #

• 检查母版页main.Master或index.aspx的head内容块中是否引入了jQuery库。如果没有，添加以下引用（确保在控件脚本之前加载）：

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  

  若使用本地jQuery文件，确认文件路径正确。

2. txtP_PERM_ID元素不存在或值不匹配 #

• 在浏览器控制台执行$("#txtP_PERM_ID").val()，查看元素是否存在及实际值：
  • 若返回undefined，说明页面中没有该元素，或ASP.NET生成的客户端ID与选择器不符。检查该控件是否设置了ClientIDMode="Static"，避免自动生成ID。
  • 若值不等于"2059"，则条件不满足，函数不会执行。

3. GET_ITO_PROJECTS_DASHBOARD函数未定义或加载顺序错误 #

• 确认该函数已在页面中正确定义，且定义位置在调用代码之前。打开浏览器开发者工具的控制台，查看是否有"GET_ITO_PROJECTS_DASHBOARD is not defined"的报错。
• 检查函数是否存在语法错误，导致无法被解析执行。

4. DOM就绪事件执行时机问题 #

• 当前使用$(function(){...})绑定DOM就绪事件，若母版页或页面中存在异步加载内容，可能导致控件脚本在DOM未完全就绪时执行。可以改用window.onload确保所有资源加载完成后执行：

  window.onload = function() {
      debugger
      if ($("#txtP_PERM_ID").val() == "2059") {
          GET_ITO_PROJECTS_DASHBOARD();
      }
  };
  

5. 元素选择器大小写或ID匹配问题 #

• ASP.NET有时会生成大小写混合的客户端ID，检查浏览器元素面板中实际的元素ID，调整选择器的大小写使其匹配。

内容的提问来源于stack exchange，提问作者ahmed salah abd elaziz elbarba