C# code in Javascript only runs once!

I want to send an email to the users who are watching the video.

So I have a JavaScript code like:

var n = 0开发者_如何学Go ;
//this is the Youtube EventHandler method which will get the new state of Youtube player
function OnStateChange(newState)
{
     // 1 means the player is playing video.
     if(newState == 1)
     {
          <% send(); %>
          document.getElementById("counter").innerHTML =  ++n; 
     }
}

And I have a div in the html body

<div id="counter"></div>

the send() method is a C# function which sends email to somebody.

I thought that each time, when the palyer is playing, there should be an email which will be sent to somebody. However, it only runs once which is the fisrt time when the page is loading.

After that, I opened the firebug to see what's there. But what I saw is

var n = 0 ;
//this is the Youtube EventHandler method which will get the new state of Youtube player
function OnStateChange(newState)
{
     // 1 means the player is playing video.
     if(newState == 1)
     {
          //there is nothing >_<;;;
          document.getElementById("counter").innerHTML =  ++n; 
     }
}

So my question is how to make the send() can be run for the each time when the state of player is 1(playing)?

Thanks in advance.

C# is run when rendering the page (before page load)

You will have to use an AJAX call to your server, in the OnStateChange function in your JavaScript

You can not call server side code (C# code) from client side code (JavaScript code).

Not in the way you're trying to do it.

You must trigger some kind of AJAX callback inside the if (newState === 1), and handle the event server side.

Oh, by the way: doing it like this will spam people every time they pause and restart the playback. Not nice. You should implement a check to send the e-mail only once.

That <% send(); %> part isn't magical code whereby the browser can execute server side code. It is a server side instruction: while rendering the page (including the javascript) this is executed on the server, before the text is sent to the client.

In your case, that email was sent always before the user saw the page and could change that state.

To save you the trouble of AJAX you can use old dirty tricks.

First, add hidden form field and hidden iframe to the .aspx code:

<input type="hidden" name="Send" value="0" />
<iframe name="SendFrame" style="display: none;"></iframe>

Second, have such JS code instead:

if(newState == 1)
{
   document.forms[0].elements["Send"].value = "1";
   document.forms[0].target = "SendFrame";
   document.forms[0].submit();
   document.getElementById("counter").innerHTML =  ++n; 
}

And finally in your C# code behind have this in the Page_Load method:

if (Request.Form["Send"] == "1")
   send();

Edit: some explanation first. The above code changes the form target, making it submit itself into the hidden frame instead of to the current page which is the default behavior. This cause "AJAX-like" result, without using "real" AJAX. Why? Because data is sent from the browser to the server without the user seeing anything and without page reload. That's what I've done before AJAX existed.

Now, in case you need to use PostBack in the page, it won't work anymore because the form will still post itself to the frame so the data is "lost". Solution is changing the target back.. as changing it right after submitting the form is likely to cause problems timer is the best way IMO, and revised code is:

if(newState == 1)
{
   document.forms[0].elements["Send"].value = "1";
   document.forms[0].target = "SendFrame";
   document.forms[0].submit();
   window.setTimeout(function() { document.forms[0].target = ""; }, 1000);
   document.getElementById("counter").innerHTML =  ++n; 
}

This will set the target back to empty after one second, allowing the form to be submitted to the hidden frame in the meanwhile.

Finally you ask "why old trick rather than new"? Because it will work without using any further libraries of code. It's as cross browser as any modern AJAX solutions. Ideal solution to your problem would be telling you to include jQuery in your code then the revised code will be only this:

if(newState == 1)
{
   $.post(document.forms[0].action, { "Send": "1" });
   document.getElementById("counter").innerHTML =  ++n; 
}

And have the same server side code. Personally I don't think you need to include the whole jQuery library just for this one thing, it's like buying 5L water container when you want only one glass - but it's your choice of course. :)

Edit II: Regarding .ashx it's the standard way to "listen" for stuff like what we're doing here: instead of posting "Send" to the same page the ideal way is sending it to .ashx listener and have the code sending the mail in there. If you want, read this tutorial which looks excellent and come back when you're ready for more. ;)