ASP.NET JQuery 无法访问服务器和 HTML 控件

Posted 2023-04-12

【中文标题】ASP.NET JQuery 无法访问服务器和 HTML 控件

【英文标题】：ASP.NET JQuery unable to access Server and HTML Controls

【发布时间】：2020-07-22 11:33:46

【问题描述】：

我在将 javascript 集成到 ASP.NET 时遇到问题。我想使用 jQuery 甚至 Vanilla JavaScript 来执行一些客户端操作，但我无法访问 html 和 ASP.NET 服务器控件。我尝试了很多解决方案，就像使用 <%= element.ClientID %> 但没有一个对我有用。我无法识别我的错误，请帮助我识别。

已经尝试过：

RegisterClientScriptBlock 直接包含 JavaScript 文件 $("#<% element.ClientID %>") document.getElementById("<%= element.ClientID %>"); 使用 HTML 控件代替服务器，反之亦然。

new_quiz.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/teacher_quizes/teacher_quizes.master" AutoEventWireup="true" CodeBehind="new_quiz.aspx.cs" Inherits="onlineQuiz_bsef17m35.teacher_quizes.new_quiz" %>
<asp:Content ID="Content1" ContentPlaceHolderID="quizes" runat="server">
  <div class="form p-2">
    <div class="form-group p-1">
      <asp:Label runat="server" Text="Quiz Title"></asp:Label><br />
      <small class="text-danger">The title of your quiz</small>
      <input runat="server" type="text" maxlength="64" id="title"
        class="form-control"/>
      <asp:RequiredFieldValidator runat="server" ControlToValidate="title"
        ErrorMessage="Title is required"></asp:RequiredFieldValidator>
    </div>

    <div class="form-group p-1">
      <asp:Label runat="server" Text="Quiz Description"></asp:Label><br />
      <small class="text-danger">Please describe this quiz</small>
      <textarea runat="server" id="description" class="form-control" rows="2"
        maxlength="128">
      </textarea>
      <asp:RequiredFieldValidator runat="server" ControlToValidate="description"
        ErrorMessage="Description is required" CssClass="text-warning text-muted">
      </asp:RequiredFieldValidator>
    </div>

    <div class="form-group p-1">
      <asp:Label runat="server" Text="Maximum Marks"></asp:Label><br />
      <small class="text-danger">The maximum achiveable marks for this quiz, between 1 and 1000</small>
      <input runat="server" type="number" min="1" max="100" id="maxMarks"
        class="form-control"/>
      <asp:RangeValidator MinimumValue="1" MaximumValue="1000"
        runat="server" ControlToValidate="maxMarks" CssClass="text-warning"
        ErrorMessage="Please choose a number between 1 and 100">
      </asp:RangeValidator>
    </div>

    <div class="form-group p-1">
      <asp:Label runat="server" Text="Passing Marks"></asp:Label><br />
      <small class="text-danger">The passing marks for this quiz, between 1 and 1000 and lesser than or equal to total marks</small>
      <input runat="server" type="number" min="1" max="100" id="passingMarks"
        class="form-control"/>
      <asp:RangeValidator MinimumValue="1" MaximumValue="1000"
        runat="server" ControlToValidate="passingMarks" CssClass="text-warning"
        ErrorMessage="Please choose a number between 1 and 100">
      </asp:RangeValidator>
    </div>

    <div class="form-group p-1 card mb-2">
      <div><b runat="server" id="questions">Quesions</b></div>
      <div class="form-group">
        <asp:Label runat="server" Text="Question"></asp:Label><br />
        <asp:TextBox runat="server" ID="question" CssClass="form-control"/>

        <asp:Label runat="server" Text="Type of Question"></asp:Label><br />
        <select runat="server" id="questionType" class="form-control"
          onchange="questionTypeChange()"></select>

        <div runat="server" id="questionOptions">
          <small>Please check checkbox in front of Options to denote an option as true</small>

          <div class="form-group">
            <asp:Label runat="server" Text="Option 1"></asp:Label><br />
            <input runat="server" type="text" maxlength="64" id="questionOption1"
              class="form-control" />
            <input runat="server" type="checkbox" id="questionOption1Validity" 
              class="input-group-append"/>
            <asp:RequiredFieldValidator runat="server" ControlToValidate="questionOption1"
              ErrorMessage="Option 1 is required!" CssClass="text-danger">
            </asp:RequiredFieldValidator>
          </div>

          <div class="form-group">
            <asp:Label runat="server" Text="Option 1"></asp:Label><br />
            <input runat="server" type="text" maxlength="64" id="questionOption2"
              class="form-control" />
            <input runat="server" type="checkbox" id="questionOption2Validity" 
              class="input-group-append"/>
            <asp:RequiredFieldValidator runat="server" ControlToValidate="questionOption2"
              ErrorMessage="Option 2 is required!" CssClass="text-danger">
            </asp:RequiredFieldValidator>
          </div>
          <div class="d-flex flex-row-reverse">
            <button class="btn btn-sm btn-primary">Add another Option</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</asp:Content>

new_quiz.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

namespace onlineQuiz_bsef17m35.teacher_quizes

  public partial class new_quiz : System.Web.UI.Page
  
    protected void Page_Load(object sender, EventArgs e)
    
      if (IsPostBack)
      
        return;
      

      DatabaseEntities db = new DatabaseEntities();
      var quizes = db.getQuestionTypes().ToArray();
      questionType.DataSource = quizes;
      questionType.DataBind();

      if (questionType.Value == "Multiple Choice")
      
        questionOptions.Visible = true;
       else
      
        questionOptions.Visible = false;
      


      /* register client scripts */
      Type scriptType = this.GetType();
      String scriptName = "script";
      String scriptUrl = "./new_quiz.js";
      String scriptText = File.ReadAllText(Server.MapPath(scriptUrl));
      ClientScriptManager scriptManager = Page.ClientScript;
      if (!scriptManager.IsClientScriptBlockRegistered(scriptType, scriptName))
      
        scriptManager.RegisterClientScriptBlock(scriptType, scriptName, scriptText, true);
      
    
  

new_quiz.js

function questionTypeChange() 
  const element = document.getElementById("<%= question.ClientID %>");
  console.log(element);

【参考方案1】：

首先检查您的 jQuery 是否正确加载。 打开控制台（按 F12）并输入“jQuery”并输入 - 你应该得到一些东西。如果你得到“未定义” - 然后确保你加载它。

然后，您应该能够通过 jQuery 选择器访问您的 HTML。

更多信息在这里：https://www.w3schools.com/jquery

【讨论】：

jQuery 已正确加载。我可以使用jQuery 和$，这些都在那里。 $("button") 肯定会在页面中显示按钮。

如果它加载了，那么你应该使用 jQuery 选择器来操作你的元素。 w3schools.com/jquery/jquery_selectors.asp

JS 只能使用 *.asp 的最终结果。 JS 和 jQuery 对 asp 代码一无所知，因为 asp 运行在后端（如 php）。

【参考方案2】：

真正的问题是我使用的是外部脚本。外部脚本中的 ASP.NET 标记不起作用。为此，我使用jQuery 模式匹配来查找控件。

要查找带有ID="saveButton" 的按钮，我使用了$("[id$=saveButton]")，这会导致所有控件的ID 都以saveButton 结尾。

上述方法可行，因为 ASP.NET 将原始 ID 附加到编译时生成的一些随机 ID，所以最终的 html id 总是以标记中给出的原始 id 结尾。