0

I have a button to trigger the modal popup window in aspx page. I would like to populate the window with the content from database when the button is clicked.

Like,

When the button is clicked, the backend code should get executed, populate the modal window and then show the modal window.

How this can be done?

This is what I have tried.

ASPX Page:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication2.WebForm1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script runat="server">
    Sub ServerButton_Click(ByVal sender As Object, ByVal e As EventArgs)
        myfunction()
        ClientScript.RegisterStartupScript(Me.GetType(), "key", "launchModal();", True)
    End Sub
</script>

<script type="text/javascript">
    var launch = false;
    function launchModal() 
    {
        launch = true;
    }
    function pageLoad() {
        if (launch) {
            $find("mpe").show();
        }
    }
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="ClientButton" runat="server" Text="Launch Modal Popup (Client)" />
    <asp:ScriptManager ID="asm" runat="server" />
    <asp:Panel ID="ModalPanel" runat="server" Width="500px">
        This is my modal window<br />
        <asp:Label runat="server" ID="mylbl" />
        <br />
    <asp:Button ID="OKButton" runat="server" Text="Close" />
    </asp:Panel>

    <cc1:ModalPopupExtender ID="mpe" runat="server" TargetControlId="ClientButton" PopupControlID="ModalPanel"  OkControlID="OKButton" />

</div>
</form>
</body>
</html>

Code Behind:

Imports System.Web
Imports System.Web.Services
Imports System.Web.Script.Services
<WebMethod>
Protected Sub myfunction()
    mylbl.Text = "mylabel text"
End Sub

In the above code, I tried to access a method (myfunction) form the client side script which is declared with "runat=server".

5
  • E.g. encosia.com/… 1) open modal dialog 2) call AJAX method to populate dialog.
    – Boland
    Apr 20, 2015 at 4:00
  • It helps to tell us what you have tried and any issues you are having. stackoverflow.com/help/how-to-ask
    – BlackICE
    Apr 20, 2015 at 4:10
  • are you using webforms (not mvc)?
    – AiApaec
    Apr 20, 2015 at 4:15
  • I'm using Webforms and no MVC Apr 20, 2015 at 4:17
  • 1
    If you are using webforms then i'd do it using jquery (or if you are using bootstrap you can use the modal of it). I don't like to use modalpopup extender. I guess you want to populate a table and then show the table as a popup. Well, you can create a webusercontrol with the content will contains the popup, add it to tha page and put visible=false, when you click the button, then you do: myWebUsercontrol.Visible = true. But you webuser control must have a div as a container that id you can use as selector for dialag(jquery ui).
    – AiApaec
    Apr 20, 2015 at 4:22

1 Answer 1

1

Ok. I've created a solution in Monodevelop (but you can migrate it to VS without problems, only moving the folders and files). I imagine you want something like this:

Modal popup using asp.net webforms

The button "Show popup" is in the page, at the same level, there's a webusercontrol, this is the popup (well, really the webusercontrol is inside of divs, i put these divs to follow the structure of bootstrap's modal):

    <style type="text/css">
        .popup-someEntity{width: 500px;}
    </style>

</asp:Content>
<asp:Content ContentPlaceHolderID="cphContent" ID="cphContentContent" runat="server">

    <div class="page-header">
        <h3>My POPUP:</h3>
    </div>

    <!-- ======== POPUP : set Visible property to false. this must be shown from codebehind depending of an event... === -->
    <div class="">
        <asp:LinkButton ID="btnShowPopup" runat="server" OnClick="btnShowPopup_Click" 
            CssClass="btn btn-primary" 
            Text="Show Popup"></asp:LinkButton>
    </div>

    <!-- Modal popup: Note that you must wrap the control with outer divs -->
    <div class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">                    
                </div>
                <div class="modal-body">

                    <uc1:WucPopup runat="server" id="WucPopup"  Visible="false"/>

                 </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>
    <!-- /Modal popup: -->
</asp:Content>

When you click the button "Show popup" then in code behind executes this:

protected void btnShowPopup_Click(object sender, EventArgs e)
{
  this.WucPopup.ShowControl();
}

As you've noticed in html code, "WucPopup" is Visible=False so the ShowControl() method populates the table and change to Visible=true. Here is the code of the WucPopup's code behind:

protected void Page_Load(object sender, EventArgs e)
{
}

protected void btnClose_Click(object sender, EventArgs e)
{
    CloseControl();
}
public void CloseControl()
{
    this.Visible = false;
}


public void ShowControl()
{
    PopulateTable();
    this.Visible = true;
}
private void PopulateTable()
{
    List<SomeEntity> collection = new List<SomeEntity>()
    {
        new SomeEntity()
        {
            Date = DateTime.Now.ToFileTimeUtc().ToString(),
            Col1 = "Col 1", Col2 = "Col 2", Col3 = "Col 3"
        },
        new SomeEntity()
        {
            Date = DateTime.Now.ToFileTimeUtc().ToString(),
            Col1 = "Col 1", Col2 = "Col 2", Col3 = "Col 3"
        },
        new SomeEntity()
        {
            Date = DateTime.Now.ToFileTimeUtc().ToString(),
            Col1 = "Col 1", Col2 = "Col 2", Col3 = "Col 3"
        }
    };
    PagedDataSource pds = new PagedDataSource(){DataSource= collection};
    myRepeater.DataSource = pds;
    myRepeater.DataBind();
}

As you can see there's a Repeater control with ID="myRepeater. Here is the html code (here again i put divs to follow the structure of bootstrap's modal):

 <div class="myPopup popup-someEntity">

    <!-- ============ Modal header ============ -->
    <div class="modal-header">

        <!-- == Close button == -->
        <asp:LinkButton ID="lnkBtnClose" runat="server"  ToolTip="Close"
            CssClass="close"  aria-hidden="true"
            OnClick="btnClose_Click">
            <i class="fa fa-remove"></i>
        </asp:LinkButton>
        <!-- == /Close button == -->

        <h4 class="modal-title" id="myModalLabel">            
            My Modal Popup
        </h4>

    </div>
    <div class="row-separator"></div>
    <!-- ============ /Modal header ============ -->



    <!-- === Table == -->
    <div class="div-row">
        <div class="row-fluid table-responsive">
            <table class="table table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th>Date UTC</th>
                        <th>Col2</th>
                        <th>Col3</th>
                        <th>Col4</th>

                    </tr>
                </thead>
                <tbody>     

            <asp:Repeater ID="myRepeater" runat="server">
                <HeaderTemplate>                    
                </HeaderTemplate>
                <ItemTemplate>
                    <tr>
                        <td><%# Eval("Date") %></td>
                        <td><%# Eval("Col1") %></td>
                        <td><%# Eval("Col2") %></td>
                        <td><%# Eval("Col3") %></td>
                    </tr>
                </ItemTemplate>
                <FooterTemplate>                    
                </FooterTemplate>
            </asp:Repeater>
                </tbody>
            </table>
        </div>
    </div>
    <!-- === /Table == -->
</div>

Finally generated html (with the table filled and the visible popup) will be returned to the client.As you've noticed the html code of the popup control has a div as a container which has to css classes, myPopup and popup-someEntity, i use the first as a selector(all div with that class will be displayed as a popup) and i use the second to set the width of the popup). Now in the client using jquery i do this:

 $(document).ready(function () {

    //This uses bootstrap 3 modal:
    if ($(".myPopup").length > 0) {
        $(".myPopup").each(function (popupIndex) {
            var $curPopup = $(this);
            var $modalBody = $curPopup.parent();
            var $modalContent = $modalBody.parent();
            var $modalDialog = $modalContent.parent();
            var $modal = $modalDialog.parent();

            if ($curPopup.children('.modal-header').length > 0) {

                //Hide external modal-headers:
                if ($modalContent.children('.modal-header').length > 0) {
                    $modalContent.children('.modal-header').each(function () {
                        var $externModalHeader = $(this);
                        $externModalHeader.css({ 'display': 'none' });
                    });
                }
            }

            var contentWidth = $curPopup.width();
            contentWidth += 40; //add padding width
            $modalDialog.width(contentWidth);


            $modal.modal({ show: true, backdrop: "static", keyboard: false }).draggable({
                handle: ".modal-header"
            }); /*.on('shown.bs.modal', function () {
                $modalContent.css({ width: contentWidth + 'px', height: 'auto', 'max-height': '100%' });
                });*/

        });//each
    }//if myPopup 
});//ready

And voilá, the popup is displayed!.

I've omitted a few things(like bootstrap, font-awesome,.. i've used in the example) but i'm sure you understand quickly reviewing the code.

You can download the code from here: Modal popup with webforms C# (Monodevelop project)

Not the answer you're looking for? Browse other questions tagged or ask your own question.