Show Hide Panel (DIV) inside ModalPopup on Checkbox Check Uncheck using jQuery in ASP.Net

Chriz

SOLVED CLOSED ACTIVE ANSWERED
User: Chriz
Posted: on Oct 16, 2017 02:41 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 9595
Sample Code: Download

Hello, I have a problem with ModalPopupExtender.

When the user changes the value of cbShow the popup panel (pnl1) closes. When I reopen it I get to see the changes. For example, if the user checked the cbShow then pnl2 is visible.

If I don't set the AutoPostBack property to true then my code does not work and nothing happens on ChangedValue.

Any kind of help would be appreciated, thank you.

Here's my code:

  <asp:ModalPopupExtender ID="popup" TargetControlID="lnkFake" CancelControlID="btnCancel" 
        PopupControlID="pnl1" BackgroundCssClass="modalBackground" DropShadow="true"
        runat="server">
  </asp:ModalPopupExtender>
    <asp:Panel ID="pnl1" runat="server">
    <div>
       <table class="mGrid">        
           <tr>
               <td >
                   <asp:CheckBox ID="cbShow" runat="server" Autopostback="true"
                       Text="Show panel: " 
                       TextAlign="Left" OnCheckedChanged="cbShow_CheckedChanged" />
               </td>
           </tr>
         </table> 
       <br /> 
       <asp:Panel ID="pnl2" runat="server" Visible="false">
               <asp:Label ID="Label1" runat="server" Text="Show the panel"></asp:Label>              
           </asp:Panel>
       <br />   
   </div>
        <div>
            <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
        </div>
    </asp:Panel>

        protected void cbShow_CheckedChanged(object sender, EventArgs e)
        {
            if (cbShow.Checked == true)
                pnl2.Visible = true;
            else
                pnl2.Visible = false;
        }

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Oct 16, 2017 06:12 AM
Modified: on Nov 10, 2017 12:48 AM
Report

Hi Chriz,

You have to set the Autopostback property to true inorder to execute the CheckedChanged event. If you don't want to postback the page then you have to use jquery.

Refer the below modified sample.

HTML

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        .modalBackground
        {
            background-color: Black;
            filter: alpha(opacity=40);
            opacity: 0.4;
        }
        .modalPopup
        {
            background-color: #FFFFFF;
            width: 300px;
            border: 3px solid #0DA9D0;
        }
        .modalPopup .header
        {
            background-color: #2FBDF1;
            height: 30px;
            color: White;
            line-height: 30px;
            text-align: center;
            font-weight: bold;
        }
        .modalPopup .body
        {
            min-height: 50px;
            line-height: 30px;
            text-align: center;
            padding: 5px;
        }
        .modalPopup .footer
        {
            padding: 3px;
        }
        .modalPopup .button
        {
            height: 23px;
            color: White;
            line-height: 23px;
            text-align: center;
            font-weight: bold;
            cursor: pointer;
            background-color: #9F9F9F;
            border: 1px solid #5C5C5C;
        }
        .modalPopup td
        {
            text-align: left;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('[id*=cbShow]').click(function () {
                if ($(this).is(":checked")) {
                    $('[id*=pnl2]').attr("style", "display: block");
                }
                else {
                    $('[id*=pnl2]').attr("style", "display: none");
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" />
        <asp:ModalPopupExtender ID="popup" TargetControlID="btnShow" CancelControlID="btnCancel"
            PopupControlID="pnl1" BackgroundCssClass="modalBackground" DropShadow="true"
            runat="server">
        </asp:ModalPopupExtender>
        <asp:Panel ID="pnl1" runat="server" CssClass="modalPopup" Style="display: none" align="center">
            <div>
                <table class="mGrid">
                    <tr>
                        <td>
                            <asp:CheckBox ID="cbShow" runat="server" Text="Show panel: " TextAlign="Left" />
                        </td>
                    </tr>
                </table>
                <br />
                <asp:Panel ID="pnl2" runat="server" Style="display: none">
                    <asp:Label ID="Label1" runat="server" Text="Show the panel"></asp:Label>
                </asp:Panel>
                <br />
            </div>
            <div>
                <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
            </div>
        </asp:Panel>
    </div>
    </form>
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Show Hide Panel (DIV) inside ModalPopup on Checkbox Check Uncheck using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us