JavaScript関数呼び出しでListItem変数を含める

Question

ネストされたListView（Master/Detail）があり、この関数がサーバーサイトで静的メソッドを呼び出してフィールド更新を送信できるように、ItemTemplateの詳細をJavaScript関数で呼び出す必要があります。関数呼び出しに3つのデータ変数を含める必要があり、そのうちの2つはListItemデータから来なければなりません。 SaveAnswerへのJavaScriptコールは、 listviewに埋め込まれたリスト項目に含まれており、正しく表示されません。コードは3つの変数を渡す必要があります。ThisPAQIDは、コードビハインドからのパブリック変数です。私はおそらく、このページの隠れ変数にすることができます。 QuestionIDは、現在のlistitemの変数で、SaveAnswerメソッド呼び出しの直前のテーブルセルに含まれています。

ネストされたリストビューは素晴らしい作品、と私は、関数呼び出し（例えばSaveAnswer（1,1、this.Value）にPAQIDとQuestionID値をダミーた場合、それが正常に動作します。

<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は機能しません。

あり、それに対処する方法は2つあり、どちらかあなたがこれを処理する最も簡単な方法は、小さなスクリプトタグ

<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>