Show modal by item ID in ASP.NET WebForms

Question

I'm using repeaters to display a list of items retrieved from the database. I would like to support basic CRUD operations on such items via a simple modal dialog box.

I have tried using onitemcommand to manipulate each item, I tried using labels to get id, I have also tried using OnClick on the buttons, with no luck. Here it is the code for my repeater:

    <div class="container-fluid">
      <div class="row justify-content-left card-group">
         <asp:Repeater  ID="DataList1" runat="server" onitemcommand="DataList1_ItemCommand">
            <ItemTemplate>
               <div class="col-md-4  " style="margin-bottom: 1em;">
                  <%--A loop through the records in database--%>
                  <div class="card border-light mb-4 ">
                     <div class="card-content " >
                        <div class="card-header ">
                           <h4 class="my-0 font-weight-normal">
                              <asp:label ID="nameTage" style="font-size:16px;color:steelblue;" Text= '<%# Eval("ProjectName") %>' runat="server"/>
                               <asp:label ID="pID" Text='<%#  DataBinder.Eval(Container.DataItem,"ProjectID") %>' runat="server" Visible="false"/>
                           </h4>
                        </div>
                        <div class="card-body ">
                           <div class="d-flex justify-content-between align-items-center">
                              <div class="btn-group">
                                 <h6 class="card-text" style="font-size:10px; color:#a51313">
                                    <span class="Text" >  <%--The project description goes here--%>                            
                                    <%-- <%= myItem["ProjDescription"].ToString() %>--%>
                                    <%# Eval("ProjDescription") %>
                                    </span>
                                 </h6>
                              </div>
                           </div>
                        </div>
                        <div class="card-footer ">
                           <%--These are not for the submit buttons, they are for the models--%> 
                           <%--Get the ID of the Project--%>


                           <%--<div class="btn-toolbar  pull-right" id="buttonID" role="group" aria-label="Basic example" style="font-size:9px; color:white; align-content:center" runat="server">--%>
                              <asp:LinkButton type="button" ID="btn_details" class="btn btn-success btn-sm m-1" aria-pressed="true" data-toggle="modal" data-target="#detailsModal" runat="server" OnClick="IDButton1_Click" CausesValidation="false" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"ProjectID") %>' CommandName="Details" Text="Details"></asp:LinkButton>
                              <asp:LinkButton type="button" ID="btn_edit"   class="btn btn-success btn-sm m-1" aria-pressed="true" data-toggle="modal" data-target="#editModal"   runat="server"  CausesValidation="false" CommandArgument='<%# Eval("ProjectID") %>' CommandName="Edit" Text="Edit"></asp:LinkButton>
                              <asp:LinkButton type="button" ID="btn_delete" class="btn btn-success btn-sm m-1" aria-pressed="true" data-toggle="modal" data-target="#deleteModal" runat="server"  CausesValidation="false" CommandArgument='<%# Eval("ProjectID") %>' CommandName="Delete" Text="Delete"></asp:LinkButton>
                           <%--</div>--%>
                        </div>
                     </div>
                  </div>
               </div>
            </ItemTemplate>
         </asp:Repeater>
         <%-- <% } %>--%>
      </div>
   </div>
'''
<!-- Modal for Details -->
    <%--Get the ID of the Project--%>
   <div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
         <div class="modal-content">
            <div class="modal-header">
               <h5 class="modal-title" id="detailsModalLabel">Mission Project</h5>
               <%--project.Name--%>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body">              
               <div class="form-horizontal col-8">
                  <div class="form-group row">
                     <asp:label Text="Project Title:" class="control-label" runat="server"/>
                     <asp:TextBox ID="TB1" Text="" runat="server" class="form-control" ReadOnly="true"></asp:TextBox>
                  </div>
                  <div class="form-group row">
                     <asp:label Text="Project Description:" class="control-label" runat="server"/>
                     <asp:TextBox ID="TB2" runat="server" class="form-control" rows="4" TextMode="multiline" ReadOnly="true"></asp:TextBox>
                  </div>
                  <div class="form-group row">
                     <asp:label  Text="Department:" class="control-label" runat="server"/>
                     <asp:TextBox ID="TB3" runat="server" class="form-control" ReadOnly="true"></asp:TextBox>
                  </div>
                  <div class="form-group row">
                     <asp:label ID="HEreThere" Text="Contact Name:" class="control-label" runat="server"/>
                     <asp:TextBox ID="TB4" runat="server" class="form-control" ReadOnly="true"></asp:TextBox>
                  </div>
                  <div class="form-group row">
                     <asp:label Text="Launch Date:" class="control-label" runat="server"/>
                     <asp:TextBox ID="TB5" runat="server" class="form-control" ReadOnly="true"></asp:TextBox>
                  </div>
                  <div class="form-group row">
                     <asp:label Text="Note:" class="control-label" runat="server"/>
                     <asp:TextBox ID="TB6" runat="server" class="form-control" rows="7" TextMode="multiline" ReadOnly="true"></asp:TextBox>
                  </div>
                  <div class="form-group row">
                     <asp:label Text="Project Status:" class="control-label" runat="server"/>
                     <asp:TextBox ID="TB7" runat="server" class="form-control" ReadOnly="true"></asp:TextBox>
                  </div>
               </div>
            </div>
            <div class="modal-footer">
               <asp:Button type="button" class="btn btn-secondary" data-dismiss="modal" runat="server" Text="Close" />
            </div>
         </div>
      </div>
   </div>

    protected void Page_Load(object sender, EventArgs e)
    {
        lblMessage.Text = "";

        //data = "";

        if (!IsPostBack)
        {

        }

        DataList1.DataSource = GetProjects();
        DataList1.DataBind();
  }


    protected void DataList1_ItemCommand(object source, RepeaterCommandEventArgs e)
    {
        if (e.CommandArgument != null)
        {
            if (e.CommandName.Equals("Details"))
            {
                //int MissID = Convert.ToInt32(e.CommandArgument.ToString());
                //lblMessage.Text = MissID.ToString
                ((Label)e.Item.FindControl("pID")).Visible = true;

            }
            else if (e.CommandName.Equals("Edit"))
            {
                ((Label)e.Item.FindControl("pID")).Visible = true;
            }
            else if (e.CommandName.Equals("Delete"))
            {
                ((Label)e.Item.FindControl("pID")).Visible = true;
            }

        }
        //    Label label = e.Item.FindControl("pID") as Label;

    }

protected void IDButton1_Click(object sender, EventArgs e)
{
    RepeaterItem item = (sender as LinkButton).Parent as RepeaterItem;

    int MissID = Convert.ToInt32((item.FindControl("pID") as Label).Text);

    (item.FindControl("pID") as Label).Visible = true;
    //    get command argument here
    //    int MissID = Convert.ToInt32(((sender as Button).NamingContainer.FindControl("pID") as Label).Text);

    //    lblMessage.Text = MissID.ToString();

    DataSet dsID = GetProjectByID(MissID);


    this.TB1.Text = dsID.Tables[0].Rows[0]["ProjectName"].ToString();
    this.TB2.Text = dsID.Tables[0].Rows[0]["ProjDescription"].ToString();
    this.TB3.Text = dsID.Tables[0].Rows[0]["Department"].ToString();
    this.TB4.Text = dsID.Tables[0].Rows[0]["ContactName"].ToString();
    this.TB5.Text = dsID.Tables[0].Rows[0]["DueDate"].ToString();
    this.TB6.Text = dsID.Tables[0].Rows[0]["Notes"].ToString();
    this.TB7.Text = GetStatusText(dsID.Tables[0].Rows[0]["StatusID"].ToString());

}

Answer 1

Because you don't have your Repeater binding wrapped in the check for PostBack, it is rebinding anytime a button event occurs. This essentially undos the changes you make in the click event. Wrapping it in the postback check should resolve the issue.

if (!IsPostBack)
{
    DataList1.DataSource = GetProjects();
    DataList1.DataBind();        
}