在初始页面加载时从服务器获取类对象并将其放入js对象的好方法是什么？

Question

目前，我正在应用程序中执行以下操作：

// Foo Controller
public ActionResult Details(int id)
{
    ViewBag.id = id;
    return View();
}

// Foo Details View
<script type="text/javascript">
    var viewBag = {
        'id': @ViewBag.id
    };// *Note: MVC will cry about a syntax error here, everything's ok though
</script>
<script type="text/javascript" src="@Url.Content("~/Views/Foo/details.js")"></script>

// details.js
$(function(){
    var jqXHR = $.ajax({
        'url': '/api/foo/getData/' + viewBag.id,
        'type': 'GET'
    });
    jqXHR.done(function(data){
        ...do stuff with data object...
    });
});

// Foo Api Controller
// Instantiates the data class object to be serialized and returned

我这样做是因为在<javascript>元素中，我不希望对象的巨大JSON字符串仅挂在这里。 理想情况下，我只想对Foo Controller进行一次调用，并使其实例化数据类对象，将其序列化为JSON字符串，然后将其分配给ViewBag.dataModel或类似的对象。

当然，我无法访问.js文件中的@ViewBag因为它是服务器端对象。 有谁知道这样做更巧妙的方法，而不是来回进行一些不必要的操作？

一种想法是解析参数的URL，但根据路由结构可能会变得很丑陋，我仍然需要等待视图的初始get才能使js脚本完成所有这些工作，但最终仍然需要无论如何打第二个电话。

我不知道是否可能，但是有一种方法可以在视图创建过程中动态生成一个.js文件，该文件可以用作js ViewBag，在details.js文件加载之前将其添加到页面中，然后能够以这种方式访问​​它？ 或者也许是在运行中修改details.js文件（如果希望缩小/捆绑在一起，这可能不理想）？

理想的结果是，我正在使用基因敲除JS，而我试图传递的初始对象是我想绑定到包含要使用的服务器中所有初始数据的页面的ViewModel。 我从服务器获取的数据对象是ViewModel，我将其映射到可观察对象并绑定到DOM。 我正在使用的当前方法似乎可以正常工作，并且似乎没有太多开销，但是如果我可以避免在页面初始加载时再次调用服务器，那将是理想的选择。

Answer 1

首先，我不会将动态信息写入script标签。 而是将数据编码为JSON，然后将其写入隐藏字段。

在使用MVC4时，您已经有了对JSON.NET的引用，因此您应该能够做到这一点：

在控制器中

public ActionResult Details(int id)
{
    var myModel = GetMyModelData(id);
    string modelJson = JsonConvert.SerializeObject(product); 
    return View(modelJson);
}

在视图中

<input type="hidden" id="model" value="@Model" />

用JavaScript

var modelJson = $('#model').val();
var modelObj = JSON.parse(modelJson);