Question

我有一个gridview，可在其中检索捕获的所有笔记。从数据库中检索信息。

在gridview中的每个记录上，您可以通过单击按钮（btnViewNotes）来查看注释的详细信息，并在模式弹出窗口中显示注释的所有详细信息。

问题在于模态仅显示在gridview内的第一条记录上。如果我尝试查看第二或第三或第四...的详细信息，请注意，模态不想打开。刷新页面并回发。它甚至还没有达到我的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

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

<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
});

模态仅显示在gridview的第一条记录上

3 个答案: