Powered by MSDN

US - English
NEW! Silverlight 5 is available Learn More

How Can I Call javascript function in SilverlightControl RSS

13 replies

Last post Mar 26, 2012 10:15 PM by wwward

(0)
  • BlackSoul

    BlackSoul

    Member

    8 Points

    5 Posts

    How Can I Call javascript function in SilverlightControl

    Feb 26, 2008 07:16 AM | LINK

    I want to call javascript functions in a control,

    eg. I have a button control "sl_btn",and a grid control "sl_grid",in "sl_grid" I create some "sl_btn",and I add the "sl_grid" in page.xaml, I want each button event could call some javascript function.how can I do?

    SilverlightrLight 1.1 Alpha Refresh Silverlightlight SilverlightControl

  • mchlSync

    mchlSync

    Star

    14968 Points

    2799 Posts

    Re: How Can I Call javascript function in SilverlightControl

    Feb 26, 2008 08:32 AM | LINK

    If you wrote the click event in managed code, you can read this post  Silverlight Tips/Tricks: Communicating between Javascript and C#

     

    (If this has answered your question, please click on "Mark as Answer" on this post. Thank you!)

    Regards,
    Michael Sync
    Silverlight MVP

    Blog : http://michaelsync.net
  • BlackSoul

    BlackSoul

    Member

    8 Points

    5 Posts

    Re: How Can I Call javascript function in SilverlightControl

    Feb 27, 2008 01:54 PM | LINK

    thx . But I want to call it in silverligtcontrol..

  • lewisb

    lewisb

    Member

    217 Points

    82 Posts

    Re: How Can I Call javascript function in SilverlightControl

    Feb 27, 2008 03:30 PM | LINK

    The easiest way to to have Javascript handle an event fired by your silverlight application.  Then call whatever function you need from that handler.

     You will need to use the scriptable attribute on your silverlight control, as well as Register a scriptable object for javascript to recognize.  I do it like so:

     In Page_Loaded:

    WebApplication.Current.RegisterScriptableObject("sApp", this);

    And create some event:

    [Scriptable]

    public event EventHandler MyEvent;

     Then in your createSilverlight.js file:

    events: { onLoad:HookSilverlightEvent }

    function HookSilverlightEvent()

    {

    var control = document.getElementById("SilverlightControl");

    control.Content.sApp.MyEvent= MyJavascriptFunction;

    }

     

    Let me know if that doesn't help.  I use this method to capture several events in javascript from silverlight to control another activeX control on the same page.

     Good Luck!

    -Lewis

  • Allen Chen – MSFT

    Allen Chen –...

    Star

    14215 Points

    1854 Posts

    Microsoft

    Re: How Can I Call javascript function in SilverlightControl

    Feb 28, 2008 01:34 AM | LINK

    Sincerely,
    Allen Chen
    Microsoft Online Community Support

    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
  • BlackSoul

    BlackSoul

    Member

    8 Points

    5 Posts

    Re: How Can I Call javascript function in SilverlightControl

    Feb 29, 2008 02:24 AM | LINK

    Thank you very much.
    But I had another problem: I can call javascript function in page.xmal.cs, because the class "page" inherit from "Canvas", the scriptable attribute can be work correctly. But I want use like this.

    eg: I have 3 files,page.xaml.cs, CreateSilvetlight.js, TestControl.xaml.cs

    in  page.xmal.cs:

      [Scriptable]
        public partial class Page : Canvas
        {

            public Page()
            {
                WebApplication.Current.RegisterScriptableObject("subcanvas", this);//  If I regist ScriptableObject here I Can call funtions,but when I regist it in TestControl.xaml.cs, it do not work.
            }

            public void Page_Loaded(object o, EventArgs e)
            {
                // Required to initialize variables
                InitializeComponent();
                subcanvas.MouseLeftButtonUp += new MouseEventHandler(btnCallScript_MouseLeftButtonUp);
            }

            void btnCallScript_MouseLeftButtonUp(object sender, MouseEventArgs e)
            {
                if (CallScript != null)
                {
                    CallScript(this, EventArgs.Empty);
                }
            }

           

            [Scriptable]
            public event EventHandler CallScript;
        }


    TestControl.xmal.cs

     public class TestControl.: Control
        {
            FrameworkElement root;

            public TestControl()
            {
                System.IO.Stream s = this.GetType().Assembly.GetManifestResourceStream("MagicStore.Silverlight.StoryBord.xaml");
                root = this.InitializeFromXaml(new System.IO.StreamReader(s).ReadToEnd());
                Loaded += new EventHandler(TestControl_Loaded);
            }

           [Scriptable]
            public event EventHandler CallScript; //I try disable this in page.xaml.cs, but when page onload, there is a javascript error.

            void TestControl_Loaded(object sender, EventArgs e)
            {
                if (CallScript != null)
                {
                    CallScript(this, EventArgs.Empty);
                }
            }
        }

    the javascript file is some funtions, I can call it in page.xaml.cs.

    So I want to know how can write the code I can call the function in testcontrol.xaml.cs. do you have some code demo,mail me please, blacksoulylk@gmail.com , thx.

  • ZeroKoll

    ZeroKoll

    Participant

    764 Points

    132 Posts

    Re: How Can I Call javascript function in SilverlightControl

    Feb 29, 2008 08:54 AM | LINK

    You have to regiter the user control with RegisterScriptableObject too. At the moment I can only see that you are registering your page, but not the user control. I guess you are creating a TestControl in code somewhere in your code for the page. After creating the object you probably have to call RegisterScriptableObject...

    void btnCallScript_MouseLeftButtonUp(object sender, MouseEventArgs e)
    {
          TestControl myControl = new TestControl();
          WebApplication.Current.RegisterScriptableObject("myTestControl", myControl);

           if (CallScript != null)
           {
               CallScript(this, EventArgs.Empty);
           }
    }

    This way you know that when your javascript is called from your page event, the user control has been registered and you can hook up another handler for the controls event

  • PGallagher69

    PGallagher69

    Member

    38 Points

    17 Posts

    Re: How Can I Call javascript function in SilverlightControl

    Feb 29, 2008 09:18 AM | LINK

    Have you any idea how the javascript is hooked up if... instead of using the "function createSilverlight()" method of embedding the XAML control, you use an AJAX script manager?

    The problem being there is no CreateSilverlight.js file to add the javascript code to hook the XAML event up and also no javascript OnLoad event either of course.

    All the examples I have seen rely on the user having the CreateSilverlight.js file, none appear to deal with the AJAX method at all...

    Your thoughts would be greatly appreciated!

    Pete

  • ZeroKoll

    ZeroKoll

    Participant

    764 Points

    132 Posts

    Re: How Can I Call javascript function in SilverlightControl

    Feb 29, 2008 02:07 PM | LINK

    When you use the XAML control there is an attribute called OnClientXamlLoaded, with which you can point out a JavaScript to run when the xaml-page has loaded. That should solve your problem I guess...

  • BlackSoul

    BlackSoul

    Member

    8 Points

    5 Posts

    Re: How Can I Call javascript function in SilverlightControl

    Mar 04, 2008 08:27 AM | LINK

    Thx,^_^ Your answer reminded me. I try to hooked up the event handler in another method,but I faild,I think there I did not registed the scribleobjectblock in javascript.I do it like this.

    1) .I regist scribleobjectblock  in page.xaml.cs

            public Page()
            {
                WebApplication.Current.RegisterScriptableObject("subcanvas", this);
            }

           subcanvas.MouseLeftButtonUp += new MouseEventHandler(btnCallScript_MouseLeftButtonUp);

           void btnCallScript_MouseLeftButtonUp(object sender, MouseEventArgs e)
            {
                if (CallScript != null)
                {
                    CallScript(this, EventArgs.Empty);
                }
                GridView t = new GridView();
            }

            [Scriptable]
            public event EventHandler CallScript;

    2) . in js file

    function OnLoaded(){
        var control = document.getElementById('SilverlightControl');
        control.Content.subcanvas.CallScript =  OnCallScript;
    }

    function OnCallScript()
    {
        alert("I Test"); //this method can be work.
         var control = document.getElementById('SilverlightControl');
        control.Content.GridView.InitStory =  InitStory; //Look at here, I try it like this. step 3. but I failed.
    }

    function InitStory()
    {
    //do something.
    }

    3) . in control file---GridView.xaml.cs
    [Scriptable]
    public partial class GridView : Control
    {
    .........
    public GridView()
    {
    .....................
    WebApplication.Current.RegisterScriptableObject("GridView", this);
    }
    .................
    //hook some event use InitStory
     [Scriptable]
     public event EventHandler InitStory;
    }

     

    And I also try RegisterScriptableObject "InitStory" in GridView.Loaded .

    And I try to get the class page in control to regist;

                FrameworkElement subcanvat = ((FrameworkElement)root.Parent);
                FrameworkElement main = ((FrameworkElement)subcanvat.Parent);
                Page p = (Page)main;
                WebApplication.Current.RegisterScriptableObject("GridView", p);

    I have used any way I can think out, How can I use the javascript function in silverlight control.