Как связать файл JavaScript с главной страницей / страницей содержимого в ASP. Net? - PullRequest
Новая
       55

Как связать файл JavaScript с главной страницей / страницей содержимого в ASP. Net?

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

Я пытаюсь напечатать значение выбранного выпадающего элемента в метку, не отправляя страницу назад с помощью JavaScript. Я попытался связать мой JavaScript файл с моей главной страницей следующим образом, но он не работает. Я включил основную и содержательную страницы, а также мои JavaScript файлы ниже. Нужно ли связывать файл JavaScript со страницей содержимого?

master page

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MyMaster.master.cs" Inherits="CodingTest2.MyMaster" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>UHCL</title>
    <script src="JavaScript.js"></script>
    <asp:ContentPlaceHolder ID="ContentPlaceHolderHead" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/uhclbanner.jpg" Height="154px" Width="950px"/>
        <br />
        <br />
        <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" StaticMenuItemStyle-ItemSpacing="50px">
            <StaticMenuItemStyle BorderColor="Green" BorderStyle="Solid" BorderWidth="2px" HorizontalPadding="20px"/>
            <Items>
                <asp:MenuItem NavigateUrl="~/ComputingStudents.aspx" Text="Computing Students" Value="Computing Students"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/CourseHistory.aspx" Text="Course History" Value="Course History"></asp:MenuItem>
            </Items>
        </asp:Menu>
        <br />
        <br />
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

content page

<%@ Page Title="" Language="C#" MasterPageFile="~/MyMaster.Master" AutoEventWireup="true" CodeBehind="CourseHistory.aspx.cs" Inherits="CodingTest2.CourseHistory" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolderHead" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <asp:DropDownList ID="DropDownStuID" runat="server" DataSourceID="SqlDataSourceStuIDs" DataTextField="stuid" DataValueField="stuid" onchange="ddlSelectID(this)">

    </asp:DropDownList>
    <br />
    <asp:SqlDataSource ID="SqlDataSourceStuIDs" runat="server" ConnectionString="<%$ ConnectionStrings:c432018fa01g1ConnectionString %>" SelectCommand="SELECT stuid from STUDENT WHERE major='CSC' OR
major='CIS';"></asp:SqlDataSource>
    <br />
    <asp:ListBox ID="ListBoxCourses" runat="server"></asp:ListBox>
    <br />
    <asp:Label ID="lblCourses" runat="server"></asp:Label>
    <br />
    <br />
    <asp:Label ID="lblErrorMessage" runat="server" ForeColor="Red"></asp:Label>
    <br />
</asp:Content>

JavaScript file 

function ddlSelectID(ddl) {
    var lbl = document.getElementById('lblCourses');
    lbl.innerText = ddl.value;
}

Ответы [ 2 ]

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

Во-первых, если вы хотите проверить, включен ли файл JS или нет, нажмите F12 в браузере и проверьте источник; Я думаю, что JS, который вы создали, был включен;

Во-вторых, в соответствии с вашим примером кода, причина, почему не работает: вы получаете ярлык по идентификатору: lblCourses, но на самом деле, идентификатор ярлыка не lblCourses во время выполнения;

У вас есть два варианта: 1. Сделать метку с режимом stati c ID на странице содержимого: 

<asp:Label ID="lblCourses" runat="server" ClientIDMode="Static"></asp:Label>

2. Или получите идентификатор Dynami c в функции js в файле js: 

var lbl = document.getElementById('<%=lblCourses.ClientID%>');
0 голосов
/ 30 апреля 2020 
function ddlSelectID() {
var ddlReport = document.getElementById("<%=DropDownStuID.ClientID%>");
    var lbl = document.getElementById('<%=lblCourses.ClientID%>');
    lbl.innerText = ddlReport.options[ddlReport.selectedIndex].value;
}

1) Эту функцию javascript необходимо вызвать на вашей странице. Обычно это происходит при нажатии кнопки на стороне клиента. (Метод OnClientClick) или связать эту функцию при изменении элементов в раскрывающемся списке. 2) Внесите изменения в вашу функцию javascript, как указано выше.

...