We help IT Professionals succeed at work.
Get Started

How to pass javascript variables back to c#

1,273 Views
Last Modified: 2014-05-01
First, thank you for your time.

I am building a c# Silverlight Lightswitch application.  If you are not that familiar with LightSwitch then think of this as a regular ole silverlight aspx .net application.  

In the first window I have a WebBrowser control that will show the html code below.  Basically, all this html does is present the user with a menu of tutorial videos.  The user then clicks on a tutorial image.  The javascript code captures the id and href of the clicked on tutorial and should pass them to the c# code.

The c# code will play the video in the second window.

Passing the clicked on id and href of the clicked on tutorial to the c# code is where I am stuck.  

I am not emotionally wedded to a particular approach I just want the thing to work.  You can tell me how to do this with Data Binding, Script Manager or even some other approach and I would be happy with any solution.  By the way, Silverlight might get in the way of the approach suggested.  If it does, we will need to explore another approach.

Thank you very much.

<!DOCTYPE html>
<html>
    <head>
        <title>My title</title>
        <script>
            function playTutorial(id, href) {
				// A thumbnail/image was clicked on.  
				// Attempt 1) Place the incoming parameters into fields that can be referenced by the code behind.
                document.getElementById("ClickedOnIdHidden").value = id;
                document.getElementById("ClickedOnHrefHidden").value = href;

				// Attempt 2) Place the incoming parameters into fields that can be referenced by the code behind.
				document.getElementById("<%= ClickedOnIdHidden%>").value = id;
				document.getElementById("<%= ClickedOnHrefHidden%>").value = href;

				// The following PlayTutorialN methods will show and play the href in another window 
				// along with other housekeeping chores.
			
				// Attempt 1) Call the C# public method PlayTutorial1 and that method 
				// will reference the hidden fields to get the values.
                window.external.PlayTutorial1();			// PlayTutorial1 is not found!
				
				// Attempt 2) Call the C# public method PlayTutorial2 and pass the values in.
                window.external.PlayTutorial2(id, href);	// PlayTutorial2 is not found!
				
				// Attempt 3) Raise some event (like a Click event or a Notify event) that is
				// captured on the C# side.  That click event handler will get the values.
				// What code goes here?
            }
        </script>
    </head>
    <body>
        <input id="ClickedOnIdHidden" runat="server" />    <!-- During debugging remove the hidden attribute:  type="hidden" -->
        <input id="ClickedOnHrefHidden" runat="server" />  <!-- During debugging remove the hidden attribute:  type="hidden" -->

		<div class="ThumbnailSection" onclick="playTutorial(1, 'https://www.youtube.com/watch?v=0t8yDnyOaQ8')">
			<img src="http://www.socialmobilemarketingsystems.com/MasterSchedule/DummyThumbnail.png" alt="A tutorial" />
		</div>
		<p />
		<div class="ThumbnailSection" onclick="playTutorial(2, 'https://www.youtube.com/watch?v=RKyGDWeblQw')">
			<img src="http://www.socialmobilemarketingsystems.com/MasterSchedule/DummyThumbnail.png" alt="A tutorial" />
		</div>
    </body>
</html>

Open in new window


public partial class Tutorials
{
	partial void Tutorials_Created()
	{
	}
	
        // This method should be called by the javascript code when the user clicks
        // on the tutorial image.
	public void PlayTutorial(int tutorialId, string tutorialHref)
	{
		// This method will play the tutorial.
                // /Even though the code is not here, I know how to do this part.
                // 
	}
}

Open in new window

Comment
Watch Question
Top Expert 2014
Commented:
This problem has been solved!
Unlock 1 Answer and 2 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE