如何 link JavaScript 文件到 ASP .Net 中的 Master/Content 页面?
How to link JavaScript file to Master/Content Pages in ASP .Net?
我正在尝试将所选下拉项的值打印到标签中,而无需通过 JavaScript 回发页面。我尝试 link 将我的 JavaScript 文件按如下方式添加到我的母版页,但它不起作用。我在下面包含了母版页和内容页以及我的 JavaScript 文件。我是否也必须 link 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;
}
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 函数。
首先,如果要检查是否包含JS文件,请在浏览器中按F12并检查Source;我猜你创建的JS已经包含在内了;
其次,根据您的代码示例,不起作用的原因是:您通过 ID 获取标签:lblCourses
,但实际上,标签 ID 在运行时不是 lblCourses
;
你有两个选择:
1.在内容页制作静态ID方式的标签:
<asp:Label ID="lblCourses" runat="server" ClientIDMode="Static"></asp:Label>
2。或者,在js文件的js函数中获取动态ID:
var lbl = document.getElementById('<%=lblCourses.ClientID%>');
我正在尝试将所选下拉项的值打印到标签中,而无需通过 JavaScript 回发页面。我尝试 link 将我的 JavaScript 文件按如下方式添加到我的母版页,但它不起作用。我在下面包含了母版页和内容页以及我的 JavaScript 文件。我是否也必须 link 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;
}
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 函数。
首先,如果要检查是否包含JS文件,请在浏览器中按F12并检查Source;我猜你创建的JS已经包含在内了;
其次,根据您的代码示例,不起作用的原因是:您通过 ID 获取标签:lblCourses
,但实际上,标签 ID 在运行时不是 lblCourses
;
你有两个选择: 1.在内容页制作静态ID方式的标签:
<asp:Label ID="lblCourses" runat="server" ClientIDMode="Static"></asp:Label>
2。或者,在js文件的js函数中获取动态ID:
var lbl = document.getElementById('<%=lblCourses.ClientID%>');