如何在網格視圖中 select 記錄並刪除或編輯該記錄？ 在 Asp.Net Web 表格中

Question

如何在網格視圖中 select 記錄並刪除或編輯該記錄？ 在 Asp.Net Web 表格中

我希望通過 Bootstrap 模態來完成

我用實體框架做這個

我只能編碼添加

我知道的編輯和刪除方法不適合這個項目，它們不適用於 Bootstrap Modal

Html 代碼：

 <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ProductControl.aspx.cs" Inherits="AppData.Pages.ProductControl" %> <asp:Content ID="HeadContent" ContentPlaceHolderID="Head" runat="server"> <script src="../Scripts/jquery-3.6.0.slim.min.js"></script> <script src="../Scripts/Site.js"></script> </asp:Content> <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> <div class="container"> <div class="row"> <div class="col-md-12 table-responsive" id="ProductDiv"> <div class="d-flex justify-content-between align-items-center mb-3 mt-3"> <h4>List of Products</h4> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel" runat="server"> <ContentTemplate> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#ModalAdd"> Add Product </button> </ContentTemplate> </asp:UpdatePanel> </div> <asp:GridView ID="GridView" runat="server" CssClass="table text-center table-bordered table-hover" HeaderStyle-CssClass="table-dark" AutoGenerateColumns="false" DataKeyNames="Id" OnRowCommand="GridView_RowCommand"> <Columns> <asp:TemplateField HeaderText="" ItemStyle-Font-Size="Small"> <HeaderTemplate>Row</HeaderTemplate> <ItemTemplate><%# Container.DataItemIndex+1 %></ItemTemplate> <ItemStyle Wrap="False" /> </asp:TemplateField> <asp:BoundField DataField="Name" HeaderText="Name" /> <asp:BoundField DataField="Price" HeaderText="Price" /> <asp:BoundField DataField="Type" HeaderText="Type" /> <asp:BoundField DataField="Barcode" HeaderText="Barcode" /> <asp:TemplateField HeaderText="Commands" ItemStyle-Font-Size="Small"> <ItemTemplate> <asp:LinkButton CssClass="btn btn-warning" ID="BtnEdit" runat="server">Edit</asp:LinkButton> <asp:LinkButton CssClass="btn btn-danger" ID="BtnDelete" runat="server" data-toggle="modal" data-target="#ModalDelete">Delete</asp:LinkButton> <asp:LinkButton CssClass="btn btn-info" ID="BtnDetail" runat="server">Detail</asp:LinkButton> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> <div class="row"> <asp:Label ID="LblNotFound" runat="server" Text="No Product Found" CssClass="col-12 alert alert-danger text-center" Visible="false"></asp:Label> </div> </div> <:-- Modal Add --> <asp:UpdatePanel ID="UpdatePanelModalAdd" runat="server"> <ContentTemplate> <div class="modal" id="ModalAdd"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Add New Record</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-6"> <p>Name:</p> <asp:TextBox ID="Name" placeholder="Name" runat="server" CssClass="form-control"></asp:TextBox> </div> <div class="col-6"> <p>Price:</p> <asp:TextBox ID="Price" placeholder="Price" runat="server" CssClass="form-control"></asp:TextBox> </div> </div> <div class="row"> <div class="col-6"> <br /> <p>Type:</p> <asp:TextBox ID="Type" placeholder="Type" runat="server" CssClass="form-control"></asp:TextBox> </div> <div class="col-6"> <br /> <p>Barcode:</p> <asp:TextBox ID="Barcode" placeholder="Barcode" runat="server" CssClass="form-control"></asp:TextBox> </div> </div> </div> <div class="modal-footer"> <asp:Button ID="BtnCreate" runat="server" CssClass="btn btn-success" Text="Create" OnClick="BtnCreate_Click" /> <asp:Button ID="BtnCancel" runat="server" CssClass="btn btn-danger" Text="Cancel" data-dismiss="modal" /> </div> </div> </div> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="BtnCreate" EventName="Click" /> <asp:AsyncPostBackTrigger ControlID="BtnCancel" EventName="Click" /> </Triggers> </asp:UpdatePanel> <:-- Modal Detail --> <asp:UpdatePanel ID="UpdatePanelModalDetail" runat="server"> <ContentTemplate> <div class="modal" id="ModalDetail"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Detail Record</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-6"> <p>Name:</p> <asp:Label ID="LblName" CssClass="text-secondary" runat="server" Text=""></asp:Label> </div> <div class="col-6"> <p>Price:</p> <asp:Label ID="LblPrice" CssClass="text-secondary" runat="server" Text=""></asp:Label> </div> </div> <div class="row"> <div class="col-6"> <br /> <p>Type:</p> <asp:Label ID="LblType" CssClass="text-secondary" runat="server" Text=""></asp:Label> </div> <div class="col-6"> <br /> <p>Barcode:</p> <asp:Label ID="LblBarcode" CssClass="text-secondary" runat="server" Text=""></asp:Label> </div> </div> </div> <div class="modal-footer"> <asp:Button ID="Button1" runat="server" CssClass="btn btn-success" Text="Create" OnClick="BtnCreate_Click" /> <asp:Button ID="Button2" runat="server" CssClass="btn btn-danger" Text="Cancel" data-dismiss="modal" /> </div> </div> </div> </div> </ContentTemplate> </asp?UpdatePanel> <:-- Modal Delete --> <asp:UpdatePanel ID="UpdatePanelModalDelete" runat="server"> <ContentTemplate> <div class="modal" id="ModalDelete"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Delete Record</h4> </div> <div class="modal-body"> <h6 class="text-center">Are you sure you want to delete this record:</h6> <br /> <div class="text-center"> <asp:Button ID="Delete" CssClass="btn btn-danger border-2 border-dark" runat="server" Text="Delete" CommandArgument='<%# Eval("Id") %>' CommandName="Delete" /> <button id="Cancel" class="btn btn-light border-2 border-dark" data-dismiss="modal">Cancel</button> </div> </div> </div> </div> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Delete" EventName="Click" /> </Triggers> </asp:UpdatePanel> </div> </asp:Content>

和后端代碼：

using AppData.Models;
using System;
using System.Collections.Generic;
using System.EnterpriseServices;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AppData.Pages
{
    public partial class ProductControl : System.Web.UI.Page
    {
        Models.ProductDbEntities Db = new Models.ProductDbEntities();
        protected void Page_Load(object sender, EventArgs e)
        {

            if (GridView.Rows.Count > 0)
            {
                LblNotFound.Visible = false;
            }

            else
            {
                GridView.DataSource = Db.TblProducts.ToList();
                GridView.DataBind();
            }
        }

        protected void BtnCreate_Click(object sender, EventArgs e)
        {
            TblProduct Row = new TblProduct();

            Row.Name = Name.Text;
            Row.Price = Price.Text;
            Row.Type = Type.Text;
            Row.Barcode = Convert.ToInt64(Barcode.Text);

            Db.TblProducts.Add(Row);
            Db.SaveChanges();

            Response.Redirect("ProductControl.aspx");
        }

        protected void BtnCancel_Click(object sender, EventArgs e)
        {
            Response.Redirect("Pages/ProductControl.aspx");
        }

        protected void GridView_RowCommand(object sender, GridViewCommandEventArgs e)
        {
            var id = e.CommandArgument;

            if (e.CommandName == "Delete")
            {
                Int64 Id = Convert.ToInt64(id);
                var Row = Db.TblProducts.FirstOrDefault(n => n.Id == Id);

                Db.TblProducts.Remove(Row);
                Db.SaveChanges();

                Response.Redirect("DataControl.aspx");
                GridView.DataSource = Db.TblProducts.ToList();
                GridView.DataBind();
            }
        }
    }
}

Answer 1

我理解您的方法，但是如果您使用的是引導模式，則需要編寫更多代碼。

實現此目的的一種方法是執行以下步驟：

1. 在Delete 模式中添加一個隱藏字段來保存選定的 productId 和刪除按鈕的事件處理程序：

  <div class="modal-body">
     <h6 class="text-center">Are you sure you want to delete this record?</h6>
      <br />
      <!--add this inside delete modal --> 
      <input type="hidden" id="productIdToDelete" runat="server" />
                                
      <div class="text-center">
      <!-- remove CommandArgument and CommandName from the Delete button. They are useless in the popup. -->
      <!-- add an event handler to OnClick-->
      <asp:Button ID="Delete" CssClass="btn btn-danger border-2 border-dark" runat="server" Text="Delete" OnClick="BtnDelete_Click"  />
...

2. 為打開模態時創建事件處理程序，以便將網格中當前行的 productId 傳播到模態：

 <script src="../Scripts/Site.js"></script>
 <script type="text/javascript">
    $(document).ready(
        function () {
            //use a jquery selector to assign an event handler to all Delete Buttons found on the page (nottice they all start with the same prexif)
            $("[id*=MainContent_GridView_BtnDelete]").click(function () {
                //get the id of the product from the selected row first cell and assign it to the hidden field in the modal
                $("#MainContent_productIdToDelete").val($(this).closest('tr').find('td').eq(0).html());
            });
        });
</script>

3. 最后在后面的代碼中處理delete事件：

protected void BtnDelete_Click(object sender, EventArgs e)
{
    string idVal = Request.Form[productIdToDelete.UniqueID];
    var id = Convert.ToInt64(idVal);
    // implement delete logic ...
}

對編輯使用相同的方法。 （看這個例子。）