c# - 在初始页面加载时从服务器获取类对象并将其放入 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 或类似的东西。

当然我无法访问 @ViewBag位于 .js 文件内，因为它是服务器端对象。有谁知道有一种更简洁的方法来做到这一点，而不是进行这种不必要的来回操作？

一个想法是解析参数的 URL，但这可能会变得丑陋，具体取决于路由结构，我仍然需要等待初始 get View 让 js 脚本完成所有这些工作，但最终仍然必须进行第二次调用。

我不知道这是否可能，但是有没有一种方法可以在 View 创建期间动态生成 .js 文件，该文件可以用作 js ViewBag，在加载details.js 文件之前将其添加到页面，然后能够以这种方式访问​​它吗？或者也许可以动态修改details.js 文件(如果需要缩小/捆绑，这可能不理想)？

期望的结果是，我正在使用knockoutJS，并且我试图传递的初始对象是我想要绑定(bind)到包含我想要使用的服务器的所有初始数据的页面的ViewModel。我从服务器获取的数据对象是 ViewModel，我将其映射到可观察对象并绑定(bind)到 DOM。我当前使用的方法似乎工作正常，并且似乎没有太多开销，但如果我可以避免在页面初始加载时第二次调用服务器，那就太理想了。

Answer 1

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

当您使用 MVC4 时，您已经有了对 JSON.NET 的引用，因此您应该能够执行以下操作:

在 Controller 中

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

在 View 中

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

在 JavaScript 中

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