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

Nikita Silverstruk · Accepted Answer · 2013-07-10 21:30:21Z

3

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>

edited Jul 10, 2013 at 21:30

answered Jul 10, 2013 at 18:04

Nikita Silverstruk

1,1171 gold badge20 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ian Campbell Over a year ago

+1 that's pretty cool, but the user is asking in the context of C# I think.

Nikita Silverstruk Over a year ago

Yeah, didn't pay attention, fixed now.

Cineno28 Over a year ago

Thank you, I will try this out! From looking at it, it seems like you're saying I can call the function this way, but is there a way to also send the content of the modal being shown? For example, I wasn't sure if you could embed a .net label into a javascript function

Cineno28 Over a year ago

@Nikita Silverstruk Oh I see, great! One more question, you said "Where Reports is the type of a class/page your code is in." Can you specify what you're referring to, or send a link? Sorry if that's elementary, I'm pretty new to this.

Nikita Silverstruk Over a year ago

@Cineno28, For example your JavaScript is on page Reports.aspx and the C# code is in the code behind of that page. In this case you would use typeof(Reports). Say, you have a class Manipulation.cs and there is a method that you use to call a popup function. In this case, you would use typeof(Manipulation).

|

Peter Mortensen · Accepted Answer · 2015-11-28 08:52:37Z

2

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

edited Nov 28, 2015 at 8:52

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jul 10, 2013 at 17:58

Andrusho

1552 silver badges10 bronze badges

1 Comment

Cineno28 Over a year ago

I'm still new so I'll definitely look into ScriptManager. I didn't realize I could call it that way. Thanks for the help, I'll try this out

Collectives™ on Stack Overflow

Calling a JavaScript function from codebehind

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related