【问题标题】:jquery asp.net get value from GridViewjquery asp.net 从 GridView 获取值
【发布时间】:2022-01-21 00:19:14
【问题描述】:

我不确定我做错了什么。 我的网格视图如下所示:

 <ItemTemplate>
                                    
                                     <asp:HiddenField ID="hfamount" runat="server" Value='<%# Eval("inst_amt") %>'/>
                                    <asp:Label ID="Label4" runat="server" Text='<%# Bind("inst_amt") %>'></asp:Label>
                                </ItemTemplate>
<asp:TemplateField HeaderText="First Name" SortExpression="first_name">
                                <ItemTemplate>
                                     <asp:HiddenField ID="hffname" runat="server" Value='<%# Eval("first_name") %>'/>
                                    <asp:Label ID="Label7" runat="server" Text='<%# Bind("first_name") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>

我的 jquery 是这样的:

     <script type="text/javascript">
          $(function () {
              $("[id*=GridView1] [id*=lnkDelete]").click(function () {
                  if (confirm("Do you want to delete this Customer?")) {
                    var row = $(this).closest("tr");
                      var amount = parseInt(row.find("[id*=hfamount]").val());
                      var name= row.find("[id*=hffname]").val();

现在金额已正确提取,但名称未正确提取...知道为什么会这样吗?

谢谢。

【问题讨论】:

  • id="hffname" 的父级是 hr 标签吗?你试过 prevAll() 吗?
  • 很抱歉不是 jquery 专家 - 不确定您的意思是什么?

标签: jquery asp.net gridview


【解决方案1】:

我建议您只需将一个按钮放入 GV 并连接该按钮即可执行删除操作。

您可以将标准按钮或链接按钮放入网格中(没关系)。 但是,Linkbutton 很好,因为我们可以包含一个引导字形图标。

所以,让我们使用链接按钮

所以,用 GV 标记说:

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
            CssClass="table table-hover" Width="50%"
            DataKeyNames="ID">
            <Columns>
                <asp:BoundField DataField="FirstName" HeaderText="FirstName"  />
                <asp:BoundField DataField="LastName" HeaderText="LastName" />
                <asp:BoundField DataField="HotelName" HeaderText="HotelName" />
                <asp:BoundField DataField="Description" HeaderText="Description" />

                <asp:TemplateField HeaderText="Delete">
                    <ItemTemplate>
                    <asp:LinkButton ID="cmdDelete" runat="server" CssClass="btn ">
                   <span aria-hidden="true" class="glyphicon glyphicon-trash"></span>
                   Delete
                   </asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

好的,我们加载网格的代码可以是: Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadGrid()
    End If

End Sub

Sub LoadGrid()

    Using conn As New SqlConnection(My.Settings.TEST4)
        Using cmdSQL As New SqlCommand("SELECT * from tblHotels Order by HotelName ", conn)

            conn.Open()
            Dim rst As New DataTable
            rst.Load(cmdSQL.ExecuteReader)
            GridView1.DataSource = rst
            GridView1.DataBind()

        End Using
    End Using

End Sub

我们现在有了这个:

好的,让我们连接服务器端的删除事件 - 所以我们输入标记 OnClick,intel-sense 将提供为按钮创建事件的选项

例如:选择像这样创建新事件:

好的,翻到后面的代码,我们连接删除事件

Protected Sub cmdDelete_Click(sender As Object, e As EventArgs)

    Dim btn As LinkButton = sender
    Dim gRow As GridViewRow = btn.NamingContainer
    Dim PKID As Integer = GridView1.DataKeys(gRow.RowIndex).Item("ID")

    Dim strSQL As String = "DELETE FROM tblHotels WHERE ID = " & PKID

    Using conn As New SqlConnection(My.Settings.TEST4)
        Using cmdSql As New SqlCommand(strSQL, conn)
            conn.Open()
            cmdSql.ExecuteNonQuery()
        End Using
    End Using
End Sub

注意我们如何使用 DataKeys。 DataKeys 非常好,因为它意味着 GV 将行 PK,但我们不必在 GV 标记中包含 PK 行。这不仅消除了将额外的 Eval("ID") 作为隐藏的 GV 列的需要,而且还增强了安全性 - 因为我们从不向 Web UI 显示、呈现、公开或提供 PK 值 - 这也消除了任何一种对脚本的黑客攻击,甚至试图弄乱数据库 PK 行 ID。

接下来,我们需要弹出确认对话框。正如我们所知,您可以向任何平面 jane asp .net 按钮(或链接按钮)添加 OnClientClick 事件。如果该事件返回 true,则发生按钮单击 - 如果返回 false,则服务器端按钮单击不会触发/运行后面的代码。

所以,最简单的设置可能是这样的:

                <asp:TemplateField HeaderText="Delete">
                    <ItemTemplate>
                    <asp:LinkButton ID="cmdDelete" runat="server" CssClass="btn"
                     OnClick="cmdDelete_Click" 
                     OnClientClick="return mydelprompt()"   >
                   <span aria-hidden="true" class="glyphicon glyphicon-trash"></span>
                   Delete
                        
                   </asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

            <script>
                function mydelprompt() {
                    return confirm ("Delete this hotel?")
                }
            </script>

现在如果我们点击删除按钮,我们会得到:

现在,以上内容确实是您所需要的。但是我发现浏览器的内置“确认”或警报()框非常难看。 (为什么它们没有被清理干净,变得又漂亮又漂亮,这超出了我的范围!!!!)。

但是,我们可以假设我们有 jQuery,所以我建议添加 jQuery.UI,从那时起我们可以创建非常漂亮的自定义对话框,并使用它来代替 js 中的“confirm()” -看起来很业余。

那么,假设我们引入 jQuery.UI?那么,我们可以使用这个标记:

对于客户端,我们现在有这个:

  OnClientClick="return mydelprompt(this)"   >

我们的 js 函数(和我们的提示符 div)看起来像这样:

        </asp:GridView>

            <div id="mydeltext" style="display:none">
                <h4><i>Delete this hotel</i></h4>
                <h4><i>(can't be undone)</i></h4>

            </div>

            <script>
                var mydelok = false
                function mydelprompt(btn) {

                    if (mydelok) {
                        mydelok = false
                        return true
                    }

                    myDialog = $("#mydeltext")
                    myDialog.dialog({
                        title: "Confrim Hotel Delete",
                        modal: true,
                        appendTo: "form",
                        position: { my: "right top", at: "right bottom", of: btn },
                        buttons: {
                            Delete: function () {
                                myDialog.dialog('close')
                                mydelok = true
                                btn.click()
                            },
                            cancel: function () {
                                myDialog.dialog('close')
                            }
                        }
                    })
                    return false                        
                }
            </script>

现在我们得到了这个:

所以,总而言之,我们真的不需要 js 从行中“获取”或获取值,因为我们背后的 GV 代码实际上具有获取 PK 行值的能力。

但是,我想,我们仍然可能希望从 GV 行中获得一些价值 - 比如说我们想将酒店名称放在那个对话框中 - 好主意,因为用户可能会碰到他们的屏幕或触摸板 - 你有一个对话框提示,但在哪一行?

好的,在我的 GV 中,cells() 没有获得 id,但我们可以用这个标记替换酒店:

          <Columns>
                <asp:BoundField DataField="FirstName" HeaderText="FirstName"  />
                <asp:BoundField DataField="LastName" HeaderText="LastName" />
                <asp:TemplateField HeaderText="Hotel Name">
                    <ItemTemplate>
                        <asp:Label ID="txtHotel" runat="server"
                            Text='<%# Eval("HotelName") %>' >
                        </asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:BoundField DataField="Description" HeaderText="Description" />

                <asp:TemplateField HeaderText="Delete">
                    <ItemTemplate>
                    <asp:LinkButton ID="cmdDelete" runat="server" CssClass="btn"
                     OnClick="cmdDelete_Click" 
                     OnClientClick="return mydelprompt(this)"   >
                   <span aria-hidden="true" class="glyphicon glyphicon-trash"></span>
                   Delete
                        
                   </asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>

好的,我们把我们的“div”设计成这样:

           <div id="mydeltext" style="display:none">
                <h4><i>Delete this hotel (can't be undone)</i></h4>
                Hotel to delete:
                <br />
                <asp:Label ID="txtHotelDel" runat="server" Text="" ClientIDMode="Static"></asp:Label>

            </div>

            <script>
                var mydelok = false
                function mydelprompt(btn) {

                    if (mydelok) {
                        mydelok = false
                        return true
                    }
                    var txtHotel = btn.getAttribute("ID").replace("cmdDelete","txtHotel")

                    $("#txtHotelDel").text($('#' + txtHotel).text())

                    myDialog = $("#mydeltext")
                    myDialog.dialog({
                        title: "Confrim Hotel Delete",
                        modal: true,
                        width: '350',
                        appendTo: "form",
                        closeText: "",
                        position: { my: 'center', at: 'center', of: window },
                        buttons: {
                            Delete: function () {
                                myDialog.dialog('close')
                                mydelok = true
                                btn.click()
                            },
                            cancel: function () {
                                myDialog.dialog('close')
                            }
                        }
                    })
                    return false                        
                }
            </script>

既然我们通过了按钮 click (this),那么我们只需将 cmdDelete 与 txtHotel 交换(替换),我们现在就有了酒店名称。

现在的结果是这样的:

所以上面显示了我们如何从客户端代码中的给定行中提取其他值。

【讨论】:

  • 非常感谢您的详细回答,但这无济于事 - 我的问题是另一个问题:现在金额已正确获取,但名称不正确...知道为什么会这样吗?跨度>
  • 最后一个示例 js 代码确实显示了如何从给定的行单击中获取酒店名称的值 - 我在您的标记中没有看到用于删除的链接按钮(它在哪里?? ?)。如果你没有,然后放入一个标准的 asp.net 按钮,(或者也许一个 asp 链接按钮 = 任何一个都可以)。然后,我将展示如何从该点击中获取 HotelName。您可以(应该/必须)使用相同的方法。我在您的标记中没有看到网格中的按钮及其 OnClientClick 事件。如果您没有这样的按钮,那么添加它 - 真的就这么简单。我们假设您将一个按钮放入(添加)到您的网格中以使其正常工作
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-11-21
  • 2013-11-06
  • 1970-01-01
  • 2011-04-18
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多