Call a javascript function registered using c# from typescript

Question

I have added a function call from C# using RegisterStartupScript as follows:

Page.ClientScript.RegisterStartupScript(this.GetType(), "PrintWindowJScript", "<script type=\"text/javascript\">OpenNewWindow() { Reports_OpenWindowNamed(URL, 350, 250, \"PrintAttachPopupWindow\"); }</script>");

The above code will add it into the DOM, so when i call OpenNewWindow(), it should call the function from my angular component.

Now in my angular component i have a dropdown change function in Typescript (Angular). I need to call the OpenNewWindow() from here as mentioned below.

interface IMyWindow {
  OpenNewWindow: Function;
}
declare var v_MyWindow: IMyWindow ;

export class MyComponent implements OnInit {

  ngOnInit() {
  }

  attachChange(attachDropDown: any) {
    if(attachDropDown.value && attachDropDown.value.id == "MyValue"){
      v_MyWindow.OpenNewWindow();
    }
  }
}

The above code gives me "v_MyWindow" as undefined.

I have tried refering to this article, but not working.

Can anyone let me know if i am missing anything? What should i do to call the function?

What is your current code and the error you are encountering? — jegtugado
– jegtugado, Commented May 6, 2020 at 11:18
@jegtugado i have updated it to include a detailed explaination — Sridhar Sondur
– Sridhar Sondur, Commented May 6, 2020 at 11:43

jegtugado · Accepted Answer · 2020-05-06 13:13:44Z

1

You've already created the interface and declared the variable v_MyWindow, you only need to assign the property OpenNewWindow.

change:

Page.ClientScript.RegisterStartupScript(this.GetType(), "PrintWindowJScript", "<script type=\"text/javascript\">OpenNewWindow() { Reports_OpenWindowNamed(URL, 350, 250, \"PrintAttachPopupWindow\"); }</script>");

to:

Page.ClientScript.RegisterStartupScript(this.GetType(), "PrintWindowJScript", "<script type=\"text/javascript\">v_MyWindow.OpenNewWindow = function() { Reports_OpenWindowNamed(URL, 350, 250, \"PrintAttachPopupWindow\"); }</script>");

answered May 6, 2020 at 13:13

jegtugado

5,1511 gold badge14 silver badges35 bronze badges

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

Comments

GeofoxCoding · Accepted Answer · 2020-05-06 12:44:48Z

where do you assign a value to v_MyWindow? Maybe you first want to get a reference to the native window object in Angular.

An approach to that is explained here: https://juristr.com/blog/2016/09/ng2-get-window-ref/

Basically you define an injectable wrapper around the window import:

import { Injectable } from '@angular/core';

function _window(): any {
   // return the global native browser window object
   return window;
}

@Injectable()
export class WindowRef {
   get nativeWindow(): any {
      return _window();
   }
}

Then you import it into your application like this:

import { WindowRef } from './WindowRef';

@NgModule({
    ...
    providers: [ WindowRef ]
})
export class AppModule{}

Consume you depency in your component like that:

export class MyComponent implements OnInit {
    constructor(
        private nativeWindow: WindowRef) { }

    ngOnInit(): void {
        console.debug('Native window inner width: ', this.nativeWindow.nativeWindow.innerHeight);
    }
}

This should give you a console output like this:

Collectives™ on Stack Overflow

Call a javascript function registered using c# from typescript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related