DOTNET POINT: Ajax ModalPopUpExtender Example to edit the gridview row values in asp.net

Introduction:

Here I will explain how to show the modal popup using Ajax ModalPopupExtender to edit Rows in a GridView using asp.net.

Description:

In my previous post I explained clearly how to show the gridview images with lightbox effect. Same way we can display popup using Ajax futures. In ajax we have ModalPopup extender to display data in Popup here I am doing sample to show pop up whenever user clicks on Edit button in gridview at that time I will display that particular gridview row data into Modal popup for that First design table in your database like this

Column Name	Data Type	Allow Nulls
UserId	int(set identity property=true)	No
UserName	varchar(50)	Yes
FirstName	varchar(50)	Yes
LastName	varchar(50)	Yes
City	varchar(50)	Yes
Designation	varchar(50)	Yes

After that enter some data in table to bind that data to gridview.

Now add AjaxControlToolkit.dll to your bin folder and design your aspx page like this

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<title>Untitled Page</title>

.modalBackground

{

background-color: Gray;

filter: alpha(opacity=80);

opacity: 0.8;

z-index: 10000;

}

</style>

</head>

<body>

<asp:ToolkitScriptManager ID="ScriptManager1" runat="server">

</asp:ToolkitScriptManager>

<div>

<asp:GridView runat="server" ID="gvdetails" DataKeyNames="UserId" AutoGenerateColumns="false">

<asp:TemplateField HeaderText="Edit">

<asp:ImageButton ID="imgbtn" ImageUrl="~/Edit.jpg" runat="server" Width="25" Height="25" onclick="imgbtn_Click" />

</ItemTemplate>

</asp:TemplateField>

<asp:BoundField DataField="UserName" HeaderText="UserName" />

<asp:BoundField DataField="FirstName" HeaderText="FirstName" />

<asp:BoundField DataField="LastName" HeaderText="LastName" />

<asp:BoundField DataField="City" HeaderText="City" />

<asp:BoundField DataField="Designation" HeaderText="Designation" />

</Columns>

</asp:GridView>

<asp:Label ID="lblresult" runat="server"/>

<asp:Button ID="btnShowPopup" runat="server" style="display:none" />

<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlpopup"

CancelControlID="btnCancel" BackgroundCssClass="modalBackground">

</asp:ModalPopupExtender>

<asp:Panel ID="pnlpopup" runat="server" BackColor="White" Height="269px" Width="400px" style="display:none">

<td colspan="2" style=" height:10%; color:White; font-weight:bold; font-size:larger" align="center">User Details</td>

</tr>

<tr>

UserId:

</td>

<td>

<asp:Label ID="lblID" runat="server"></asp:Label>

</td>

</tr>

<tr>

UserName:

</td>

<td>

<asp:Label ID="lblusername" runat="server"></asp:Label>

</td>

</tr>

<tr>

FirstName:

</td>

<td>

<asp:TextBox ID="txtfname" runat="server"/>

</td>

</tr>

<tr>

LastName:

</td>

<td>

<asp:TextBox ID="txtlname" runat="server"/>

</td>

</tr>

<tr>

City:

</td>

<td>

<asp:TextBox ID="txtCity" runat="server"/>

</td>

</tr>

<tr>

Designation:

</td>

<td>

<asp:TextBox ID="txtDesg" runat="server"/>

</td>

</tr>

<tr>

<td>

</td>

<td>

<asp:Button ID="btnUpdate" CommandName="Update" runat="server" Text="Update" onclick="btnUpdate_Click"/>

<asp:Button ID="btnCancel" runat="server" Text="Cancel" />

</td>

</tr>

</table>

</asp:Panel>

</div>

</form>

</body>

</html>

Here if you observe above code for ModalPopupExtender I have declared different properties to ModalPopupEtender now I will explain each property clearly

TargetControlID - The ID of the element that activates the modal popup.

Here I gave one button name btnShowPopup but that button mode is in visible=false because it’s not necessary here we are triggering popup by calling show() function in button click codebehind but if we didn’t given that targetcontrolid to ModalPopupExtender it will throw error for that reason I gave target controlid.

PopupControlID - The ID of the element to display as a modal popup.

CancelControlID - The ID of the element that cancels the modal popup.

BackgroundCssClass - The CSS class to apply to the background when the modal popup is displayed.

After completion our aspx page design write the following namespaces in codebehind

C# Code

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

using System.Drawing;

After completion of writing namespaces and write the following code

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbconnection"].ToString());

protected void Page_Load(object sender, EventArgs e)

{

if(!IsPostBack)

{

BindGridData();

}

protected void BindGridData()

{

con.Open();

SqlCommand cmd = new SqlCommand("Select * from Employee_Details", con);

SqlDataAdapter da = new SqlDataAdapter(cmd);

DataTable dt = new DataTable();

da.Fill(dt);

gvdetails.DataSource = dt;

gvdetails.DataBind();

}

protected void btnUpdate_Click(object sender, EventArgs e)

{

con.Open();

SqlCommand cmd = new SqlCommand("update Employee_Details set FirstName=@FirstName,LastName=@LastName, City=@City,Designation=@Designation where UserId=@UserId", con);

cmd.Parameters.AddWithValue("@FirstName", txtfname.Text);

cmd.Parameters.AddWithValue("@LastName", txtlname.Text);

cmd.Parameters.AddWithValue("@City", txtCity.Text);

cmd.Parameters.AddWithValue("@Designation", txtDesg.Text);

cmd.Parameters.AddWithValue("@UserId", Convert.ToInt32(lblID.Text));

cmd.ExecuteNonQuery();

con.Close();

lblresult.Text = lblusername.Text + " Details Updated Successfully";

lblresult.ForeColor = Color.Green;

BindGridData();

}

protected void imgbtn_Click(object sender, ImageClickEventArgs e)

{

ImageButton btndetails = sender as ImageButton;

GridViewRow gvrow = (GridViewRow)btndetails.NamingContainer;

lblID.Text = gvdetails.DataKeys[gvrow.RowIndex].Value.ToString();

lblusername.Text = gvrow.Cells[1].Text;

txtfname.Text = gvrow.Cells[2].Text;

txtlname.Text = gvrow.Cells[3].Text;

txtCity.Text = gvrow.Cells[4].Text;

txtDesg.Text = gvrow.Cells[5].Text;

this.ModalPopupExtender1.Show();

}

VB.NET Code

Imports System.Configuration

Imports System.Data

Imports System.Data.SqlClient

Imports System.Drawing

Imports System.Web.UI

Imports System.Web.UI.WebControls

Partial Class VBCode

Inherits System.Web.UI.Page

Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("dbconnection").ToString())

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

If Not IsPostBack Then

BindGridData()

End If

End Sub

Protected Sub BindGridData()

con.Open()

Dim cmd As New SqlCommand("Select * from Employee_Details", con)

Dim da As New SqlDataAdapter(cmd)

Dim dt As New DataTable()

da.Fill(dt)

gvdetails.DataSource = dt

gvdetails.DataBind()

End Sub

Protected Sub btnUpdate_Click(ByVal sender As Object, ByVal e As EventArgs)

con.Open()

Dim cmd As New SqlCommand("update Employee_Details set FirstName=@FirstName,LastName=@LastName, City=@City,Designation=@Designation where UserId=@UserId", con)

cmd.Parameters.AddWithValue("@FirstName", txtfname.Text)

cmd.Parameters.AddWithValue("@LastName", txtlname.Text)

cmd.Parameters.AddWithValue("@City", txtCity.Text)

cmd.Parameters.AddWithValue("@Designation", txtDesg.Text)

cmd.Parameters.AddWithValue("@UserId", Convert.ToInt32(lblID.Text))

cmd.ExecuteNonQuery()

con.Close()

lblresult.Text = lblusername.Text + " Details Updated Successfully"

lblresult.ForeColor = Color.Green

BindGridData()

End Sub

Protected Sub imgbtn_Click(ByVal sender As Object, ByVal e As ImageClickEventArgs)

Dim btndetails As ImageButton = TryCast(sender, ImageButton)

Dim gvrow As GridViewRow = DirectCast(btndetails.NamingContainer, GridViewRow)

lblID.Text = gvdetails.DataKeys(gvrow.RowIndex).Value.ToString()

lblusername.Text = gvrow.Cells(1).Text

txtfname.Text = gvrow.Cells(2).Text

txtlname.Text = gvrow.Cells(3).Text

txtCity.Text = gvrow.Cells(4).Text

txtDesg.Text = gvrow.Cells(5).Text

Me.ModalPopupExtender1.Show()

End Sub

End Class

After that set your database connection in web.config like this

</connectionStrings >

Demo

Download sample code attached

DOTNET POINT

Wednesday 22 February 2012

Ajax ModalPopUpExtender Example to edit the gridview row values in asp.net

No comments:

Post a Comment