Show Modal Popup in Ajax Updatepanel with Updateprogress Example in Asp.net

By: Suresh Dasari Jun 16, 2015

Introduction:

Here I will explain how to show modal popup in updatepanel with updateprogress example in asp.net using c#, vb.net. By using ajax postbacktrigger and updateprogress properties in ajax updatepanel we can show modal popup with loading image during postbacks like binding data to gridview or during change paging in asp.net using c#, vb.net.

Description:

In previous articles I explained display gridview row details in popup window on hyperlink click in asp.net, jQuery show gridview row details in modal popup in asp.net, asp.net confirmationbox with yes/no options using modalpopup, ajax modalpopupextender to edit gridview row details, group columns in gridview, gridview examples in asp.net and many articles relating to gridview, asp.net, c#,vb.net and jQuery. Now I will explain how to show modal popup in updatepanel with updateprogress example in asp.net using c#, vb.net.

Before implement this example first design one table productinfo in your database as shown below

Column Name	Data Type	Allow Nulls
productid	Int(IDENTITY=TRUE)	Yes
productname	varchar(50)	Yes
price	varchar(50)	Yes

Once table created in database enter some dummy data to test application now open your aspx page and write the code like as shown below

<title>Bind gridview in updatepanel updateprogress example in asp.net using c#, vb.net</title>

.overlay

{

position: fixed;

z-index: 999;

height: 100%;

width: 100%;

top: 0;

background-color: Black;

filter: alpha(opacity=60);

opacity: 0.6;

-moz-opacity: 0.8;

}

.GridviewDiv {font-size: 100%; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helevetica, sans-serif; color: #303933;}

.headerstyle

{

color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079;background-color: #df5015;padding:0.5em 0.5em 0.5em 0.5em;text-align:center;

}

</style>

function showProgress() {

var updateProgress = $get("<%= UpdateProgress.ClientID %>");

updateProgress.style.display = "block";

}

</script>

</head>

<body>

<asp:ScriptManager ID="scriptmanager1" runat="server"></asp:ScriptManager>

<asp:UpdatePanel runat="server" ID="updatepanel1" UpdateMode="Conditional">

<asp:Button ID="btnUpload" Text="Get Data" runat="server" onclick="btnGet_Click" OnClientClick="showProgress()" /><br /><br />

<asp:GridView runat="server" ID="gvDetails" AllowPaging="true" PageSize="10" AutoGenerateColumns="false" Width="420px" OnPageIndexChanging="gvDetails_PageIndexChanging">

<asp:BoundField DataField="productid" HeaderText="Product Id" />

<asp:BoundField DataField="productname" HeaderText="Product Name" />

<asp:BoundField DataField="price" HeaderText="Price" />

</Columns>

</asp:GridView>

</div>

</ContentTemplate>

<asp:PostBackTrigger ControlID="btnUpload" />

</Triggers>

</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="updatepanel1">

</div>

</ProgressTemplate>

</asp:UpdateProgress>

</form>

</body>

</html>

Now open your codebehind file and add following namespaces in codebehind

C# Code

using System;

using System.Web.UI.WebControls;

using System.Data;

using System.Data.SqlClient;

After completion of adding namespaces you need to write the code like as shown below

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btnGet_Click(object sender, EventArgs e)

{

BindGridview();

}

protected void BindGridview()

{

DataSet ds = new DataSet();

using (SqlConnection con = new SqlConnection("Data Source=Suresh;Integrated Security=true;Initial Catalog=MySampleDB"))

{

con.Open();

SqlCommand cmd = new SqlCommand("select * from productinfo", con);

SqlDataAdapter da = new SqlDataAdapter(cmd);

da.Fill(ds);

con.Close();

gvDetails.DataSource = ds;

gvDetails.DataBind();

}

System.Threading.Thread.Sleep(2000);

}

protected void gvDetails_PageIndexChanging(object sender, GridViewPageEventArgs e)

{

gvDetails.PageIndex = e.NewPageIndex;

BindGridview();

}

VB.NET Code

Imports System.Web.UI.WebControls

Imports System.Data

Imports System.Data.SqlClient

Partial Class VBCode

Inherits System.Web.UI.Page

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

End Sub

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

BindGridview()

End Sub

Protected Sub BindGridview()

Dim ds As New DataSet()

Using con As New SqlConnection("Data Source=Suresh;Integrated Security=true;Initial Catalog=MySampleDB")

con.Open()

Dim cmd As New SqlCommand("select * from productinfo", con)

Dim da As New SqlDataAdapter(cmd)

da.Fill(ds)

con.Close()

gvDetails.DataSource = ds

gvDetails.DataBind()

End Using

System.Threading.Thread.Sleep(2000)

End Sub

Protected Sub gvDetails_PageIndexChanging(ByVal sender As Object, ByVal e As GridViewPageEventArgs)

gvDetails.PageIndex = e.NewPageIndex

BindGridview()

End Sub

End Class

Demo

Download Sample Code Attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

Subscribe by RSS

Subscribe by Email

1 comments :

Anonymous said...: very nice and clear explanation.. How can I get email subscription for your daily posts?; June 17, 2015 at 6:22 AM

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments ( Atom )

ASP.NET,C#.NET,VB.NET,JQuery,JavaScript,Gridview