ASP. NET JQuery невозможно получить доступ к серверу и HTML элементам управления - PullRequest
0 голосов
/ 09 апреля 2020

У меня проблемы с интеграцией JavaScript в ASP. NET. Я хочу использовать jQuery или даже Vanilla JavaScript для выполнения некоторых операций на стороне клиента, но я не могу получить доступ к HTML и ASP. NET элементам управления сервером. Я перепробовал много решений, как и <%= element.ClientID %>, но ни одно из них не помогло мне Я не могу определить свою ошибку, пожалуйста, помогите мне определить.

Alread Tried :

  1. RegisterClientScriptBlock
  2. Включить JavaScript Файл напрямую
  3. $("#<% element.ClientID %>")
  4. document.getElementById("<%= element.ClientID %>");
  5. Использование управления 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);
}

Ответы [ 2 ]

0 голосов
/ 11 апреля 2020

Реальная проблема заключалась в том, что я использовал внешний скрипт. ASP. NET Тег во внешнем скрипте не работает. Для этого я использовал jQuery сопоставление с образцом для поиска элементов управления.

Чтобы найти кнопку с ID="saveButton", я использовал $("[id$=saveButton]"), в результате чего все элементы управления имеют идентификатор, заканчивающийся saveButton.

Выше работает, потому что ASP. NET добавляет исходный идентификатор к некоторому случайному идентификатору, сгенерированному во время компиляции, поэтому окончательный html идентификатор всегда заканчивается исходным идентификатором, данным в разметке.

0 голосов
/ 09 апреля 2020

Сначала проверьте, правильно ли загружен ваш jQuery. Откройте консоль (нажмите F12), введите «jQuery» и введите - вы должны получить что-то обратно. Если вы получили «не определено» - тогда убедитесь, что вы действительно загрузили его.

Тогда вы сможете получить доступ к своему HTML через jQuery селектор.

Подробнее здесь : https://www.w3schools.com/jquery

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...