ASP.NET MVC3 - 从 Action 动态创建 javascript答案

【问题标题】：ASP.NET MVC3 - Dynamically create javascript from ActionASP.NET MVC3 - 从 Action 动态创建 javascript
【发布时间】：2012-02-26 22:54:32
【问题描述】：

我有一个 MVC3 应用程序，其中有 JavaScript 函数，这些函数必须调用 MVC 操作来获取数据或重定向页面。

目前 javascript 位于 cshtml 文件中（使用 razor），因此我可以利用 Url.Action(..) 和 Url.Content(..) 函数。

如果我想将这些文件分开，我会丢失文件的服务器端编译，因为 .js 显然不是由 razor 引擎处理的。

是否可以创建一个 cshtml 视图并将内容 (Reponse.ContentType) 作为“应用程序/javascript”返回，或者是否有其他方法可以达到预期的结果？

提前致谢

山姆

【问题讨论】：

this answer 有一个例子——可能在其他地方。通常不建议使用 Razor 输出“大量”javascript，但大多数情况下，您应该能够使用该问题中的一种方法来解决这个问题。
将您的 JS 设计为一个库可能会更容易，您可以使用从您的视图传入的 url 进行初始化。
@TheKaneda - 感谢您的链接，实际上我在其他答案之前得到了这个工作。
@PaulTyng - 也谢谢，这是最后提出的答案！

标签： javascript asp.net-mvc asp.net-mvc-3 razor

【解决方案1】：

或者还有其他方法可以达到预期的效果吗？

确实有。设计您的 javascript 函数，以便它们将这些 url 作为参数。然后你所要做的就是将初始化调用留在你的视图中并传递所需的 url：

<script type="text/javascript">
    myJsInitialize('@Url.Action("Foo")', '@Url.Content("~/bar")');
</script>

或者另一种可能性是将这些 url 作为您的 javascript 正在使用的 DOM 的一部分。例如，假设您有一个链接，并且您希望在单击此链接时发送 AJAX 请求：

@Html.ActionLink("click me", "someaction", null, new { id = "mylink" })

在您单独的 js 文件中，您将使用已包含 url 的链接的 href 属性：

$('#mylink').click(function() {
    $('#result').load(this.href);
    return false;
});

但是，如果您需要例如此函数中的另一个 url，该怎么办。例如，假设您需要在下拉列表的选择发生变化时使用 AJAX 调用操作。在这种情况下，您可以在下拉列表中使用 HTML5 data-* 属性：

@Html.DropDownListFor(
    x => x.SelectedItem,
    Model.Items,
    new { 
        id = "myddl",
        data_url = Url.Action("someaction")
    }
)

然后在您单独的 javascript 文件中：

$('#myddl').change(function() {
    var selectedValue = $(this).val();
    var url = $(this).data('url');
    $.post(url, { value: selectedValue }, function(result) {
        // ...
    });
});

看看我们如何不再需要让 javascript 函数依赖于服务器端助手，例如 Url.Action 或 Url.Content？这允许您将它们放在单独的 javascript 文件中，而不必担心当您将应用程序部署到 IIS 虚拟目录中时会停止工作。

【讨论】：

感谢 Darin 的输入，您提出了一些建议，而好的建议对我的方案没有帮助。我只需要将特定于页面的服务器变量填充到客户端 javascript 中——而不是在 cshtml 页面中。你的第一个建议就可以了！它与@Mystere Man 的答案非常相似，除了使用函数来设置本地变量。谢谢大家。
@sambomartin 我肯定会使用一个函数进行初始化，它有助于处理脚本排序，如果脚本只是立即执行，有时很难正确初始化它们，并且肯定会使它们难以异步加载依赖关系。

【解决方案2】：

脚本块的一个鲜为人知的功能是您可以在块中提供 src 属性和代码。所以，你可以这样做：

<script type="text/javascript" src="@Url.Content("~/Scripts/Myscript.js")">
    var myurl = `@Url.Action("SomeAction", "SomeController")`;
</script>

然后，您可以在脚本中引用 myurl。

【讨论】：