模式仅在网格视图中的第一条记录上显示

Question

我有一个网格视图，我可以在其中检索任何捕获的笔记。从数据库中检索信息。

在网格视图中的每个记录上，您可以通过单击按钮(btnViewNotes)来查看注释的详细信息，并且会出现一个模态弹出窗口，其中显示了注释的所有详细信息。

问题是，模式只显示在网格视图中的第一条记录上。如果我试图查看第二个或第三个或第四个的详细信息...请注意，该模式不想打开。它刷新页面并执行回发。它甚至没有到达我的AJAX方法(请记住，这个问题只在第一次记录之后发生)。

下面是我的代码

<asp:GridView ID="gvNotes" runat="server" AutoGenerateColumns="false" class="table table-bordered table-hover" ClientIDMode="Static" DataKeyNames="NotesID">
    <Columns>
        <asp:BoundField DataField="NotesID" Visible="false" HeaderText="NotesID" SortExpression="NotesID" />
        <asp:BoundField DataField="CenterName" Visible="true" HeaderText="CenterName" SortExpression="CenterName" />
        <asp:BoundField DataField="DateModified" Visible="true" HeaderText="DateModified" SortExpression="DateModified" />
        <asp:BoundField DataField="ModifiedBy" Visible="true" HeaderText="ModifiedBy" SortExpression="ModifiedBy" />
        <asp:BoundField DataField="Category" Visible="true" HeaderText="Category" SortExpression="Category" />
        <asp:BoundField DataField="Description" Visible="true" HeaderText="Description" SortExpression="Description" />
        <asp:TemplateField HeaderText="Delete">
            <ItemTemplate>
                <span style="display: none"><%# Eval("NotesID") %></span>
                <asp:ImageButton ID="btnViewNotes" ImageUrl="~/assets/images/notes.png" data-toggle="modal" Style="width: 20px; height: 18px;" runat="server" Text="View Notes" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

模式：

<div class="modal fade" id="ViewNote">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Viewing note</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group row">
                    <label for="input-10" class="col-sm-2 col-form-label">Center Type:</label>
                    <div class="col-sm-4">
                        <asp:DropDownList ID="ddlNoteCategory" class="form-control" runat="server"></asp:DropDownList>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="input-10" class="col-sm-2 col-form-label">Time</label>
                    <div class="col-sm-4">
                        <asp:TextBox ID="txtTime" runat="server" class="form-control"></asp:TextBox>
                    </div>
                    <label for="input-11" class="col-sm-2 col-form-label">Bill:</label>
                    <div class="col-sm-4">
                        <asp:CheckBox ID="cbxBill" class="form-control" runat="server" />
                    </div>
                </div>
                <asp:TextBox ID="txtNotesID" style="" runat="server"></asp:TextBox>
                <asp:TextBox ID="txtDescription" Style="width: 100%; height: 100px;" TextMode="MultiLine" runat="server"></asp:TextBox>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-inverse-primary" data-dismiss="modal"><i class="fa fa-times"></i>Close</button>
                <asp:Button ID="btnSaveNote" class="btn btn-primary" runat="server" Text="Button" />
            </div>
        </div>
    </div>
</div>

AJAX：

$(document).ready(function () {
    $("#btnViewNotes").click(function () {
        //var NotesID = $('#txtCentreID').val();
        var NotesID = $(this).closest("tr").find('span').html();
        $.ajax({
            type: "POST",
            url: "ViewNotes.aspx/ViewNote",
            data: "{'NotesID': '" + NotesID + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response.d);
            },
            error: function (response) {
                alert(response.d);
            }
        });

        function OnSuccess(response) {
            var clb = response.d;
            $(clb).each(function () {
                $('#txtNotesID').val(this.NotesID);
                $('#ddlNoteCategory').val(this.CategoryID);
                $('#txtTime').val(this.Time);
                $('#txtDescription').val(this.Description);
                if (this.Bill === "True") {
                    $("#cbxBill").prop("checked", true);
                } else {
                    $("#cbxBill").prop("checked", false);
                }
            });
        }
        $('#ViewNote').modal('toggle');
        return false;
    });
    return false;
});

请告诉我如何在第一条记录后显示任何记录的模式。谢谢。

Answer 1

所以我设法解决了这个问题。我创建onClick按钮函数的方法应该如下所示：

$('[id*=btnViewNotes]').on("click", function () {
//Code here
});

如果有人能给我解释一下这种方式和我最初创建按钮onClick函数的方式有什么不同，我将不胜感激。

Answer 2

您应该知道的第一件事是，由runat="server"属性指示，ImageButton是一个服务器控件：

<asp:ImageButton ID="btnViewNotes" ImageUrl="~/assets/images/notes.png" data-toggle="modal" Style="width: 20px; height: 18px;" 
                 runat="server" Text="View Notes" />

此控件已呈现如下示例所示的HTML (请注意末尾的控件ID )：

<input type="image" src="/assets/images/notes.png" 
       id="ctlXX_ContentPlaceHolderName_xxxx_ctrlX_btnViewNotes"
       name="ctlXX$ContentPlaceHolderName$xxxx$ctrlX$btnViewNotes" 
       style="width: 20px; height: 18px;" data-toggle="modal" ... />

根据jQuery selector list的说法，$('#btnViewNotes')是一种ID selector，它选择ID属性与给定名称完全匹配的单个元素，因此它将搜索在您的页面中找不到的属性为id="btnViewNotes"的HTML元素。此外，您还使用了TemplateField，它为每一行重复输入标记，并且每个输入元素都需要惟一的ID。

在GridView的TemplateField中使用服务器控件时，推荐的选择元素ID的方法是使用"ends with selector"或"contains selector"，并将控件ID作为子字符串，具体取决于控件ID的位置：

以选择器结尾

$('[id$=btnViewNotes]').click(function () {
    // other stuff
});

包含选择器

$('[id*=btnViewNotes]').click(function () {
    // other stuff
});

Answer 3

您可以使用此方法打开引导模式，而不使用toggle

$('#ViewNote').modal({
    backdrop: 'static',
    keyboard: false
});