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.
