Question

我有一个嵌套的ListView（主/明细），并希望在详细的ItemTemplate中调用JavaScript函数，以便此函数可以在服务器站点上调用静态方法并发布字段更新。我需要在函数调用中包含三个数据变量，其中两个必须来自ListItem数据。嵌入在内部列表视图中的列表项中包含的对 SaveAnswer 的JavaScript调用无法正确呈现。代码必须传递三个变量： ThisPAQID 是代码隐藏中的公共变量。我可以在这个页面上把它变成一个隐藏的变量。 QuestionID 是当前listitem中的变量，包含在紧接SaveAnswer方法调用之前的表格单元格中。

嵌套列表视图效果很好，如果我在函数调用中伪造PAQID和QuestionID值（例如SaveAnswer（1,1，this.Value）），它可以正常工作。

<asp:ListView ID="lstQuestions" runat="server" OnItemDataBound="lstQuestions_ItemDataBound">
  <LayoutTemplate>
    <table>
      <asp:PlaceHolder ID="ItemPlaceholder" runat="server" />
    </table>
  </LayoutTemplate>
  <ItemTemplate>
    <tr>
      <td style="width: 40px;" valign="top">
        <asp:Label ID="lblSectionCode" runat="server" Text='<%#Eval("SectionCode")%>' />.
        <asp:Label ID="lblSubsectionNumber" runat="server" Text='<%#Eval("SubsectionNumber")%>' />
      </td>
      <td colspan="2" valign="top" style="font-size: larger; font-weight: bold; text-decoration: underline;"><%#Eval("SectionName")%></td>
      <td valign="top" style="font-size: larger; font-weight: bold; text-decoration: underline;"><%#Eval("SubsectionName")%></td>
    </tr>
    <tr>
      <th align="left">Q #</th>
      <th align="left">Question</th>
      <th align="left">Answer</th>
      <th align="left">Description / Scale</th>
    </tr>
    <asp:ListView ID="lstAnswers" runat="server" DataKeyNames="QuestionID" OnItemDataBound="lstAnswers_ItemDataBound">
      <LayoutTemplate>
      <tr id="ItemPlaceholder" runat="server" />
      </LayoutTemplate>
    <ItemTemplate>
      <tr>
        <td style="vertical-align: top; font-weight: bold;"><asp:Label ID="lblQuestionID" runat="server" Text='<%#Eval("QuestionID")%>' /></td>
        <td style="vertical-align: top;"><asp:Label ID="lblQuestionText" runat="server" Text='<%#Eval("Question")%>' /></td>

旧代码：

<td style="vertical-align: top;"><asp:TextBox ID="txtAnswer" runat="server" Text='<%#Eval("Answer")%>' CssClass="DataEntry" MaxLength="3" Width="30px" onblur='SaveAnswer(<%#=Eval("ThisPAQID"%>,<%#=Eval("QuestionID"%>,this.value)' /></td>

新代码：

<td style="vertical-align: top;">
  <asp:TextBox ID="txtAnswer" runat="server" Text='<%#Eval("Answer")%>' CssClass="DataEntry" MaxLength="3" Width="30px" />
  <script type="text/javascript">
    var textBox = document.getElementById("txtAnswer");
    if (document.attachEvent) {
      document.attachEvent("onblur", textBox, function() {
        SaveAnswer('<%#Eval("ThisPAQID")%>', '<%#Eval("QuestionID")%>', window.event.target.value);
      });
    } else {
      document.addEventListener("blur", textBox, function() {
        SaveAnswer('<%#Eval("ThisPAQID")%>', '<%#Eval("QuestionID")%>', this.value);
      }, false);
    }
  </script>
</td>

其余代码：

    <td style="vertical-align: top; font-size: -1;"><%#Eval("Description")%></td>
  </tr>
  <tr>
    <td colspan="3">&nbsp;</td>
    <td style="font-size: smaller; font-style: italic;"><%# Eval("ScaleText") %><br /><br /></td>
  </tr>
</ItemTemplate>

SaveAnswer的生成代码现在如下所示：

<tr>
  <td style="vertical-align: top; font-weight: bold;">
    <span id="ctl00_body_lstQuestions_ctrl0_lstAnswers_ctrl0_lblQuestionID">1</span>
  </td>
  <td style="vertical-align: top;"><span id="ctl00_body_lstQuestions_ctrl0_lstAnswers_ctrl0_lblQuestionText">Written materials</span>
  </td>
  <td style="vertical-align: top;">
    <input name="ctl00$body$lstQuestions$ctrl0$lstAnswers$ctrl0$txtAnswer" type="text" value="2.0" maxlength="3" id="ctl00_body_lstQuestions_ctrl0_lstAnswers_ctrl0_txtAnswer" class="DataEntry" style="width:30px;" />
  <script type="text/javascript">
    var textBox = document.getElementById("txtAnswer");
    if (document.attachEvent) {
      document.attachEvent("onblur", textBox, function() {
        SaveAnswer('13242', '1', window.event.target.value);
      });
    } else {
      document.addEventListener("blur", textBox, function() {
        SaveAnswer('13242', '1', this.value);
      }, false);
    }
  </script>

  </td>
  <td style="vertical-align: top; font-size: -1;">E.g., books, reports, office notes, articles, job instructions, or signs</td>
</tr>

当我在FireFox中为此代码添加断点时，中断永远不会触发。我需要一个与此代码绑定的“OnBlur”吗？显然我不是一个JavaScript向导。

Answer 1

它不起作用，因为您的自动生成的ID是“ctl00_body_lstQuestions_ctrl0_lstAnswers_ctrl0_txtAnswer”，这是Garbage + txtAnswer。

有两种方法可以处理它，要么你想到一些聪明的东西，要么使用jQuery

var textBox = $("[id$='txtAnswer']");

处理此问题的最简单方法是使用一个小脚本标记

<script>
   var textBox = document.getElementById("txtAnswer");
   if (document.attachEvent) {
        document.attachEvent("onblur", textBox, function() {
             SaveAnswer(
                 '<%#Eval("ThisPAQID")%>', 
                 '<%#Eval("QuestionID")%>', 
                 window.event.target.value
             );
        });
   } else {
       document.addEventListener("blur", textBox, function() {
           SaveAnswer(
               '<%#Eval("ThisPAQID")%>', 
               '<%#Eval("QuestionID")%>', 
               this.value
           );
       }, false);
   }
</script>

在JavaScript函数调用中包含ListItem变量

1 个答案: