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

Question

I'm having problems with integrating JavaScript to ASP.NET. I want to use jQuery or even Vanilla JavaScript to do some client side operations but I'm unable to access HTML and ASP.NET Server Controls. I have tried many solution, just like using <%= element.ClientID %> but none worked for me. I'm unable to identify my fault, please help me identifiying.

:

1. RegisterClientScriptBlock
2. Include JavaScript File Directly
3. $("#<% element.ClientID %>")
4. document.getElementById("<%= element.ClientID %>") ;
5. Using HTML control instead Server & vice versa.

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

Answer 1

First check if your jQuery is loaded correctly. Open console (press F12) and type "jQuery" and enter - you should get something back. If you get "not defined" - then make sure you do load it.

Then, you should be able to access your HTML, via jQuery selector.

More info here: https://www.w3schools.com/jquery

Answer 2

Real problem was that I was using external script. ASP.NET Tag in external script does not work. For that I used jQuery pattern matching to find controls.

To find button with ID="saveButton" , I used $("[id$=saveButton]") that results in all Controls having an ID ending with saveButton .

Above works, because ASP.NET appends original ID to some random ID generated while compilation, so final html id always ends with original id given in markup.