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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Edit value from Popup</title>

    <style type="text/css">

      .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>

    <form id="form1" runat="server">

    <div>

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

      <h2>

        Edit from ModalPopup</h2>

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

        <ContentTemplate>

          <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">

        <ContentTemplate>

          <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>

        <Triggers>

          <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.