Agregar valores de C# a DIV a través de JavaScript

Question

El último módulo de mi script de chat pasa valores del código C# a JavaScript y JavaScript publicará valores en el DIV. Antes de usar DataBinder pero al usarlo directamente, el código de C# es tomado por el panel de actualización de AJAX. Ahora, necesito un conjunto de valores de matriz para pasar a través de la función Ticker Tick a JavaScript. ¿Cómo puedo pasar las matrices de C# a JavaScript usando <%= %>? Una parte de mi código sigue.

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(); 
    } 

No deseo que los valores se envíen directamente al DIV. Primero debe enviarse a JavaScript y luego debe ir a DIV.

Para más aclaración

Necesito C# para recuperar datos de backend y para pasar los datos a lado del cliente (es decir, JavaScript) de JavaScript que tiene que ser reenviado a la capa DIV.

Answer 1

voy a sugerir la llegada jQuery y deshacerse del temporizador del lado del servidor. Usando JQuery y el plugin JQuery.Timer: http://code.google.com/p/jquery-timer/, puede hacerlo más fácilmente en mi opinión y será más agradable para el cliente.

En su página aspx que tiene el elemento para mostrar la salida:

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

y también una referencia a jQuery, JQuery.Timer.js, y luego su código para llamar al método web C#.

<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> 

me gustaría utilizar un servicio web para el lado del servidor de recuperación de mensajes db:

[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; 
     } 
    } 

Esperamos que esto tenga sentido. Creé un servidor web (asmx) y creé mi código del lado del servidor para devolver una cadena. En el marcado de aspx utilizo JQuery para iniciar un temporizador durante 10 segundos y luego una publicación .ajax para sondear el servicio, recuperar el mensaje y mostrarlo. Sin página de actualización y mucho menos hacky desde mi punto de vista.

Answer 2

Suponiendo que el ID de su div es div1, puede hacer lo siguiente

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

Eso anexará el texto del mensaje a su Div

Answer 3

Hay dos maneras de conseguir algo en el código JavaScript. Puede hacer una llamada ajax desde javascript y hacer que el servidor devuelva lo que necesita (como una cadena normal o tal vez como JSON). O puede construir su código javascript dinámicamente en el servidor en la solicitud original. Mirando su código, creo que el primer método es el camino a seguir. Por lo tanto, en lugar de tener la función del temporizador en el servidor, escriba una función temporizada en javascript y consulte el servidor a través de ajax para obtener nuevos mensajes.

Answer 4

Puede probar RegisterStartupScript para llamar a su función javascript, pasando la variable 'messagev' junto con esa llamada.

Ver más aquí: http://msdn.microsoft.com/en-us/library/bb359558.aspx

Answer 5

Sólo un pensamiento; puede usar Flash o un applet para tener comunicación de socket con javascript. Una implementación de websocket para Flash se encuentra aquí: https://github.com/y8/websocket-as. Podría ser bueno para el chat, aunque tal vez exagerado, depende.

Answer 6

Le sugiero que use Long Polling para recibir notificaciones push. Lea acerca de sondeo largo de here

puede encontrar un gran ejemplo here, lo que explica tanto por el lado del servidor y del lado del cliente implementation. Si , que está utilizando HTML 5, sugeriría que echar un vistazo a Web Sockets

Para la tecnología del lado del servidor se puede utilizar C#, pero un cierto Node.js está haciendo todos los sonidos correctos para este tipo de trabajo

Answer 7

¿Qué sucede si utilizó un control HTML oculto en la página que estableció en el método Timer1_Tick y lo utiliza para leer el valor en su función javascript. hiddenControl.Text = dr[0].ToString(); Y luego en la función javascript var data = document.getElementById('hiddenControl').value Y luego aquí puede agregar esa información a su Div como lo desee.

Answer 8

Uso ScriptManager a y registrar el bloque de script de cliente ..

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

Y en la página .aspx utilice el siguiente javascript:

FunctionABC(message) 

{ 
    append "message" to div here.. 
} 

Gracias,

Saludos,

Dhaval Shukla