Hi as2134,
Place your modal popup HTML inside UpdatePanel.
Please refer below sample.
HTML
<head runat="server">
<title>Strategic Plan Tracker</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: "75%",
maxWidth: "700px",
padding: "15px",
});
});
function opendialog() {
var theDialog = $("#dialog").dialog({
autoOpen: false,
modal: true,
});
theDialog.dialog("open");
}
</script>
</head>
<body class="container">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#cccccc" AlternatingRowStyle-BackColor="#adffbb"
AllowPaging="false" PageSize="50" AllowSorting="true">
<RowStyle CssClass="RowStyle" />
<AlternatingRowStyle CssClass="AlternateRowStyle" />
<HeaderStyle CssClass="borderline" />
<Columns>
<asp:BoundField DataField="id" HeaderText="id" HtmlEncode="true" />
<asp:TemplateField>
<HeaderTemplate>
Owner
<asp:DropDownList ID="ddlOwnerF" runat="server" AutoPostBack="true" AppendDataBoundItems="true" Width="70px">
<asp:ListItem Text="ALL" Value="ALL"></asp:ListItem>
</asp:DropDownList>
</HeaderTemplate>
<ItemTemplate>
<div style="width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
<%# Eval("Owner") %>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Department
<asp:DropDownList ID="ddlDeptF" runat="server" AutoPostBack="true" AppendDataBoundItems="true" Width="100px">
<asp:ListItem Text="ALL" Value="ALL"></asp:ListItem>
</asp:DropDownList>
</HeaderTemplate>
<ItemTemplate>
<%# Eval("DeptText") %>
</ItemTemplate>
</asp:TemplateField>
<asp:HyperLinkField DataNavigateUrlFields="id" HeaderText="Project Name" DataNavigateUrlFormatString="sp_edit.aspx?id={0}" Target="_blank" DataTextField="ProjName" ItemStyle-Width="400px" />
<asp:TemplateField>
<HeaderTemplate>
Due Date
<asp:DropDownList ID="ddlDueDtF" runat="server" AutoPostBack="true" AppendDataBoundItems="true" Width="70px">
<asp:ListItem Text="ALL" Value="ALL"></asp:ListItem>
</asp:DropDownList>
</HeaderTemplate>
<ItemTemplate>
<%# Eval("DueDate") %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Hours" HeaderText="Hours" HtmlEncode="true" />
<asp:TemplateField>
<HeaderTemplate>
Status
<asp:DropDownList ID="ddlStatusF" runat="server" AutoPostBack="true" AppendDataBoundItems="true" Width="70px">
<asp:ListItem Text="ALL" Value="ALL"></asp:ListItem>
</asp:DropDownList>
</HeaderTemplate>
<ItemTemplate>
<div style="width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
<%# Eval("StatusText") %>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Resources" HeaderText="Resources" HtmlEncode="true">
<ItemStyle Width="300px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="Notes" HeaderText="Notes" HtmlEncode="false" ItemStyle-Width="300px">
<ItemStyle Width="300px"></ItemStyle>
</asp:BoundField>
<asp:TemplateField>
<HeaderTemplate>
% Complete
</HeaderTemplate>
<ItemTemplate>
<div style="width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: right">
<%# Eval("PcntComp") %>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="30px" HeaderText="Edit">
<ItemTemplate>
<%-- this link does not work--%>
<asp:LinkButton ID="lnkEdit" runat="server" data-toggle="dialog" data-target="#dialog" Text="Edit" OnClick="lnkEdit_Click"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div id="dialog" title="Add/Edit">
<asp:Label ID="lblEditLink" runat="server" Text="" CssClass="addedit_header" Width="100%"></asp:Label>
<table align="center">
<tr>
<td class="addedit_lbls">
<asp:Label ID="lblId" runat="server" Text="id" CssClass="addedit_lbls"></asp:Label>
</td>
<td>
<asp:TextBox ID="tbId" Width="40px" MaxLength="5" runat="server" ReadOnly="true"></asp:TextBox>
</td>
</tr>
<tr>
<td class="addedit_lbls">
<asp:Label ID="lblOwner" runat="server" Text="Owner" CssClass="addedit_lbls"></asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlOwner" CssClass="ae-ddl" runat="server">
<asp:ListItem></asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="X" ControlToValidate="ddlOwner" Font-Bold="true" ForeColor="Red" ValidationGroup="Save" />
</td>
</tr>
<tr>
<td class="addedit_lbls">
<asp:Label ID="lblDept" runat="server" Text="Department"></asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlDept" CssClass="ae-ddl" runat="server">
<asp:ListItem></asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="X" ControlToValidate="ddlDept" Font-Bold="true" ForeColor="Red" ValidationGroup="Save" />
</td>
</tr>
<tr>
<td class="addedit_lbls">
<asp:Label ID="lblProjName" runat="server" Text="Project Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="tbProjName" Width="500px" MaxLength="150" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="X" ControlToValidate="tbProjName" Font-Bold="true" ForeColor="Red" ValidationGroup="Save" />
</td>
</tr>
<tr>
<td class="addedit_lbls">
<asp:Label ID="lblDueDt" runat="server" Text="Due Date"></asp:Label>
</td>
<td>
<asp:TextBox runat="server" ID="tbDdt" CssClass="ae-ddl" Width="145px"></asp:TextBox>
<%--<ajaxtoolkit:calendarextender id="dueDt" runat="server" enabled="true" targetcontrolid="tbDdt" popupposition="BottomLeft" />--%>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ErrorMessage="X" ControlToValidate="tbDdt" Font-Bold="true" ForeColor="Red" ValidationGroup="Save" />
<asp:RangeValidator ID="rvRDate" runat="server" ControlToValidate="tbDdt" ErrorMessage="Invalid Date" Type="Date" MinimumValue="01/01/1900" MaximumValue="01/01/2200" Display="Dynamic" ValidationGroup="Save" />
</td>
</tr>
<tr>
<td class="addedit_lbls">
<asp:Label ID="lblHours" runat="server" Text="Hours"></asp:Label>
</td>
<td>
<asp:TextBox ID="tbHours" Width="145px" MaxLength="150" runat="server" Enabled="false"></asp:TextBox>
</td>
</tr>
<tr>
<td class="addedit_lbls">
<asp:Label ID="lblStat" runat="server" Text="Status"></asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlStat" CssClass="ae-ddl" runat="server">
<asp:ListItem></asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ErrorMessage="X" ControlToValidate="ddlStat" Font-Bold="true" ForeColor="Red" ValidationGroup="Save" />
</td>
</tr>
<tr>
<td class="addedit_lbls">
<asp:Label ID="lblResources" runat="server" Text="Resources"></asp:Label>
</td>
<td>
<asp:TextBox ID="tbResources" runat="server" TextMode="multiline" Style="resize: none" Width="500px" Height="100px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="addedit_lbls">
<asp:Label ID="lblNotes" runat="server" Text="Notes"></asp:Label>
</td>
<td>
<asp:TextBox ID="tbNotes" runat="server" TextMode="multiline" Style="resize: none" Width="500px" Height="100px"></asp:TextBox>
</td>
</tr>
<tr>
<td> </td>
<td align="left">
<asp:Label ID="lblError" runat="server" Text="X = Required Field" ForeColor="Red" Visible="true" Font-Bold="true" />
</td>
</tr>
<tr>
<td align="left">
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick="closeDialog('dialog');" CssClass="addedit_button" />
</td>
<td align="right">
<asp:Button ID="btnSave" runat="server" Text="Save" CssClass="addedit_button" ValidationGroup="Save" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
Namespaces
C#
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;
VB.Net
Imports System.Data
Imports System.Web.UI
Imports System.Web.UI.WebControls
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[] { new DataColumn("id", typeof(int)),
new DataColumn("Owner", typeof(string)),
new DataColumn("DeptText", typeof(string)),
new DataColumn("ProjName", typeof(string)),
new DataColumn("DueDate", typeof(DateTime)),
new DataColumn("Hours", typeof(int)),
new DataColumn("StatusText", typeof(string)),
new DataColumn("Resources", typeof(string)),
new DataColumn("Notes", typeof(string)),
new DataColumn("PcntComp", typeof(string))});
dt.Rows.Add(1, "John Hammond", "USA", "ProjName1", "30/01/2022", 1, "StatusText1", "Resources1", "Notes1", "PcntComp1");
dt.Rows.Add(2, "Mudassar Khan", "India", "ProjName2", "30/01/2022", 2, "StatusText2", "Resources2", "Notes2", "PcntComp2");
dt.Rows.Add(3, "Suzanne Mathews", "France", "ProjName3", "30/01/2022", 3, "StatusText3", "Resources3", "Notes3", "PcntComp3");
dt.Rows.Add(4, "Robert Schidner", "Russia", "ProjName4", "30/01/2022", 4, "StatusText4", "Resources4", "Notes4", "PcntComp4");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
protected void lnkEdit_Click(object sender, EventArgs e)
{
ClearPopup();
tbId.Focus();
GridViewRow row = (GridViewRow)((LinkButton)sender).NamingContainer;
ddlDept.SelectedIndex = ddlDept.Items.IndexOf(ddlDept.Items.FindByValue(row.Cells[2].Text));
tbProjName.Text = ((HyperLink)row.Cells[3].Controls[0]).Text;
int id = int.Parse(row.Cells[0].Text);
tbId.Text = id.ToString();
tbId.ReadOnly = true;
lblEditLink.Text = "<a href=\"sp_edit.aspx?id=" + id + "\">Edit Project</a>";
ScriptManager.RegisterStartupScript((sender as Control), this.GetType(), "opendia", "opendialog();", true);
}
protected void ClearPopup()
{
lblEditLink.Text = string.Empty;
tbId.Text = string.Empty;
ddlOwner.SelectedIndex = 0;
ddlDept.SelectedIndex = 0;
tbDdt.Text = string.Empty;
tbProjName.Text = string.Empty;
ddlStat.SelectedIndex = 0;
tbResources.Text = string.Empty;
tbNotes.Text = string.Empty;
tbHours.Text = string.Empty;
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As DataTable = New DataTable()
dt.Columns.AddRange(New DataColumn() {New DataColumn("id", GetType(Integer)), New DataColumn("Owner", GetType(String)),
New DataColumn("DeptText", GetType(String)), New DataColumn("ProjName", GetType(String)), New DataColumn("DueDate", GetType(DateTime)),
New DataColumn("Hours", GetType(Integer)), New DataColumn("StatusText", GetType(String)), New DataColumn("Resources", GetType(String)),
New DataColumn("Notes", GetType(String)), New DataColumn("PcntComp", GetType(String))})
dt.Rows.Add(1, "John Hammond", "USA", "ProjName1", "30/01/2022", 1, "StatusText1", "Resources1", "Notes1", "PcntComp1")
dt.Rows.Add(2, "Mudassar Khan", "India", "ProjName2", "30/01/2022", 2, "StatusText2", "Resources2", "Notes2", "PcntComp2")
dt.Rows.Add(3, "Suzanne Mathews", "France", "ProjName3", "30/01/2022", 3, "StatusText3", "Resources3", "Notes3", "PcntComp3")
dt.Rows.Add(4, "Robert Schidner", "Russia", "ProjName4", "30/01/2022", 4, "StatusText4", "Resources4", "Notes4", "PcntComp4")
GridView1.DataSource = dt
GridView1.DataBind()
End If
End Sub
Protected Sub lnkEdit_Click(ByVal sender As Object, ByVal e As EventArgs)
ClearPopup()
tbId.Focus()
Dim row As GridViewRow = CType((CType(sender, LinkButton)).NamingContainer, GridViewRow)
ddlDept.SelectedIndex = ddlDept.Items.IndexOf(ddlDept.Items.FindByValue(row.Cells(2).Text))
tbProjName.Text = (CType(row.Cells(3).Controls(0), HyperLink)).Text
Dim id As Integer = Integer.Parse(row.Cells(0).Text)
tbId.Text = id.ToString()
tbId.ReadOnly = True
lblEditLink.Text = "<a href=""sp_edit.aspx?id=" & id & """>Edit Project</a>"
ScriptManager.RegisterStartupScript((TryCast(sender, Control)), Me.GetType(), "opendia", "opendialog();", True)
End Sub
Protected Sub ClearPopup()
lblEditLink.Text = String.Empty
tbId.Text = String.Empty
ddlOwner.SelectedIndex = 0
ddlDept.SelectedIndex = 0
tbDdt.Text = String.Empty
tbProjName.Text = String.Empty
ddlStat.SelectedIndex = 0
tbResources.Text = String.Empty
tbNotes.Text = String.Empty
tbHours.Text = String.Empty
End Sub
Screenshot
