DataGridView binding data and selected row deletion features in ES0en.NET

  • 2020-08-22 21:57:12
  • OfStack

First we drag an DataGridView control into the.aspx page, then bind the column you want to display as follows.


 <asp:GridView ID="gvDepartList" runat="server" AutoGenerateColumns="False" 
         Height="108px" Width="600px"  OnRowDeleting="gvDepartList_RowDeleting" RowDataBound="gvDepartList_RowDataRound">
         <Columns>  
         <asp:TemplateField HeaderText=" Department name " >
             <ItemTemplate>
                   <asp:Label runat="server" style="text-align:center" Text='<%#  Eval("DepartName") %>'   /> 
             </ItemTemplate>
         </asp:TemplateField>

             <asp:BoundField HeaderText=" institutions "   DataField="BranchId" /> 
             <asp:BoundField HeaderText=" head " DataField="PrincipalUser" />
             <asp:BoundField HeaderText=" Contact phone number " DataField="ConnectTelNo" />
             <asp:BoundField HeaderText=" The mobile phone " DataField="ConnectMobileTelNo"/>
             <asp:BoundField HeaderText=" fax " DataField="Faxes" />
             <asp:TemplateField HeaderText=" Modify the ">
                 <ItemTemplate>
                       <asp:ImageButton ID="ImageButton1" ImageUrl="../images/edit.gif" CommandArgument='<%#Eval("DepartId") %>' CommandName="delete" runat="server" />
                 </ItemTemplate>
             </asp:TemplateField>
            <asp:TemplateField HeaderText=" delete ">
                 <ItemTemplate>
                     <asp:ImageButton ImageUrl="../images/delete.gif" CommandArgument='<%#Eval("DepartId") %>' CommandName="delete" runat="server" />
                 </ItemTemplate>
             </asp:TemplateField>
         </Columns> 
     </asp:GridView> 

2: Bind data in the Page_load event behind the.aspx page.


protected void Page_Load(object sender, EventArgs e)
       {
           if (!IsPostBack)
           {
              gvDepartList.DataSource= new DepartInfoManager().GetDepartInfos(-1);
              gvDepartList.DataBind();
           }
       }

If we wanted to add an DataGridView light bar effect, we would hover over the background every 1 line.


/// <summary>
 ///  Dynamic registration script ( in GridView Control before rendering )  Effect of light bar 
 /// </summary>
 /// <param name="sender"></param>
 /// <param name="e"></param>
 protected void gvUsers_RowDataBound(object sender, GridViewRowEventArgs e)
 {
     // It is determined here that script registration is only taking place on rows 
     if (e.Row.RowType == DataControlRowType.DataRow)
     {
         // Effect of light bar 
           e.Row.Attributes.Add("onmouseover","currentcolor=this.style.backgroundColor;this.style.backgroundColor='#6699ff'");
         e.Row.Attributes.Add("onmouseout ", "this.style.backgroundColor=currentcolor");

         LinkButton lnkbtnDel = e.Row.FindControl("lnkbtnDel") as LinkButton;
         lnkbtnDel.Attributes.Add("onclick", "return confirm(' Are you sure to delete it? ?')");
     }
 }

Now the point is, how do I get 1 row? Since the deletion is based on the ID of 1 piece of data, we will add 1 piece of code to the Page_load method:
gvDepartList.DataKeyNames = new string[] {"id"}; // What this code means is that it sets 1 key per line, and this key is used to manipulate data.
Now let's do it the other way. The second last column on the page, yes, is an ImageButtom control, which is a small icon with a delete button. What does CommandArgument do? What does the CommandName do? CommandArgument is the parameter that we want to operate on, CommandName is the instruction what is this button going to do? We're using delete here, so we're going to say Delete.


<asp:TemplateField HeaderText=" delete ">
                <ItemTemplate>
                     <asp:ImageButton ImageUrl="../images/delete.gif" CommandArgument='<%#Eval("DepartId") %>' CommandName="delete" runat="server" />
                </ItemTemplate>
             </asp:TemplateField>

Next comes the background code, as you can see that the DataGridView is bound to an OnRowDeleting event, which is used for deletion.
And then we write this code in this event.


/// <summary>
        ///  Deletes the selected row 
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void gvDepartList_RowDeleting(object sender, GridViewDeleteEventArgs e)
        {
            ImageButton buttom = gvDepartList.Rows[e.RowIndex].FindControl("btnDelete") as ImageButton;
            string departId = buttom.CommandArgument.ToString();
            if (manage.DeleteDepart(departId))
            {
                Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "<script>alert(' Delete the success !');</script>");
                BindDepartInfos();// Rebind data 
            }
            else
            {
                Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "<script>alert(' Delete failed !');</script>");
            }
        }

For a better user experience, we can avoid using this Page.ClientScript.RegisterClientScriptBlock (this.GetType (), "alert"," < script > alert(' deleted successfully! '); < /script > ");
You can choose to place 1 label control in a prominent place on the page. Design Visible=false. Hide it, then use the Label control to prompt the user to delete successfully!


Related articles: