Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h3>Assuming the browser initiates the interaction</h3> <p><em>In general, your server-side C# code will</em> respond <em>to interactions initiated by your client-side code. If you're looking for ways your C# code can</em> initiate <em>the interaction in the absense of a browser request, see the next section below.</em></p> <p>If you're processing a full page response, then of course you can just output <code>script</code> tags containing the call you want to have occur. Make sure that the <code>script</code> is making the call <em>after</em> the function it's calling has already been defined by an earlier <code>script</code> tag, and if there's going to be DOM interaction be sure to put that script at the bottom of the page (or use jQuery's <code>ready</code> feature).</p> <p>Responding to Ajax calls, it's possible for the C# code to return strings containing JavaScript code, which your in-page code would then execute (e.g., via <code>eval</code> or similar), but it's generally best to avoid that.</p> <p>Instead, have the C# code return data in response to an Ajax call, and have your in-page code respond to that data by calling the appropriate function.</p> <p>A bit of a hybrid of the two is to have your C# code return data that indicates what function to call and what arguments to supply to it, and to have a map of your functions that you index into with the function name, e.g.:</p> <pre><code>var functions = { foo: function(arg0, arg1) { alert("foo called with " + arg0 + "," + arg1); }, bar: function(arg) { alert("bar called with " + arg); } }; $.ajax({ url: "/path/to/resource", dataType: "json", success: function(data) { if (data &amp;&amp; data.fname &amp;&amp; data.args) { functions[data.fname].apply(undefined, data.args); } } }); </code></pre> <p>There, your C# code would return a string containing information encoded in <a href="http://json.org" rel="nofollow">JSON</a> as an object with an <code>fname</code> property (a string giving a function name) and an <code>args</code> property (an array of arguments to pass to the function), which jQuery will deserialize into an object for you. Then we look up the function object in the map using its name (<code>functions[data.fname]</code>) and use the built-in <a href="http://es5.github.com/#x15.3.4.3" rel="nofollow"><code>Function#apply</code></a> to call it and pass in the arguments. That works because you can refer to JavaScript object properties using either dotted syntax and a literal for the property name (<code>obj.propName = 42</code>), or using bracketed syntax and a string for the property name (<code>obj["propName"] = 42</code>), where in the latter example the string can be any expression, including a variable or property reference (<code>name = "propName"; obj[name] = 42;</code>)&nbsp;&mdash; which is how we're looking the functions up on the <code>functions</code> map.</p> <p>I'm not <em>suggesting</em> you do that, just saying it's possible.</p> <h3>If you're trying to have the server initiate the interaction</h3> <p>If you want the server to reach out to the browser instead, you'll have to have some channel of communication established between them, either using the new (and variously supported) <a href="http://dev.w3.org/html5/websockets/" rel="nofollow">web sockets</a> API, or various <a href="http://en.wikipedia.org/wiki/Comet_%28programming%29" rel="nofollow">Comet techniques</a>.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload