Osadzanie nieprzetworzonych danych w HTML do parsowania w jQuery

Question

Mieszkam w świecie komputerów przez większą część mojej kariery, więc wybacz mi, że zadaję takie podstawowe pytanie, ale nie jestem do końca pewien, od czego zacząć.

Chcę zwrócić niektóre surowe dane wraz z moim HTML, a następnie analizować i wyświetlać dane za pomocą jQuery, gdy tylko HTML będzie gotowy. Z grubsza wiem, jaki powinien wyglądać mój kod js, ale nie jestem pewien, jak powinienem osadzić surowe dane w moim kodzie HTML.

Mogę użyć $ .getJSON(), ale byłoby lepiej, gdybym mógł mieć dane bezpośrednio w moim HTML.

Myślę, że albo json, albo XML działałyby, ale jaki jest właściwy sposób na ich ucieczkę/osadzenie/przeanalizowanie, kiedy są osadzone w HTML?

Z góry dziękuję.

Answer 1

Możesz umieścić dane JSON w ukrytym div, a następnie dekodować i używać z jQuery.

Na przykład weźmiemy:

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

Ucieczka go i umieścić w div:

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

Następnie z jQuery, możemy wykorzystać dane:

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

Wywołanie alert(data.foo) da nam apple.

Here's a working example.

Answer 2

Jakbyś powiedział, że to prawdopodobnie najlepiej dostać go za pośrednictwem Ajax za pomocą $ .post lub .get $ lub $ (element) .load() etc ...

Ale jeśli trzeba zapisać go na stronie powszechne jest oszczędzanie w ukrytym polu. Asp.net zapisuje rzeczy w ukrytych polach przy użyciu serializacji binarnej i Base64, ale możesz zapisać je jako ciąg Jsona, a następnie użyć go w swoim JS.

Answer 3

Gdzie i kiedy chcesz te dane?

Jeśli chcesz go w widoku, po prostu przekazać dane do widoku

Akcja/kontrolera:

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

A potem, gdzieś w widoku:

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

Of Oczywiście, jeśli pracujesz z List<string> lub `string [] ', musisz go sformatować do odpowiedniego JavaScript dla jQuery, aby to zrozumieć.

<script> 
    var dataArray = [ 

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

Byłoby getter jeśli generowane prawidłowego JavaScript w działaniu zamiast widoku, aby uniknąć brzydkiego znaczników w widoku:

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

Teraz można wykonać następujące czynności w widoku:

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