如何在 Asp.Net MVC 中将(调试与发布)参数传递给 Aurelia 应用程序

How to pass (Debug vs Release) args to an Aurelia App within Asp.Net MVC

您将如何将 Debug 与 Release 参数传递给 Aurelia 应用程序?

就我而言,我在 MVC 应用程序中安装了 Aurelia。我想根据我的 web.config 值为 Aurelia 配置一些参数(URL 等)。

有什么办法可以做到:

<script src="~/Aurelia/jspm_packages/system.js"></script>
<script src="~/Aurelia/config.js"></script>
<script>
   System.import('aurelia-bootstrapper', @this.ViewBag.MyArgs);
</script>

哪里 this.ViewBag.MyArgs 会包含从 MVC 加载的参数?

然后我可以在我的 Aurelia 服务中使用这些参数,例如

this.httpClient.configure(x => {
   x.withBaseUrl(globalArgs.myBackendUrl);
});

将您的配置字符串注册为模块:

index.html

<script src="~/Aurelia/jspm_packages/system.js"></script>
<script src="~/Aurelia/config.js"></script>
<script>
   // register a module named "my-args" that has a single export:  "MyArgs" whose value is whatever the viewbag.MyArgs contains...
   System.set('my-args', System.newModule({ MyArgs: '@this.ViewBag.MyArgs' }));

   // standard bootstrapping logic...
   System.import('aurelia-bootstrapper');
</script>

这里的假设是剃须刀会将 { MyArgs: '@this.ViewBag.MyArgs' } 扩展为任何 @this.ViewBag.MyArgs returns... 例如 { MyArgs: 'debug=true' } 或其他...我将不得不尝试那部分。

然后在您的 javascript 代码中,您将能够像这样访问参数:

import {MyArgs} from 'my-args';

这是一个正在工作的 plunker:

http://plnkr.co/edit/Scu8bN?p=preview

这是 System.set API 上的文档:

https://github.com/systemjs/systemjs/blob/master/docs/system-api.md#systemsetmodulename-module

我知道这个问题已经得到解答,但我有一个可能有用的替代建议。

我们想根据调试或发布版本使用不同的 Breeze url,最后在 MVC 应用程序中创建了一个 ConfigController。此 returns 一个 json 对象的适当设置取决于服务器配置。然后在 Aurelia 客户端中,我们有一个配置模块,它使用 http 客户端调用 MVC 端点并根据需要设置客户端参数。

ConfigController 非常简单:

    [HttpGet]
    public IDictionary<string, object> Get()
    {
        return new Dictionary<string, object> {
            { "Application Name", "My app name" },
            { "Debug", true }
            { "APIHost", ApiSettings.APIHost },
            { "APIBaseURL", ApiSettings.APIBaseURL },
            { "LoginURL", ApiSettings.LoginURL }
        };
    }

客户端模块包含如下内容:

loadConfig() {
    let self = this; 
    let url = 'api/config';
    let req = new HttpClient();
    return req.get(url)
        .then(result => { 
            return applyConfig(result); 
        });
    }

    function applyConfig(responseMessage) {
        if (responseMessage.statusCode === 200) {
            self.appConfig = JSON.parse(responseMessage.response);
        } else {
            self.appConfig = {
                // Apply some defaults or something here
            };
        }
        return self.appConfig;
    }
}

这样做的好处之一是可以轻松地从 Azure Web 应用程序环境字符串等中添加设置。一旦我了解了 Promises,它就运作良好:-)