单击 Formview 删除按钮时显示 jquery 对话框

Question

使用 jquery 对话框，我试图在 ASP.NET formview ItemTemplate 中单击删除按钮时显示该框。

功能代码：

$(function () {
  $('#DeleteButton').click(function () {
      e.preventDefault();
      $('#dialog-confirm').dialog('open');
  });

  $("#dialog-confirm").dialog({

      autoOpen: false,
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
          "Delete all items": function () {
              $(this).dialog("close");
          },
          Cancel: function () {
              $(this).dialog("close");
          }
      }
  });
});

我想在 ItemTemplate 中单击此按钮时显示该框：

<asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False"
                CommandName="Delete" Text="Delete"/>

但是，该框未显示。

我的表单视图和 ItemTemplate

        <asp:FormView ID="FormView1" runat="server" AllowPaging="True" CellPadding="4" DataKeyNames="Car_ID" DataSourceID="SqlDataSource1" ForeColor="#333333">

        <ItemTemplate>
            Car_ID:
            <asp:Label ID="Car_IDLabel" runat="server" Text='<%# Eval("Car_ID") %>' />
            <br />
            Car_Make:
            <asp:Label ID="Car_Make_FkeyLabel" runat="server" Text='<%# Bind("Car_Make_Name") %>' />
            <br />
            Car_Model:
            <asp:Label ID="Car_ModelLabel" runat="server" Text='<%# Bind("Car_Model_Name") %>' />
            <br />
            Car_Color:
            <asp:Label ID="Car_Color_FkeyLabel" runat="server" Text='<%# Bind("Color_Name") %>' />
            <br />
            Car_Year:
            <asp:Label ID="Car_YearLabel" runat="server" Text='<%# Bind("Car_Year") %>' />
            <br />
            Car_Price:
            <asp:Label ID="Car_PriceLabel" runat="server" Text='<%# Bind("Car_Price") %>' />
            <br />
            <asp:LinkButton ID="EditButton" runat="server" CausesValidation="False" CommandName="Edit" Text="Edit" />
            &nbsp;<asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False"
                CommandName="Delete" Text="Delete"/>
            &nbsp;<asp:LinkButton ID="NewButton" runat="server" CausesValidation="False" CommandName="New" Text="New" />
        </ItemTemplate>
        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
    </asp:FormView>

当前功能：

      $(function () {
      $("#<%= FormView1.FindControl("DeleteButton").ClientID %>").click(function (e) {
          e.preventDefault();
          $('#dialog-confirm').dialog('open');
      });
      $("#dialog-confirm").dialog({

          autoOpen: false,
          resizable: false,
          height: "auto",
          width: 400,
          modal: true,
          buttons: {
              "Delete item": function () {
                  $(this).dialog("close");
              },
              Cancel: function () {
                  $(this).dialog("close");
              }
          }
      });
  });

Answer 1

您似乎没有使用 Jquery 正确选择DeleteButton 。

您需要使用ClientID由 ASP.NET 生成的 HTML 标记的控件 ID。

所以它应该是这样的：

$("#<%= FormView1.FindControl("DeleteButton").ClientID %>").click(function (e) {
    e.preventDefault();
    $('#dialog-confirm').dialog('open');
});