Modal Not Displaying When Button Is Clicked in ASP.NET Web Forms

I am working on an ASP.NET Web Forms application where I have a GridView and a button for each row that should open a modal when clicked. However, the modal is not opening when I click the edit button.

I have a Button in my GridView, and I am trying to call a JavaScript function openUpdateTaskModal() using the OnClientClick attribute. The modal is functioning properly when I call the openUpdateTaskModal() function directly from the browser console, but it does not open when I click the button.

Here’s my code for DataGridView:

    <div  class="table-wrapper">
        
        <asp:GridView ID="gvTasks" runat="server" AutoGenerateColumns="False" CssClass="custom-table" OnRowCommand="gvTasks_RowCommand">
            <Columns>
                <asp:TemplateField HeaderText="Select">
                    <ItemTemplate>
                        <asp:Button ID="btnSelect" runat="server" 
                                    Text='<%# bool.Parse(Eval("IsActive").ToString()) ? "✔" : "❌" %>' 
                                    CommandName="MarkComplete" 
                                    CommandArgument='<%# Eval("TaskID") %>' 
                                    CssClass='<%# bool.Parse(Eval("IsActive").ToString()) ? "btn-edit-green" : "btn-edit-red" %>' />
                    </ItemTemplate>

                </asp:TemplateField>

       
                <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />

                <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />

      
                <asp:BoundField DataField="CategoryName" HeaderText="Category" SortExpression="CategoryName" />

      
                <asp:BoundField DataField="StartDate" HeaderText="Start Date" SortExpression="StartDate" />

      
                <asp:BoundField DataField="EndDate" HeaderText="End Date" SortExpression="EndDate" />

       
                <asp:TemplateField HeaderText="Completed">
                    <ItemTemplate>
                        <asp:CheckBox ID="chkCompleted" runat="server" Checked='<%# Eval("IsActive") %>' Enabled="False" />
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="Actions">
                    <ItemTemplate>
                        

                        <asp:Button ID="btnEdit" runat="server" CommandName="EditTask" CommandArgument='<%# Eval("TaskID") %>' Text="Edit" CssClass="btn-edit" />
                        <asp:Button ID="btnDelete" runat="server" CommandName="DeleteTask" CommandArgument='<%# Eval("TaskID") %>' Text="Delete" CssClass="btn-delete" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
            
    </div>

</div>

Code For Modal:

        <div class="modal fade" id="uupdateTaskModal" tabindex="-1" aria-labelledby="uupdateTaskModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <asp:Label ID="ulModalTitle" runat="server" Text="Update Task" CssClass="modal-title"/>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                


                <asp:TextBox ID="utxtTitle" runat="server" CssClass="form-control" placeholder="Title"></asp:TextBox>
                <asp:TextBox ID="utxtDescription" runat="server" CssClass="form-control mt-2" placeholder="Description"></asp:TextBox>
                <asp:DropDownList ID="uddlCategory" runat="server" CssClass="form-control mt-2">
                    <asp:ListItem Text="Select Category" Value="" />
                    
                </asp:DropDownList>
                <asp:TextBox ID="utxtStartDate" runat="server" CssClass="form-control mt-2" placeholder="Start Date" TextMode="Date"></asp:TextBox>
                <asp:TextBox ID="utxtEndDate" runat="server" CssClass="form-control mt-2" placeholder="End Date" TextMode="Date"></asp:TextBox>
                <asp:CheckBox ID="uchkIsActive" runat="server" Text="Is Active" CssClass="mt-2" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <asp:Button ID="ubtnSave" runat="server" Text="Update" CssClass="btn btn-primary"  />
            </div>
        </div>
    </div>
</div>

backend code:

protected void gvTasks_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "EditTask")
{
    EditTask(Convert.ToInt32(e.CommandArgument));
    string script = "$('#uupdateTaskModal').modal('show')";
    ClientScript.RegisterStartupScript(this.GetType(), "modal", script, true);

  
}

            private void EditTask(int TaskID)
        {
            
            TheTask = clsTasks.Find(TaskID);
            if (TheTask != null)
            {
                ulModalTitle.Text = "Update Task";
                utxtTitle.Text = TheTask.Title;
                utxtDescription.Text = TheTask.Description;
                uddlCategory.SelectedIndex = TheTask.CategoryID;
                utxtStartDate.Text = TheTask.StartDate.ToString("dd/MM/yyyy");
                utxtEndDate.Text = TheTask.EndDate.ToString("dd/MM/yyyy");
                uchkIsActive.Checked = TheTask.IsActive;
            }
            else
            {
                // رسالة خطأ إذا كانت البيانات غير موجودة
                ulModalTitle.Text = "Error";
                utxtTitle.Text = "";
                utxtDescription.Text = "";
                uddlCategory.SelectedIndex = -1;
                utxtStartDate.Text = "";
                utxtEndDate.Text = "";
                uchkIsActive.Checked = false;
            }
           
        }

What am I missing or doing wrong?

tried placing the GridView inside the UpdatePanel, but it didn’t work. I tried many solutions from ChatGPT and searched on YouTube, but I couldn’t find the solution.

Note: When I run the function in the browser console, it works fine, but it doesn’t work when clicking the Edit button inside the GridView. Also, I noticed that the page seems to reload when the button is clicked, which hides the modal.

I really don’t know what to do. I hope for your help.