how to delete a row on gridview with a JavaScript button and remain on the same page(如何使用 JavaScript 按钮删除 gridview 上的一行并保留在同一页面上)

本文介绍了如何使用 JavaScript 按钮删除 gridview 上的一行并保留在同一页面上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在通过gridview显示一组记录，并且edit和delete它们旁边的按钮.我在记录删除部分遇到问题.我想要的行为如下:用户单击按钮，调用 JavaScript 验证函数并在按钮单击后删除记录，但用户与其余记录保持在同一页面上.如何在保持在同一页面上的同时执行此操作?

</asp:内容><asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"><div>&nbsp;&nbsp;&nbsp;<br/>&nbsp;<asp:HyperLink NavigateUrl="~/Entry.aspx" runat="server" text="添加新记录"/>
<div><asp:GridView runat="server" ID="grdView" AutoGenerateColumns="false" Height="100%"宽度="100%" onselectedindexchanged="grdView_SelectedIndexChanged" ><列><asp:BoundField DataField="Prod_Id" HeaderText="product id" HeaderStyle-BackColor="Azure"/><asp:BoundField DataField="Prod_Name" HeaderText="产品名称" HeaderStyle-BackColor="Azure"/><asp:BoundField DataField="Unit_Price" HeaderText="单价" HeaderStyle-BackColor="Azure"/><asp:BoundField DataField="In_Hand" HeaderText="In Hand" HeaderStyle-BackColor="Azure"/><asp:BoundField DataField="Fixed" HeaderText="Fixed" HeaderStyle-BackColor="Azure"/><asp:BoundField DataField="Status" HeaderText="Status" HeaderStyle-BackColor="Azure"/><asp:HyperLinkField DataNavigateUrlFields="Prod_Id" DataNavigateUrlFormatString="edit.aspx?Prod_Id={0}" Text="Edit"/><asp:ButtonField ButtonType="Link" Text="Delete"/></列></asp:GridView>

</asp:内容>

<块引用>

部分代码

public 部分类 _Default : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){绑定数据()；}SqlConnection con;SqlDataAdapter da;数据集 ds;无效绑定数据(){con = new SqlConnection("Data Source=.\sqlexpress; initial catalog=PracticeDb; user id=sa; pwd=manager;");con.Open();da = new SqlDataAdapter("Select * from Products", con);数据集 ds = 新数据集();da.Fill(ds);关闭()；grdView.DataSource = ds;grdView.DataBind();}protected void grdView_SelectedIndexChanged(object sender, EventArgs e){var P_id = ds.Tables[0].Rows[0]["Prod_Id"].ToString();SqlConnection con = new SqlConnection();con.ConnectionString = ("数据源=.\sqlexpress;初始目录=PracticeDb;用户id=sa;pwd=manager;");con.Open();string qry = "从产品中删除 Prod_Id='" +P_id+ "'";SqlCommand cmd = new SqlCommand(qry, con);cmd.ExecuteNonQuery();关闭()；}}}

谢谢

解决方案

您可以使用行数据绑定事件来完成此任务.

 <asp:LinkBut​​ton ID="lnkBtnDel" runat="server" CommandName="DeleteRow" OnClientClick="return confirm('你确定要删除这条记录吗?');""CommandArgument='<%#Eval("Prod_Id") %>'>删除</asp:LinkBut​​ton>

在 rowdatabound 事件中你可以有

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e){if (e.CommandName == "DeleteRow"){//如果你需要行索引int rowIndex = ((GridViewRow)((LinkBut​​ton)e.CommandSource).NamingContainer).RowIndex;int Prod_Id= Convert.ToInt32(e.CommandArgument);//后面跟着你的代码}}

I am displaying a set of records through gridview, and edit and delete buttons next to them. I am having a problem in the record deletion section. The behavior I want is the following: the user clicks the button, a JavaScript validation function is called and after the button click the records are deleted, but the user remains on the same page with the rest of the records. How can I do this while remaining on the same page?

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div>

        &nbsp;&nbsp;&nbsp;
        <br />
&nbsp;

        <asp:HyperLink NavigateUrl="~/Entry.aspx" runat="server" text="Add New Record" />
    </div>

    <div>
        <asp:GridView runat="server" ID="grdView" AutoGenerateColumns="false" Height="100%"
            Width="100%" onselectedindexchanged="grdView_SelectedIndexChanged" >
            <Columns>

                <asp:BoundField DataField="Prod_Id" HeaderText="product id " HeaderStyle-BackColor="Azure"  />
                 <asp:BoundField DataField="Prod_Name" HeaderText="Product Name" HeaderStyle-BackColor="Azure" />
                <asp:BoundField DataField="Unit_Price" HeaderText="Unit Price " HeaderStyle-BackColor="Azure" />
                <asp:BoundField DataField="In_Hand" HeaderText="In Hand" HeaderStyle-BackColor="Azure" />
                <asp:BoundField DataField="Fixed" HeaderText="Fixed" HeaderStyle-BackColor="Azure" />
                <asp:BoundField DataField="Status" HeaderText="Status" HeaderStyle-BackColor="Azure" />
                 <asp:HyperLinkField DataNavigateUrlFields="Prod_Id" DataNavigateUrlFormatString="edit.aspx?Prod_Id={0}" Text="Edit" />
                <asp:ButtonField   ButtonType="Link"  Text="Delete" />        

            </Columns>
        </asp:GridView>
    </div>
</asp:Content>

code behind part 

public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            binddata();
        }

        SqlConnection con;
        SqlDataAdapter da;
        DataSet ds;

        void binddata()
        {
            con = new SqlConnection("Data Source=.\sqlexpress; initial catalog=PracticeDb; user id=sa; pwd=manager;");
            con.Open();
            da = new SqlDataAdapter("Select * from Products", con);
            DataSet ds = new DataSet();
            da.Fill(ds);
            con.Close();
            grdView.DataSource = ds;
            grdView.DataBind();
        }

        protected void grdView_SelectedIndexChanged(object sender, EventArgs e)
        {


            var P_id = ds.Tables[0].Rows[0]["Prod_Id"].ToString();

            SqlConnection con = new SqlConnection();
            con.ConnectionString = ("Data Source=.\sqlexpress; initial catalog=PracticeDb; user id=sa; pwd=manager;");
            con.Open();
            string qry = "DELETE FROM PRODUCTS WHERE Prod_Id='" +P_id+ "'";
            SqlCommand cmd = new SqlCommand(qry, con);
            cmd.ExecuteNonQuery();
            con.Close();


        }



    }
}

Thanks

解决方案

You can use row databound event to accomplish this task.

  <asp:LinkButton ID="lnkBtnDel" runat="server" CommandName="DeleteRow" OnClientClick="return confirm('Are you sure you want to Delete this Record?');""CommandArgument='<%#Eval("Prod_Id") %>'>Delete</asp:LinkButton>

and in the rowdatabound event you can have

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
 if (e.CommandName == "DeleteRow")
    {
        //incase you need the row index 
        int rowIndex = ((GridViewRow)((LinkButton)e.CommandSource).NamingContainer).RowIndex;
        int Prod_Id= Convert.ToInt32(e.CommandArgument);
        //followed by your code 
    }
}

这篇关于如何使用 JavaScript 按钮删除 gridview 上的一行并保留在同一页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！