Adding values ​​from C # to DIV via JavaScript

Question

The last module of my chat script passes values ​​from C # code to JavaScript, and JavaScript will send the values ​​in a DIV. Before I used DataBinder, but when using it directly, C # code is taken by the AJAX update panel. Now I need the array of values ​​to be passed through the Timer Tick function for JavaScript. How to pass arrays from C # to JavaScript using <%= %> . The following is part of my code.

 protected void Timer1_Tick(object sender, EventArgs e) { if (MyConnection.State == System.Data.ConnectionState.Open) { MyConnection.Close(); } MyConnection.Open(); OdbcCommand cmd = new OdbcCommand("Select message from messages where name=?", MyConnection); cmd.Parameters.Add("@email", OdbcType.VarChar, 255).Value = "human"; OdbcDataReader dr = cmd.ExecuteReader(); ArrayList values = new ArrayList(); while (dr.Read()) { string messagev = dr[0].ToString(); // What should I do here? } MyConnection.Close(); } 

I do not want the values ​​to go directly to the DIV. It must first be sent in JavaScript, and then it must go into the DIV.

For more information

I need C # to retrieve data from the backend and to transfer this data to the client side (i.e. JavaScript) from JavaScript, it must be redirected to the DIV layer.

Answer 1

I am going to suggest a jQuery approach and get rid of the server side timer. Using jQuery and the jQuery.Timer plugin: http://code.google.com/p/jquery-timer/ , you can make it easier, in my opinion, and it will be better on the client side.

On an aspx page, you have an element to display the output:

 <span id="status" style="display:none"></span> 

as well as a link to jQuery, jQuery.Timer.js, and then your code to call the C # web method.

 <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="js/jquery.timer.js" type="text/javascript"></script> <script> $(function () { var timer = $.timer(getMessage, 10000); timer.play(); }) function getMessage() { $.ajax({ type: 'POST', contentType: 'application/json; charset=utf-8', url: 'message-service.asmx/getDBMessages', data: "{}", dataType: 'json', success: getMessageSuccess, error: getMessageError }) } function getMessageError(jqXHR, textStatus, errorThrown) { $('#status').html(errorThrown).show(); } function getMessageSuccess(data, textStatus, jqXHR) { $('#status').html(data.d).show(); } </script> 

I would use a web service to search for db messages on the server side:

 [WebService(Namespace = "http://site.com/service")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.Web.Script.Services.ScriptService] public class contact_service : System.Web.Services.WebService { [WebMethod] public string getDBMessages() { try { if (MyConnection.State == System.Data.ConnectionState.Open) { MyConnection.Close(); } MyConnection.Open(); OdbcCommand cmd = new OdbcCommand("Select message from messages where name=?", MyConnection); cmd.Parameters.Add("@email", OdbcType.VarChar, 255).Value = "human"; OdbcDataReader dr = cmd.ExecuteReader(); ArrayList values = new ArrayList(); while (dr.Read()) { string messagev = dr[0].ToString(); } MyConnection.Close(); return messagev; } catch (Exception ex) { return ex.Message; } } 

Hope this makes sense. I created a web server (asmx) and created my server code to return a string. In aspx markup, I use jQuery to start the timer for 10 seconds and then an .ajax message to poll the service, get the message and display it. There is no page refresh and much less hacked from my point of view.

Answer 2

Assuming your div id is div1, you can do the following

 div1.Controls.Add(new LiteralControl(dr[0].ToString()) + "<br />"); 

This will add the message text to your div.

Answer 3

There are two ways to get something in your javascript code. You can make an ajax call from javascript and return to the server what you need (like a regular string or maybe JSON). Or you can create your javascript code dynamically on the server at the original request. Looking at your code, I think the first way is the way to go. Therefore, instead of having a timer function on the server, write a temporary function in javascript and interrogate the server via ajax for new messages.

Answer 4

You can try RegisterStartupScript to call the javascript function by passing the messagev variable along with this call.

More details here: http://msdn.microsoft.com/en-us/library/bb359558.aspx

Answer 5

Just a thought; you can use flash or an applet to communicate sockets with javascript. The websocket implementation for Flash is here: https://github.com/y8/websocket-as . Maybe it's good for chat, maybe busting, though, depends.

Answer 6

I suggest you use Long Polling to receive push notifications. Read about Long Polling from here.

You can find a great example here , which explains both the server side and the client side implementation . If you are using HTML 5, I would advise you to take a look at Web Sockets

For server technology, you can use C #, but specific Node.js does all the right noise for this kind of work

Answer 7

What if you used a hidden HTML control on the page specified in the Timer1_Tick method and use this to read in the value in your javascript function. hiddenControl.Text = dr[0].ToString(); And then in the javascript function var data = document.getElementById('hiddenControl').value And here you can add this data to your div as you like.

Answer 8

Use ScriptManager and register the client block script.

  ScriptManager.RegisterClientScriptBlock( this.Page, this.GetType(), "WebUserControlSript", "FunctionABC('" + messagev + "')", true); 

And on the .aspx page, use the following javascript:

 FunctionABC(message) { append "message" to div here.. } 

Thanks,

Hi,

Dhaval Shukla