方案
作为“查看案例”页面的一部分,应该是添加一个新的案例笔记的功能。
可以通过选项提供不同的“外部”文本,从而可以“从外部看到”案例说明。ModalPopup关闭后,jQuery的停止工作
我所做的是使用ASP.NET AJAX控件工具包中的ModalPopupExtender
,当点击'添加注释'按钮时触发,以显示带有文本框的面板以输入新注释。在文本框下面有一个CheckBox
,如果该注释在外部可用,用户可以打勾。
当打勾时,一些jQuery应该会触发,这会在“公共笔记内容”框中淡出并将其预先设置为“笔记内容”文本框的值。
输入公共文本后,用户应点击“保存注释”。笔记被写入数据库,笔记的GridView
被反弹并且ModalPopup隐藏。
jQuery被引用一次,如Page_Load
所示。
ScriptManager.RegisterClientScriptInclude(Me, Me.GetType, "BensJQuery", Page.ResolveUrl("~/include/BensJquery.js"))
问题:
用户可能再要添加第二个音符。他们再次单击“添加注释”,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