Calling a JavaScript function from codebehind

Question

I've looked at responses to similar questions like this, but since I'm new to ASP.NET, I'm not sure they apply to exactly what I'd like to do.

I have a button on a .aspx page that once pressed, I'd like its click event to call a JavaScript function I have on my MasterPage to show a modal popup.

I'd like the click event to also be able to update the content of the modalpopup. Is this possible by putting .aspx labels in the modalpopup and setting their text from code-behind?

Here is the code for my JavaScript modalpopup:

<script>
    // Demo modal
    function openModal() {
        $.modal({
            content: '<p>This is an example of modal window.</p>' +
                      '<p>Test text:</p>' +
                      '<ul class="simple-list with-icon">' +
                      '    <li>Sample Text</li>' +
                      '</ul>',
            title: 'Example modal window',
            maxWidth: 500,
            buttons: {
                'Open new modal': function (win) { openModal(); },
                'Close': function (win) { win.closeModal(); }
            }
        });
    }
</script>

Currently this popup is shown when someone clicks a link that has an "openModal" onclick event. But how can I have it up after a .aspx button has done a postback, and how can I dynamically change its text?

I'd like to be able to just have a modalpopup function on my MasterPage, that any other page could populate with content to show any messages that they need.

I also wanted to note that this is being done on a postback, in case any responses are based on the page is not being refreshed.**

Answer 1

Try something like:

Response.Write("<script> openModal(); </script>");

Or if you are using ScriptManager on the page then you can also try using this:

System.Web.UI.ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "CallFunction", "openModal();", true);

Answer 2

C#:

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack) {
        if ((Session("myButtonWasClicked") != null)) {
            string content = "<p>This is an example of modal window.</p>";
            //make sure to escape any characters that need escaping

            StringBuilder sb = new StringBuilder();
            sb.Append("<script type='text/javascript'>openModal('" + content + "');</script>");

            Page page = HttpContext.Current.CurrentHandler;

            ClientScriptManager cs = page.ClientScript;
            cs.RegisterClientScriptBlock(typeof(Reports), "modulFunction", sb.ToString, false);

            Session("myButtonWasClicked") = null;
        }
    }
}

//Don't forget to assign this event to your button
protected void btn_Click(object sender, EventArgs e)
{
    Session("myButtonWasClicked") = 1;
}

VB.NET:

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If IsPostBack Then
        If Not IsNothing(Session("myButtonWasClicked")) Then
            Dim content As String = "<p>This is an example of modal window.</p>" 'make sure to escape any characters that need escaping

            Dim sb As New StringBuilder
            sb.Append("<script type='text/javascript'>openModal('" + content + "');</script>")

            Dim page As Page = HttpContext.Current.CurrentHandler

            Dim cs As ClientScriptManager = page.ClientScript
            cs.RegisterClientScriptBlock(GetType(Reports), "modulFunction", sb.ToString, False)

            Session("myButtonWasClicked") = Nothing
        End If
    End If
End Sub

Protected Sub btn_Click(sender As Object, e As EventArgs) Handles btn.Click
    Session("myButtonWasClicked") = 1
End Sub

Where Reports is the type of a class or page your code is in.

Your Script:

<script>
// Demo modal
            function openModal(param) {
                $.modal({
                    content: param,
                    title: 'Example modal window',
                    maxWidth: 500,
                    buttons: {
                        'Open new modal': function (win) { openModal(); },
                        'Close': function (win) { win.closeModal(); }
                    }
                });
            }
</script>