在HTML中嵌入原始数据以在jQuery中解析

Question

在我职业生涯的大部分时间里,我一直生活在桌面世界中,所以请原谅我提出这样一个基本问题,但我不太清楚从哪里开始寻找.

我想返回一些原始数据和我的HTML,并在HTML准备好后立即使用jQuery解析和显示数据.我大致知道我的js代码应该是什么样子,但我不确定如何在HTML中嵌入原始数据.

我可以使用$ .getJSON(),但如果我可以在HTML中使用数据,那会更好.

我认为json或XML都可以工作,但是当它们嵌入HTML中时,什么是逃避/嵌入/解析这些的正确方法？

提前致谢.

Answer 1

您可以将JSON数据放在隐藏的div中,然后从jQuery解码和使用.

例如,我们将采取:

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

逃避它并放入div:

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

然后从jQuery,我们可以使用数据:

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

所以打电话alert(data.foo)会给我们apple.

这是一个有效的例子.

Answer 2

您想在何时何地想要这些数据？

如果您想在视图中使用它,只需将数据传递给视图即可

动作/控制器:

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

然后,在您看来的某个地方:

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

当然,如果你正在处理一个List<string>或`string []',你需要将它格式化为适当的JavaScript以便jQuery理解它.

<script>
     var dataArray = [

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

如果您在操作中生成适当的JavaScript而不是视图以避免视图中出现丑陋的标记,那将是更好的:

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

现在,您可以在视图中执行以下操作:

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