Hi Jerry,
Here is a sample using GridView + ModalPopupExtender + UpdatePanel. In this sample we didn't add ModalPopupExtender to each row. We only add one ModalPopupExtender instead. When use click on the LinkButton , a Javascript function will be called and show the ModalPopup. The input text is inside an UpdatePanel which is inside the popped up Panel, so you can add the reason to the Database without any page refreshment. Details, please see the sample.
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
//Attach a Javascript funtion to the LinkButton.
LinkButton myLinkButton;
for (int i = 0; i < GridView1.Rows.Count; i++)
{
myLinkButton = (LinkButton)GridView1.Rows[i].Cells[4].FindControl("LinkButton1");
myLinkButton.Attributes.Add("onclick", "shopModalPopup('" + GridView1.Rows[i].Cells[0].Text + "');return false;");
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style>
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
.modalPopup {
background-color:#FFD9D5;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID"
DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False"
ReadOnly="True" SortExpression="EmployeeID" ItemStyle-Width="0" />
<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
<asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server">Click On Me</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString %>"
SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title] FROM [Employees]">
</asp:SqlDataSource>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Height="200px" Width="300px" style="display:none">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
EmployeeID:<asp:TextBox ID="tbEmployeeID" runat="server"></asp:TextBox> <br/>
Reason:<asp:TextBox ID="tbReason" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</asp:Panel>
<div style="display: none">
<asp:Button ID="Button1" runat="server" Text="Button" /></div>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"
PopupControlID="Panel1" CancelControlID="btnCancel" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<script type="text/javascript" language="javascript">
function shopModalPopup(employeeID){
//show the ModalPopupExtender
$get("<%=tbEmployeeID.ClientID %>").value = employeeID;
$get("<%=tbReason.ClientID %>").value ="";
$find("<%=ModalPopupExtender1.ClientID %>").show();
}
</script>
</form>
</body>
</html> Of course, it is not absolutely address your real requirements. You should make some modifications based on the sample.
I hope this help.
Best regards,
Jonathan