将 ViewBag 数据传递给 requirejs 或 KNOCKOUT

Question

我是js的新手，现在正在尝试将HTML5 AJAX文件上传模块集成到我的 ASP.NET MVC项目中。

在我的项目中，有一个ViewBag.UserID，在视图中我使用模块中的脚本：

<script type="text/javascript" data-main="/scripts/main" src="/Scripts/require.js"></script>

我想我可以使用上面的脚本将UserID传递给main.js，以便我可以使用类似的东西

var UserID;
html5Upload.initialize({
    // URL that handles uploaded files
    uploadUrl: '/file/upload?Userid=' + UserID,
    ...
    });

但。。。我该怎么做才能实现这一点？

Answer 1

你可以有一些引导代码来将服务器端全局变量集成到你的JavaScript中。 例如：

<script>
(function(myNamespace) {
  "use strict";
  myNamespace.UserInfo = {
    UserID: '@ViewBag.UserID' // injects viewbag info into javascript
  };
}(window.myNamespace = window.myNamespace || {}));
</script>

现在，您拥有的任何 javascript 都可以访问全局myNamespace变量的 UserInfo 属性，其中包含 viewbag 数据。例如：

uploadUrl: '/file/upload?Userid=' + myNamespace.UserInfo.UserID,

Answer 2

@Jeroen的建议非常正确。但是，这是另一种方法，对于您的目的来说可能有些矫枉过正，但您也可以在许多其他地方使用它：SuperScript 是一个库，它允许您在服务器端代码中声明一个 JavaScript 变量，并将该变量发送到输出网页。

所以在你的情况下，你可能会有类似的东西

SuperScript.JavaScript.Declarations.AddVariable(opt => opt.EmitterKey("javascript")
                                                          .Name("user_id")
                                                          .Value(UserID));

在您的剃刀视图/_layout

@SuperScript.Declarations.EmitFor("javascript")

哪个会写出来

var user_id = "...";    // the string value of UserID

除了此解决方案背后的可扩展性之外，它还允许您避免共享视图中不存在 ViewBag 属性的错误，并提供一种轻松地将值/对象从代码移动到前端的方法。

免责声明：我是SuperScript的开发人员之一。