我使用了一个带有反馈表单的asp datalist用于新闻网站，但javascript无法正常工作，鼠标悬停和onclick功能无效，所以这就是代码 -
<%@ Page Title="" Language="C#" MasterPageFile="~/admin.master" enableEventValidation="false" AutoEventWireup="true" CodeFile="Dtalist.aspx.cs" Inherits="Dtalist" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<style type="text/css">
.Empty
{
background: url("../Empty.gif") no-repeat right top;
}
.Empty:hover
{
background: url("../Filled.gif") no-repeat right top;
}
.Filled
{
background: url("../Filled.gif") no-repeat right top;
}
.auto-style1 {
width: 100%;
height: 814px;
}
.auto-style2 {
height: 77px;
}
.auto-style3 {
height: 142px;
}
.auto-style4 {
height: 188px;
}
.auto-style5 {
height: 200px;
}
</style>
<script type="text/javascript">
function Decide(option) {
var temp = "";
document.getElementById('lblRate').innerText = "";
if (option == 1) {
document.getElementById('Rating1').className = "Filled";
document.getElementById('Rating2').className = "Empty";
document.getElementById('Rating3').className = "Empty";
document.getElementById('Rating4').className = "Empty";
document.getElementById('Rating5').className = "Empty";
temp = "1-Poor";
}
if (option == 2) {
document.getElementById('Rating1').className = "Filled";
document.getElementById('Rating2').className = "Filled";
document.getElementById('Rating3').className = "Empty";
document.getElementById('Rating4').className = "Empty";
document.getElementById('Rating5').className = "Empty";
temp = "2-Ok";
}
if (option == 3) {
document.getElementById('Rating1').className = "Filled";
document.getElementById('Rating2').className = "Filled";
document.getElementById('Rating3').className = "Filled";
document.getElementById('Rating4').className = "Empty";
document.getElementById('Rating5').className = "Empty";
temp = "3-Fair";
}
if (option == 4) {
document.getElementById('Rating1').className = "Filled";
document.getElementById('Rating2').className = "Filled";
document.getElementById('Rating3').className = "Filled";
document.getElementById('Rating4').className = "Filled";
document.getElementById('Rating5').className = "Empty";
temp = "4-Good";
}
if (option == 5) {
document.getElementById('Rating1').className = "Filled";
document.getElementById('Rating2').className = "Filled";
document.getElementById('Rating3').className = "Filled";
document.getElementById('Rating4').className = "Filled";
document.getElementById('Rating5').className = "Filled";
temp = "5-Nice";
}
document.getElementById('lblRate').innerText = temp;
var hdnfldVariable = document.getElementById('hdnfldVariable');
hdnfldVariable.value = temp;
return false;
}
</script>
<div>
<asp:HiddenField ID="hdnfldVariable" runat="server" />
<asp:DataList ID="DataList1" runat="server" BackColor="White" BorderColor="#666666" BorderWidth="4px" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False" GridLines="Vertical" RepeatColumns="3" RepeatDirection="Horizontal" OnItemCommand="DataList1_ItemCommand" OnItemDataBound="DataList1_ItemDataBound" >
<FooterStyle BackColor="#8C4510" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False" ForeColor="#F7DFB5" />
<HeaderStyle BackColor="#333333" Font-Bold="True" Font-Italic="False" Font-Overline="False" Font-Size="XX-Large" Font-Strikeout="False" Font-Underline="False" ForeColor="White" HorizontalAlign="Center" VerticalAlign="Middle" />
<HeaderTemplate>
Latest News
</HeaderTemplate>
<ItemTemplate>
<table class="auto-style1">
<tr>
<td class="auto-style2">
<asp:Label ID="Label1" runat="server" BackColor="Silver" BorderColor="#FF9900" Font-Bold="True" Font-Size="Large" Font-Underline="True" Text='<%# Eval("news") %>'></asp:Label>
<asp:Label ID="Label3" runat="server" Text='<%# Eval("nid") %>' Visible="False"></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style3">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("photo","~/img/{0}") %>' Width="200px" Height="500px"/>
</td>
</tr>
<tr>
<td class="auto-style4">
<asp:Label ID="Label2" runat="server" BackColor="#CCCCCC" Font-Size="Medium" Text='<%# Eval("description") %>'></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style5">
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" >Please login first!</asp:TextBox>
<asp:Button ID="Button1" runat="server" BackColor="#7AC1FF" Enabled="False" ForeColor="#333333" Text="COMMENT" CommandName="Comment" />
<asp:Button BorderStyle="None" ID="Rating1" onmouseover="return Decide(1);" OnClientClick="return Decide(1);"
Height="20px" Width="20px" CssClass="Empty" runat="server" />
<asp:Button BorderStyle="None" ID="Rating2" onmouseover="return Decide(2);" OnClientClick="return Decide(2);"
Height="20px" Width="20px" CssClass="Empty" runat="server" />
<asp:Button BorderStyle="None" ID="Rating3" onmouseover="return Decide(3);" OnClientClick="return Decide(3);"
Height="20px" Width="20px" CssClass="Empty" runat="server" />
<asp:Button BorderStyle="None" ID="Rating4" onmouseover="return Decide(4);" OnClientClick="return Decide(4);"
Height="20px" Width="20px" CssClass="Empty" runat="server" />
<asp:Button BorderStyle="None" ID="Rating5" onmouseover="return Decide(5);" OnClientClick="return Decide(5);"
Height="20px" Width="20px" CssClass="Empty" runat="server" />
<br />
<br />
<asp:Label ID="lblRate" runat="server" Text=""></asp:Label>
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
</asp:Content>
后端为 -
protected void Button2_Click(object sender, EventArgs e)
{
string variable = hdnfldVariable.Value;
Response.Write("<script>alert('"+variable+"');</script>");
}
我认为引用datalist项目存在问题......
答案 0 :(得分：0)
您的javascript正试图通过ID来引用控件，例如＆＃34; lblRate＆＃34;和＆＃34;评级1＆＃34;等
问题是这些控件是Runat =＆＃34; Server＆＃34;甚至更多，它在Asp DataList中。一旦呈现到客户端的屏幕上，控件将被赋予唯一的ID，这是在DataList1_ctl00_lblRate的行上。要查看它呈现的内容，只需在呈现页面后从浏览器中查看html页面源代码。
getElementById需要从结果html中指定正确的ID，而不是在控件中的ID字段中指定的ID。这就是为什么asp控件有一个名为ClientID的属性来帮助你获得实际将在html上呈现的id。
假设您希望您的javascript与DataList中的多个元素一起使用，您应该将其更改为相对于单击的按钮，并具有其他形式的标识您要定位的控件。
一个例子是包含jQuery的使用，并使用css类相对于点击的按钮导航渲染列表
首先在行中添加一个类，以便找到它
<table class="auto-style1">
<tr class="jq-data-list-row">
<td class="auto-style2">
然后向要识别的元素添加一个类，并记住触发元素应该自行传递，以便javascript可以有一个参考点来启动
<asp:Button ID="Rating1" OnClientClick="return Decide(this, 1);" CssClass="Empty jq-rating-1-button" runat="server" />
然后可以将js修改为类似于下面的内容（我只包含足够的代码来证明这个想法）：
function Decide(button, option) {
var temp = "";
// get the closest parent with the css class of '.jq-data-list-row'
var $row = $(button).closest('.jq-data-list-row');
// find a child of the row with the css class of '.jq-rating-1-button'
var $Rating1 = $row.find('.jq-rating-1-button');
if (option == 1) {
$Rating1.addClass("Filled");
.
.
.
}
return false;
}