Call JavaScript Function from C# .aspx .net app

jaykapalczynski · ‎05-01-2020

I have an aspx C# .net app that was written apart from me

I added a map component outside the FORM tags.

I am trying to find a trigger that AFTER the page loads where I can fire off a JavaScript Function....I am stuck and have tried a hundred different Google searches...

Is there an after Page Load that I can reference from the aspx page?

OR

How can I call a Separate JS file Function that resides in the Solution from C# .net after some sort of trigger from the .net page

PLEASE HELP

jaykapalczynski · ‎05-08-2020

Than Aung‌ I cannot thank you enough for all your thoughts and support....I had a difficult case here as I was restrained by the developer that created this website and think that through your thoughts and steering I was able to come up with a solution....OF course this could not have happened without your guidance.....I cannot thank you enough....peace.

I think I may have found a solution that works for me....

My main issue was that I could not rely on the page load complete event to reference my javascript code because of the way the web site was designed. But the dojo/ready was always an option if I could control when I called it....

After some testing I think this is the solution....right now I am simply calling this on the page load complete. which as stated before was an issue....

I should be able to control when this is called....whether it be on a text box focus, combo box change etc...etc

I NOW have absolute control when I load the JS page using the dojo/ready function to start my code.

protected void Page_Load(object sender, EventArgs e)
{
   Page.LoadComplete += new EventHandler(Page_LoadComplete);
}


void Page_LoadComplete(object sender, EventArgs e)
{
    string myScript2 = "\n<script type=\"text/javascript\" language=\"Javascript\" src=\"js/index.js\">\n";
    myScript2 += "\n\n </script>";
    Page.ClientScript.RegisterStartupScript(this.GetType(), "myKey", myScript2, false);
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I should now be able to do this like I was trying to do !!!!!! Still relaying on when the script loads

protected void gvNew_SelectedIndexChanged(object sender, EventArgs e)
{
   string myScript2 = "\n<script type=\"text/javascript\" language=\"Javascript\" src=\"js/index.js\">\n";
   myScript2 += "\n\n </script>";
   Page.ClientScript.RegisterStartupScript(this.GetType(), "myKey", myScript2, false);
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

jaykapalczynski · ‎05-01-2020

Note: this is a stand alone JS page in the .net solution.....I need to call a function in the stand alone JS page after page load.

Anonymous User · ‎05-02-2020

Hi jay kapalczynski‌,

Is that possible to share the solution?

Anyway, here is the tip.

And here is the onclientclieck event you can try. Button.OnClientClick Property (System.Web.UI.WebControls) | Microsoft Docs

If you want to perform customization only after page load, you can use LoadComplete event.

This is the life cycle of the aspx form.

ASP.NET Page Life Cycle Overview | Microsoft Docs

If you want to wireup the client event to particular control, you can perform by playing attributes properties of the control.

Another tip ->

If you need to perform scriptlet like that to get particular control client id and perfrom in javascript, the best way is to add the external js reference or script tag just before end of body tag </body>.

document.getElementById("<%=lbl_passwordStrength.ClientID%>").innerHTML = strength;

jaykapalczynski · ‎05-04-2020

Thanks and that helps.....SO I am grabbing a session variable from the Page_LoadComplete and now need to pass this to an external js page. Its in the solution but not in the aspx etc.

js indexed from the Site.Master aspx page

    <script lang="javascript" src = "js/index.js" type="text/javascript"></script>‍‍

void Page_LoadComplete(object sender, EventArgs e)
   {
       // call your download function

       //Check if the Session value exists
       if (Session["ID"] != null)
       {
           string IDGUID = Session["ID"].ToString();
           TextBoxIDGUID.Text = IDGUID;
       }

      // Call a function in the index.js page referenced in the main aspx page      
      // I do want this to fire after page load NOT from a button
      // ????????
 }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

jaykapalczynski · ‎05-04-2020

Trying this to call the JS Page

void Page_LoadComplete(object sender, EventArgs e)
    {
       ClientScript.RegisterStartupScript(GetType(), "Javascript", "javascript:Testreturn(); ", true);
    }‍‍‍‍‍‍‍‍‍‍

Anonymous User · ‎05-04-2020

Hi jay kapalczynski‌,

I got what you are trying to do now.

To call js function after aspx page is fully loaded, the best place is before the end of body tag by adding js script.

<body>


<script type="text/javascript">
//
// try by checking page load event finish and call your js method here
    </script>
</body>‍‍‍‍‍‍‍‍

In the js script , if you are using arcgis js library, you can use dojo dom ready package to track whether page load is finished.

https://dojotoolkit.org/reference-guide/1.10/dojo/domReady.html

In pure js way, this stackoverflow discussion can help you.

Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready...

jaykapalczynski · ‎05-05-2020

Thanks for the info....trying to read through it....confusing but trying...

At the top of the Site.Master I have the JS reference

At the bottom of the Site.Master I have the following code...

I get the alert saying "alert here" so I received conformation the page was loaded.

I then try and call a JS function that exists in the location of the reference (external JS File)

I do NOT get that alert...so I am not getting there...

ALTHOUGH I get the Alert from the domReady in the JS page -- alert("In the JS file");

ALTHOUGH I can get the Alert for the ready function and CALL the myFunction() and get its alert

BUT this is simply being done on Load of the Pages....

I need to call a functions separate from a Page Load success.....is it even possible to call a JS function directly from C# aspx .net????

What am I missing here.....going back to read your post to try and figure this out. Maybe I am totally confused here....Client and Server is hard to work with....uggggg

 <!-- TOP OF THE SITE.MASTER  -->

    <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css"/>
    <script src="https://js.arcgis.com/4.14/"></script>
    <script lang="javascript" src = "js/index.js" type="text/javascript"></script>




 <!-- BOTTOM OF THE SITE.MASTER  -->
    <script>
        function docReady(fn) {
            // see if DOM is already available
            if (document.readyState === "complete" || document.readyState === "interactive") {
                // call on next available tick
                setTimeout(fn, 1);
            } else {
                document.addEventListener("DOMContentLoaded", fn);
            }
        }  
        docReady(function () {
            // DOM is loaded and ready for manipulation here
            alert("alert here");

            // NOW CALL MY JS FUNCTION IN THE index.js external file
            myFunction();

        });
    </script>


</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

EXTERNAL JS FILE Referenced above.

require([
    "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer",
    "dojo/ready", "dojo/domReady!"
], function (Map, MapView, FeatureLayer,
   ready
) {
        "use strict";


    function myFunction(){
        alert("In myFunction in the JS Page via C# Call");
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

    alert("In the JS file");

    ready(function () {
        alert("In the function called by the Ready Function");
        myFunctionFromReady();
    });

    function myFunctionFromReady(){
        alert("In myFunction in the JS Page via JS Ready function Call");
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

jaykapalczynski · ‎05-05-2020

Again this application is not mine and the developer is only using one page and hiding and making visible stuff....frustrating because this makes the page load not function the way I was expecting....Although it is doing what I want -- the way the app is built does not allow me to use the page load complete call.... no go for me....

I think all of this will work fine once I find a new trigger to run this code.

Back to the drawing board .... will be in touch soon....I think your help is sufficient but want to check a few things before we close this one and give you the credit...

jaykapalczynski · ‎05-05-2020

Than Aung‌

I want to do this....not sure if I can

I can get the Alert and the value from "script" below (In the TrEdit.aspx.cs FILE seen below)

I would like to take that and pass it to an external Javascript function defined in the aspx page

Maybe this is whats causing my error below?

Maybe I cannot do this entirely?

ERROR:

VM187:1 Uncaught ReferenceError: myFunctionCSharp is not defined
at <anonymous>:1:13

Site.Master -- Notice context to MainContent referencing the second ASPX page below

The JS page is defined here on the Site.Master file....

<!-- SNIP -->

    <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css"/>
    <script src="https://js.arcgis.com/4.14/"></script>
    <script lang="javascript" src = "js/index.js" type="text/javascript"></script>

<!-- SNIP -->

</head>

<body class="home">

<!-- SNIP -->

        <main>
            <br />
            <br />
            <article>
                <form id="form1" runat="server">
                    <div id="content">
                        <h1>List</h1>
                        <h2 id="tagline"><i><%: Page.Title %></i></h2>
                        <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
                    </div>
                </form>
            </article>
        </main>‍‍‍‍‍‍‍‍‍‍‍‍‍

<!-- SNIP -->


</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

TrEdit.aspx file - Notice the reference to the .aspx.cs page below

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="TrEdit.aspx.cs" Inherits="NW.Edit" MaintainScrollPositionOnPostback="true" %>


<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">‍‍‍‍

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

TrEdit.aspx.cs FILE

I am trying to call the JavaScript function from here BECAUSE I cannot do it on the page load complete as I am not being sent to another page...I want to fire the JS code from this function

I AM RUNNING the below code in the protected void from xxxx.aspx which is referenced in the Site.Master file... ID="MainContent"

        protected void gvTrappers_SelectedIndexChanged(object sender, EventArgs e)
        {
            int i;
            if (row != null)
            {
                i = row.RowIndex; ;
            }
            else
            {
                btnExpandCritters_Click(sender, e); // pass it on....
            }

            // =====================================

            string IDGUID = Session["NWTL_ID_String"].ToString();
            string IDGUIDstring = IDGUID;    
            string nIDGUID11 = "alert(\"" + IDGUIDstring + "\")";           
            string script = nIDGUID11;

            ScriptManager.RegisterStartupScript(this, GetType(),"ServerControlScript", script, true);

            ScriptManager.RegisterStartupScript(this, GetType(), "Javascript", "javascript: myFunctionCSharp(IDGUID);", true);
        }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

In the EXTERNAL JS PAGE

require([
    "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"
], function (Map, MapView, FeatureLayer
) {
        "use strict";

function myFunctionCSharp(input) {
     var inputValue = input;
     alert(inputValue);
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

jaykapalczynski · ‎05-05-2020

Than Aung‌

I saw this...Not sure how to call a function that is in the JS file itself though....

Using JavaScript Along with ASP.NET 2.0 | Microsoft Docs

Keeping JavaScript in a Separate File (.js)

Keeping JavaScript functions in a separate file (a .js file) is highly recommended. Once they are in a separate file and part of a project, the file can be imported into a page using some of the methods already described.

For instance, a .js file can be included in an ASP.NET page using the following code:

Visual Basic

Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "MyScript", _

"MyJavaScriptFile.js")

C#

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript",

"MyJavaScriptFile.js");

Once the .js file is imported into the ASP.NET page, any of the JavaScript functions can be called as before. This is a great way to manage JavaScript functions and keep them separate from the other logic of ASP.NET pages. It is also an easy way to use the same JavaScript functions on multiple ASP.NET pages.