2010-08-12 34 views
32

¿Alguien sabe cómo pasar una matriz C# ASP.NET a una matriz JavaScript? El código de muestra también será bueno.Pase C# matriz ASP.NET a la matriz Javascript

Disculpa si fui vago antes chicos. La pregunta es bastante simple. Digamos que para simplificar, que en mi archivo aspx.cs Declaro:

int [] numbers = new int[5]; 

Ahora quiero pasar numbers al lado del cliente y utilizar los datos de la matriz dentro de JavaScript. ¿Cómo haría esto?

+0

¿Estás hablando de serializar a JSON? –

+0

Creo que necesitamos más detalles aquí. ¿Desea pasar si desde el código subyacente al aspx o desea usar AJAX para enviar una matriz de datos a JavaScript ... o algo completamente diferente? – samandmoore

+0

por favor vea arriba. lo siento por ser demasiado vago. – locoboy

Respuesta

13

Puede usar ClientScript.RegisterStartUpScript para inyectar javascript en la página en Page_Load.

Aquí hay un enlace a la referencia de MSDN: http://msdn.microsoft.com/en-us/library/asz8zsxy.aspx

Aquí está el código de Page_Load:

List<string> tempString = new List<string>(); 
    tempString.Add("Hello"); 
    tempString.Add("World"); 

    StringBuilder sb = new StringBuilder(); 
    sb.Append("<script>"); 
    sb.Append("var testArray = new Array;"); 
    foreach(string str in tempString) 
    { 
    sb.Append("testArray.push('" + str + "');"); 
    } 
    sb.Append("</script>"); 

    ClientScript.RegisterStartupScript(this.GetType(), "TestArrayScript", sb.ToString()); 

Notas: El uso de StringBuilder para crear la cadena de la escritura, ya que probablemente será largo.

Y aquí está el Javascript que comprueba la matriz inyectada "TestArray" antes de poder trabajar con él:

if (testArray) 
{ 
    // do something with testArray 
} 

Hay 2 problemas aquí:

  1. Algunos consideran que esta intrusiva para C# para inyectar Javascript

  2. Tendremos que declarar la matriz en un contexto global

Si no puede vivir con eso, otra forma sería hacer que el código C# guarde el Array en Ver Estado, luego haga que JavaScript use PageMethods (o servicios web) para devolverle la llamada al servidor y obtener Ver el objeto de estado como una matriz. Pero creo que puede ser exagerado para algo como esto.

+0

Voy a echar un vistazo gracias por la explicación. Una cosa, ¿a qué matriz se refiere como global y por qué? – locoboy

+0

también puede indicar a qué se refiere this.GetType()? – locoboy

+2

@Gary: Mi preocupación aquí es la serialización ad hoc. Si las cadenas en esa lista fueran para contener comillas simples, tendríamos un problema. Es por eso que usar el serializador JSON es más seguro. –

51

serializarlo con System.Web.Script.Serialization.JavaScriptSerializer clase y asignar a javascript var

muestra ficticia:

<% var serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); %> 
var jsVariable = <%= serializer.Serialize(array) %>; 
+0

disculpa la ambigüedad. por favor mira arriba. – locoboy

+0

@zerkms ¿podría explicar lo que está pasando? lo siento, soy novato en este – locoboy

+0

@zerkms. ¿Considera editar esta respuesta para completarla y resaltar el hecho de que admite tipos arbitrarios? –

10

En el archivo de página:

<script type="text/javascript"> 
    var a = eval('[<% =string.Join(", ", numbers) %>]'); 
</script> 

mientras que en código detrás:

public int[] numbers = WhatEverGetTheArray(); 
+0

No estoy seguro de entender la respuesta aquí ... ¿puedes explicarme? – locoboy

+0

@ cfarm54-En el código subyacente, inicializa los números int [] llamados. Y luego en javascript, 'string.Join (", ", numbers)' hace que la matriz "numbers" sea una cadena como "1,2,3,4". Después de eso, usamos 'eval ('[1,2,3,4]')' para convertir una cadena tipo array a una matriz. –

+0

ahhh complicado. sin embargo, ¿cuál es el tipo de la matriz js? – locoboy

17

Esto es para complementar la respuesta de zerkms.

Para pasar los datos a través de las barreras de idioma, necesitaría una forma de representar los datos como una cadena serializando los datos. Uno de los métodos de serialización para JavaScript es JSON. En el ejemplo de zerkms, el código se colocaría dentro de una página aspx.Para combinar su ejemplo y los suyos juntos en una página aspx, que tendría,

<% 
    int[] numbers = new int[5]; 
    // Fill up numbers... 

    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); 
%> 

algún lugar más adelante en la página aspx

<script type="text/javascript"> 
    var jsVariable = <%= serializer.Serialize(numbers) %>; 
</script> 

Esta respuesta, sin embargo, asume que se está generando JavaScript de la página inicial carga. Según los comentarios en su publicación, esto podría haberse hecho a través de AJAX. En ese caso, haría que el servidor responda con el resultado de la serialización y luego lo deserialice en JavaScript utilizando su marco de trabajo favorito.

Nota: Tampoco marque esto como una respuesta, ya que quería que el resaltado de sintaxis haga que otra respuesta sea más clara.

+0

¿Quiere decir: var jsVariable = <% = serializer.Serialize (números)%> ? – locoboy

+0

también, ¿a qué te refieres generatign js desde la carga inicial de la página? – locoboy

+0

No, porque estás en el contexto de generar JavaScript. Cuando tiene números int [] = new int [5] {1, 3, 5, 7, 9}, serializarlo le da "[1, 3, 5, 7, 9]". Entonces, el javascript generado se convierte en "var jsVariable = [1, 3, 5, 7, 9];" –

6

Para matriz de objetos:

var array= JSON.parse('@Newtonsoft.Json.JsonConvert.SerializeObject(numbers)'.replace(/&quot;/g, "\"")); 

Para matriz de int:

var array= JSON.parse('@Newtonsoft.Json.JsonConvert.SerializeObject(numbers)'); 
3

Preparar una matriz (en mi caso es matriz 2D):

 // prepare a 2d array in c# 
     ArrayList header = new ArrayList { "Task Name", "Hours"}; 
     ArrayList data1 = new ArrayList {"Work", 2}; 
     ArrayList data2 = new ArrayList { "Eat", 2 }; 
     ArrayList data3 = new ArrayList { "Sleep", 2 }; 
     ArrayList data = new ArrayList {header, data1, data2, data3}; 
     // convert it in json 
     string dataStr = JsonConvert.SerializeObject(data, Formatting.None); 
     // store it in viewdata/ viewbag 
     ViewBag.Data = new HtmlString(dataStr); 

analizarlo en la vista.

<script>  
    var data = JSON.parse('@ViewBag.Data'); 
    console.log(data); 
</script> 

En su caso, puede usar directamente el nombre de la variable en lugar de ViewBag.Data.

1

Se me ocurrió esta situación similar y la resolví tranquilamente. Esto es lo que hice. Suponiendo que ya tiene el valor en matriz en su página aspx.cs.

1) Ponga un campo oculto en su página aspx y el identificador de campo oculto para almacenar el valor de la matriz.

HiddenField2.Value = string.Join(",", myarray); 

2) Ahora que el campo oculto tiene el valor almacenado, solo separado por comas. Use este campo oculto en JavaScript como este. Simplemente cree una matriz en JavaScript y luego almacene el valor en esa matriz eliminando las comas.

var hiddenfield2 = new Array(); 
hiddenfield2=document.getElementById('<%=HiddenField2.ClientID%>').value.split(','); 

Esto debería resolver su problema.

+0

Gracias, con todas las nuevas MVC y otras tecnologías, me olvidé de este clásico: P –