Activate javascript string onload on code behind C#

Question

Good day!

I need a help on activating my javascript function via on-load on code behind.

Here is my code:

string script = @"var applyCss = function () {
var css = '#CalendarPanel1-month-day-20170607, #CalendarPanel1-month-day-20170614 {background-color: #D0D3D4;}';

        Ext.net.ResourceMgr.registerCssClass('someCssClassId', css);
        }; ";

ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "css", script, true);

By the way, my code above works in front-end via button click.

But my desired result is, I want my javascript function to work on page load without needing to click the button. I put my javascript function in code-behind because I will put dynamic dates in the css variables. The code above still has static variables. (CalendarPanel1-month-day-20170607)

Will gladly appreaciate any response / solution. Big thanks!

Etienne · Accepted Answer · 2017-06-01 05:27:38Z

2

You could use an immediately invoked function to do the trick. Basically you don't give a name to your javascript function and you invoke it right after it's defined.

For example:

var script = @"(function () {alert('Hello');})(); ";
ScriptManager.RegisterStartupScript(this, typeof(Page), "123", script, true);

You need to wrap the function with its body between parenthesis then another set of parenthesis to invoke the function.

You can also pass parameters to your function (which I'm assuming it's what you want to do):

var myAlertText = "Hello Hello";
var script = @"(function (myText) {alert(myText);})('" + myAlertText  + "');" ;

If I were you though I would defined the function in client code and just invoke it from code behind with the right parameters.

answered Jun 1, 2017 at 5:27

Etienne

1,1161 gold badge12 silver badges22 bronze badges

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

Comments

Fabrício Murta · Accepted Answer · 2017-06-02 06:07:09Z

An alternative and fancier way to call javascript code from code behind would be using X.Call(). Check out this example:

<%@ Page Language="C#" %>

<!DOCTYPE html>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            string script = @"var myJSSideVar = 'my var value';
    var applyCss = function (paramOne, paramTwo) {
    var css = '#CalendarPanel1-month-day-20170607, #CalendarPanel1-month-day-20170614 {background-color: #D0D3D4;}';
    Ext.net.ResourceMgr.registerCssClass('someCssClassId', css);
    Ext.Msg.alert('applyCss called.', 'I\'ve been run with parameters: (' + paramOne + ', ' + paramTwo + ').');
};";

            var hi = "hello";

            X.AddScript(script);
            X.Call("applyCss", new object[] { hi, new JRawValue("myJSSideVar") });
        }
    }
</script>

<html>
<head runat="server">
    <title></title>
</head>
<body>
    <form runat="server" id="form1">
    <div>
        <ext:ResourceManager runat="server" />
    </div>
    </form>
</body>
</html>

Notice the second parameter sent to the script call is sent "raw", i.e., it calls: applyCss("hello", myJSSideVar)

If you need to pass but one single parameter you don't need to pass an array, e.g. X.Call("applyCss", hi);

Collectives™ on Stack Overflow

Activate javascript string onload on code behind C#

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related