c# - 模态仅显示在 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>

阿贾克斯：

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

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

标签： c#jqueryasp.netbootstrap-modal

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

问题描述

解决方案

推荐阅读