Incorpora dati grezzi in HTML per analizzare in jQuery

Question

Ho vissuto nel mondo desktop per gran parte della mia carriera, quindi perdonami per aver fatto una domanda così fondamentale, ma non sono abbastanza sicuro da dove cominciare a cercare.

Desidero restituire alcuni dati grezzi insieme al mio codice HTML e analizzare e visualizzare i dati utilizzando jQuery non appena l'HTML è pronto. So approssimativamente come dovrebbe essere il mio codice js, ma non sono sicuro di come dovrei incorporare i dati grezzi nel mio HTML.

Potrei usare $ .getJSON(), ma sarebbe meglio se potessi avere i dati nel mio HTML.

Penso che JSON o XML funzionerebbero, ma qual è il modo corretto di sfuggire/incorporarli/analizzarli quando sono incorporati in HTML?

Grazie in anticipo.

Answer 1

È possibile inserire i dati JSON in un div nascosto, quindi decodificare e utilizzare da jQuery.

Per esempio, prendiamo:

{"foo":"apple","bar":"orange"} 

fuga e messo in una div:

<div id="data">%7B%22foo%22%3A%22apple%22%2C%22bar%22%3A%22orange%22%7D</div> 

Poi da jQuery, siamo in grado di utilizzare i dati:

var data = jQuery.parseJSON(unescape($("#data").html())); 

Quindi chiamare alert(data.foo) ci darà apple.

Here's a working example.

Answer 2

Come hai detto è probabilmente meglio per ottenerlo tramite Ajax utilizzando $ .post o $ .get o $ (elemento) .load() ecc ...

Ma se è necessario salvarlo nella pagina è comune salvare in un campo nascosto. Asp.net salva le cose nei campi nascosti usando la serializzazione binaria e Base64 ma puoi salvarlo come una stringa Json e quindi usarlo nel tuo JS.

Answer 3

Dove e quando vuoi questi dati?

Se si desidera che nella vostra vista, basta passare i dati alla vista

Azione/Controller:

public ActionResult MyAction() 
{ 
    ViewData["MyData"] = "this is a sample data of type string"; 
    return View(); 
} 

E poi, da qualche parte nella tua vista:

<script> 
    var data = '<%= ViewData["MyData"] %>'; 
    $(document).ready(){ 
     alert(data); 
    } 
</script> 
<h1><%: ViewData["MyData"] %></h1> 

Di Ovviamente, se stai lavorando con uno List<string> o `stringa [] ', dovresti formattarlo su JavaScript appropriato per jQuery per capirlo.

<script> 
    var dataArray = [ 

    <% foreach(string s in (string[])ViewData["MyDataArray"]){ %> 
     <%= s %>, 
    <% } %> 
    ]; 
</script> 

Sarebbe getter se si è generato il corretto JavaScript nell'azione invece della vista per evitare brutti markup nella vista:

public ActionResult MyAction() 
{ 
    string[] myArray = new string[]{ "hello", "wolrd" }; 
    ViewData["MyData"] = myArray; 
    ViewData["JavaScriptArray"] = "[" + myArray.Aggregate((current,next) => string.Format("'{0}','{1}',", current, next).TrimEnd(new char[] { ','})) + "]"; 
    // or you can use your favorite JavaScript serialize 
    return View(); 
} 

Ora è possibile effettuare le seguenti operazioni nella visualizzazione:

<script> 
    var dataArray = <%= ViewData["MyJavaScriptArray"] %>; 
    alert(dataArray[0]); // alerts 'hello' 
</script>