シナリオ
「ケースの表示」ページの一部として、新しいケースノートを追加する機能が必要です。
ケースノートは「外部から見る」ことができ、別の「外部」テキストを提供することができます。ModalPopupの終了後、jQueryの動作が停止する
これまで行ってきたことは、「Add note」ボタンがクリックされたときに起動するASP.NET Ajax Control ToolkitのModalPopupExtenderを使用して、新しいメモを入力するためのテキストボックスを表示することです。テキストボックスの下にCheckBoxがあり、メモが外部から利用可能な場合にユーザーがチェックすることができます。
これをチェックすると、「パブリックノートコンテンツ」ボックスが消え、「ノートコンテンツ」テキストボックスの値にあらかじめ設定されているjQueryが発生します。
パブリックテキストが入力されたら、ユーザーは[メモを保存]をクリックする必要があります。ノートがデータベースに書き込まれ、GridViewのノートがリバウンドされ、ModalPopupが非表示になります。
jQueryは、次のようにPage_Loadで一度参照されます。
ScriptManager.RegisterClientScriptInclude(Me, Me.GetType, "BensJQuery", Page.ResolveUrl("~/include/BensJquery.js"))
問題：
、ユーザが第2メモを追加したい場合があります。彼らは「ノートを追加」をもう一度クリックすると、ModalPopupExtenderに再びモーダルポップアップが表示されます。今回は、[使用可能な外部]チェックボックスをクリックすると、jQueryは起動しません。パブリックノートコンテンツ領域は表示されません。テストalert()は表示されません。
ユーザーが[キャンセル]をクリックして実際にメモを追加しない場合、同じ問題が発生します。 ModalPopupは消えますが、後でメモを追加しようとすると正しく使用できません。
マークアップ
<asp:UpdatePanel ID="updNotes" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="gvNotes" runat="server" AllowPaging="true" PageSize="10" AutoGenerateColumns="false" Width="100%">
<PagerSettings Mode="NumericFirstLast" Position="TopAndBottom" />
<Columns>
<asp:BoundField HeaderText="Date" DataField="CreationDate" />
<asp:BoundField HeaderText="Author" DataField="CreatedBy" />
<asp:BoundField HeaderText="Note" DataField="Text" ItemStyle-Width="80%" />
</Columns>
</asp:GridView>
<p><asp:Button ID="btnAddNewNote" runat="server" Text="Add note" CssClass="addButton" CausesValidation="false" /></p>
<asp:Panel ID="pnlNewNote" runat="server" GroupingText="New note" style="display: none;" CssClass="mdlPopupPanel">
<p>To add a new note, enter the note information here and click 'Add note'</p>
<scc:TextBox runat="server" ID="txtNewNoteContent" TextMode="MultiLine" CssClass="mainNoteContent input"
Rows="6" Width="75%" Label="Text" ValidationGroup="NewNote" />
<p>
<asp:CheckBox ID="chkMakeAvailExternally" CssClass="chkAvailExternally" runat="server" />
<asp:Label runat="server" Text=" Note is available to public" AssociatedControlID="chkMakeAvailExternally" />
</p>
<div class="publicNoteContent" style="display: none;">
<scc:TextBox ID="txtPublicNoteContent" runat="server" Label="Text to show to public"
TextMode="MultiLine" Rows="6" Width="75%" CssClass="publicNoteContent input" Required="false" />
</div>
<p>
<asp:Button ID="btnSaveNote" runat="server" CssClass="confirmButton" Text="Save note" ValidationGroup="NewNote" />
<asp:Button ID="btnCancelAddNote" runat="server" CssClass="cancelButton" Text="Cancel" CausesValidation="false" />
</p>
</asp:Panel>
<act:ModalPopupExtender ID="mpopNewNote" runat="server" TargetControlID="btnAddNewNote" PopupControlID="pnlNewNote" />
</ContentTemplate>
</asp:UpdatePanel>
jQueryの
$(document).ready(function() {
$(".chkAvailExternally").click(function (event) {
alert('test'); // This alert displays for the first note added but not subsequent notes
var publicNoteDiv = $(this).parent().parent().find('div.publicNoteContent');
if (publicNoteDiv.is(":visible")) {
publicNoteDiv.fadeOut();
}
else {
var existingText = publicNoteDiv.parent().find('textarea.mainNoteContent').text();
if (publicNoteDiv.find('textarea.publicNoteContent').text() == '') {
publicNoteDiv.find('textarea.publicNoteContent').text(existingText);
}
publicNoteDiv.fadeIn();
}
});
});
コードビハインド
Protected Sub btnSaveNote_Click(sender As Object, e As System.EventArgs) Handles btnSaveNote.Click
Dim CaseRef As String = Request("CaseReference")
Using ctx As New CAMSEntities
Dim c As [Case] = ctx.Cases.Single(Function(x) x.Reference = CaseRef)
c.AddNote(txtNewNoteContent.Text, chkMakeAvailExternally.Checked, txtPublicNoteContent.Text)
ctx.SaveChanges()
gvNotes.DataSource = c.Notes.OrderByDescending(Function(x) x.CreationDate).ToList
gvNotes.DataBind()
txtNewNoteContent.Text = String.Empty
chkMakeAvailExternally.Checked = False
txtPublicNoteContent.Text = String.Empty
End Using
End Sub