Отображение диалогового окна 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"/>

Однако поле не отображается.

my formview и 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

Похоже, вы не правильно выбрали DeleteButton с помощью Jquery.

Вам необходимо получить контрольный идентификатор для HTML разметки, которая генерируется ASP. NET с помощью ClientID.

Так и должно быть:

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