AJAX ModalPopup Extension + JavaScript

March 09, 2015

Instruction Step.
1. Insert CSS for ModalPopup extension.

2. Insert ScriptManager.

3. Insert GridView.

4. Insert Panel1 and Control.

5. Config LinkButton by Add modalpopup extension and set PopupControlID = Panel1.

6. Code-Behind :: Load data to gridview on Page_Load event.

7. Code-Behind :: Insert javascript to linkbutton.

8. Code-Behind :: Update data by update button.

modalpopup.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="T1.aspx.vb" Inherits="T1" Trace="false" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.modalPopup
{
background-color:yellow;
border-width:1px;
border-style:solid;
border-color:Gray;
padding:1px;
width:350px;
}
.modalBackground
{
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager" runat="server">
</asp:ScriptManager>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="customerid" HeaderText="Customer ID" />
<asp:BoundField DataField="customername" HeaderText="Customer Name" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CommandArgument='<%# Eval("customerid") %>' CommandName="EditModal" CausesValidation="False">Edit</asp:LinkButton>
<asp:ModalPopupExtender ID="LinkButton1_ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground" Enabled="True" PopupControlID="Panel1" TargetControlID="LinkButton1">
</asp:ModalPopupExtender>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Width="100%">
<asp:Label ID="Label1" runat="server" Text="Customer ID"></asp:Label>
<asp:TextBox ID="txt_id" runat="server"></asp:TextBox>
<br />
<asp:Label ID="Label2" runat="server" Text="Customer Name"></asp:Label>
<asp:TextBox ID="txt_name" runat="server" Width="311px"></asp:TextBox>
<br />
<asp:Button ID="btn_Update" runat="server" Text="Update" />
<asp:Button ID="btn_Cancel" runat="server" Text="Cancel" />
</asp:Panel>
</div>
</form>
</body>
</html>

--------------------------------------------------------------------------------------------------------------

modalpopup.aspx.vb
Imports System.Data
Imports System.Data.SqlClient
Partial Class T1
Inherits System.Web.UI.Page

Dim conn As New SqlConnection("data source=server; initial catalog=test; user id=sa;password=test;")
Dim ds As New DataSet
Dim da As SqlDataAdapter
Dim sql As String
Dim cmd As SqlCommand
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If IsPostBack = False Then
sql = "select * from tbl_Customers"
da = New SqlDataAdapter(sql, conn)
da.Fill(ds, "dt")
GridView1.DataSource = ds.Tables("dt")
GridView1.DataBind()
End If
End Sub

Protected Sub GridView1_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles GridView1.RowDataBound
If e.Row.RowType = DataControlRowType.DataRow Then
Dim hpl As LinkButton = CType(e.Row.FindControl("LinkButton1"), LinkButton)
Dim script As String
script = " var id = document.getElementById(""" & txt_id.ClientID & """);"
script &= " var name = document.getElementById(""" & txt_name.ClientID & """);"
script &= " id.value = '" & Trim(e.Row.Cells(0).Text) & "';"
script &= " name.value = '" & Trim(e.Row.Cells(1).Text) & "';"
hpl.Attributes.Add("OnClick", script)
End If
End Sub

Protected Sub btn_Update_Click(sender As Object, e As EventArgs) Handles btn_Update.Click
conn.Open()
sql = "update tbl_Customers set customername = '" & txt_name.Text & "' where customerid = '" & txt_id.Text & "'"
cmd = New SqlCommand(sql, conn)
cmd.ExecuteNonQuery()
conn.Close()

sql = "select * from tbl_Customers"
da = New SqlDataAdapter(sql, conn)
da.Fill(ds, "dt")
GridView1.DataSource = ds.Tables("dt")
GridView1.DataBind()
End Sub
End Class

-------------------------------------------------------------------------------------------------------------------------