VB.NET - Cannot get modalpopup to display when called from a ctl inside update panel?

Asked By Tim Cadieux on 19-Jun-12 01:46 PM

Earn up to 10 extra points for answering this tough question.

I set some text to my lnkedit_Style ctl at runtime but users can update it at any point. I do this by placing the lnkEdit_style button iside an update panel. This works perfectly fine, but I want to be able to let the user click on the lnkEdit_style ctl, display a modalpopupextender, submit then update the text for lnkEdit_style.

The below works when the lnkEdit_Style button is outside the UpdatePanel, but then the new text won;t appear until the next refresh.

The below does nothing becuase Firebug tells me modalpopup is null

<asp:Label ID="lblCat_Prefix" runat="server" Text="Categorised as: "></asp:Label>
<asp:UpdatePanel ID="updBeerCat" runat="server">
<ContentTemplate>                 
   <asp:LinkButton  ID="lnkEdit_Style" runat="server"  Text="(Edit)" ></asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>

Private Sub lnkEdit_Style_Click(ByVal sender As Object, ByVal e As System.EventArgs)Handles lnkEdit_Style.Click
    mpeEditStyle.Show()
End Sub

Jitendra Faye replied to Tim Cadieux on 20-Jun-12 12:36 AM

If you are using ModalPopupExtender then it is difficult to perform server side operation on button link.

use jquery poupup. For this example I am using blockui plugi.

you can download from here-

http://jquery.malsup.com/block/#download

like this -

function ShowDialog() {
        $.blockUI({ message: $("#panel"), css: { width: '360px'} });

        //Adding this line to make postback
        $('#panel').parent().appendTo($("form:first"));

        return false;
      }

<div id="panel" style="display: none; vertical-align: top;">
<asp:Panel ID="pnlAssignClients" runat="server" Height="280px" Width="360px" BackColor="White">
    Enter Text <asp:TextBox ID="txtEdit" runat ="server" ></asp:TextBox>
   <asp:Button ID="BtnOK" runat="server" Text="ok" onclick="BtnOK_Click" />
</asp:Panel>
</div>

.cs file-

protected void BtnOK_Click(object sender, EventArgs e)
    {
      lnkEdit_Style.Text = txtEdit.Text;
    }

Try this and let me know.

Tim Cadieux replied to Jitendra Faye on 20-Jun-12 08:53 AM

Unfortunately, I have this issue with the 10-15 popups throughout the site, so I<d like to try and fix the issue, rather than replace them all, if possible.

Vikram Singh Saini replied to Tim Cadieux on 23-Jun-12 08:54 AM

Well! I tried your problem statement. And I have framed solution for same given below.

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Edit value from Popup</title>

.ModalPopupBG

{

background-color: rgb(230, 255, 191);

filter: alpha(opacity=50);

-moz-opacity: 0.5;

-khtml-opacity: 0.5;

opacity: 0.5;

}

</style>

</head>

<body>

<div>

<ajax:ToolkitScriptManager ID="scriptManager" runat="server" EnablePageMethods="true" />

<h2>

Edit from ModalPopup</h2>

<asp:UpdatePanel ID="UpdateProg1" runat="server">

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />

</ContentTemplate>

</asp:UpdatePanel>

<asp:Label ID="lblCat_Prefix" runat="server" Text="Categorised as: "></asp:Label>

<asp:UpdatePanel ID="updBeerCat" runat="server">

<ajax:ModalPopupExtender ID="modalPopup" runat="server" BackgroundCssClass="ModalPopupBG"

TargetControlID="HyperLink1" PopupControlID="UpdateProg1" />

<asp:HyperLink ID="HyperLink1" runat="server" Style="display: none;" />

<asp:LinkButton ID="lnkEditStyle" runat="server" Text="(Edit)" OnClick="lnkEditStyle_Click" />

</ContentTemplate>

<asp:AsyncPostBackTrigger ControlID="lnkEditStyle" />

</Triggers>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

Default.aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

{

protected void lnkEditStyle_Click(object sender, EventArgs e)

{

modalPopup.Show();

}

protected void btnSubmit_Click(object sender, EventArgs e)

{

lnkEditStyle.Text = "Update";

modalPopup.Hide();

}

Test it and let us know back if it helped you or not.