使用 jQuery 脚本调用 URL.Action 生成的 URI 中的转义字符

Question

我有以下代码作为 jquery 脚本的一部分来打开一个 jqueryui 对话框（id 值是硬编码的，用于测试目的）：

        open: function (event, ui) {

            $(this).load("@Url.Action("Edit", "Person",
                new
                {
                    id = Guid.Parse("28769371-7518-49db-a5ea-b9c62621a609"),
                    selectedPersonFor = Model.SelectedPersonFor,
                    selectedPersonForId = Model.SelectedPersonForId,
                    clientAccountId = Model.ClientAccountId
                })");
        },

我遇到的问题是，即使我的对话框打开，控制器操作也永远不会被触发。

如果我在浏览器中查看源代码，生成的输出是：

open: function (event, ui) {

            $(this).load("/Person/Edit/28769371-7518-49db-a5ea-b9c62621a609?selectedPersonFor=ClientAccount&selectedPersonForId=2a2dd3b9-a73b-4afa-8237-5a4f37736f8a&clientAccountId=00000000-0000-0000-0000-000000000000");
        },

我发现，如果我将上面的 URI 硬编码到我的脚本中，并用非转义的 & 符号 (&) 替换转义的 & 符号，那么我的控制器操作就会受到影响。

我尝试在脚本中添加对 replace 方法的调用以消除转义的 & 符号，但这无济于事。当我查看为调用控制器操作而生成的同一页面中的其他 URI 时，但不在脚本中，我注意到它们已经在其中转义了 & 符号。

浏览器如何处理脚本对控制器操作的调用与它如何从脚本外部执行它似乎存在一些差异 - 所有这些都与转义的＆符号有关。

有人可以指导我如何克服这个问题吗？

更多信息：

我也尝试过将查询参数传递给加载函数，如下所示：

open: function (event, ui) {

            $(this).load("@Url.Action("Edit", "Person")",
                {
                    id: @Guid.Parse("28769371-7518-49db-a5ea-b9c62621a609"),
                    selectedPersonFor: Model.SelectedPersonFor,
                    selectedPersonForId: Model.SelectedPersonForId,
                    clientAccountId: Model.ClientAccountId
                });
        },

但是，当我这样做时，我的对话框甚至不会打开。

编辑：

为了响应显示路线的请求，我提供以下信息（希望这是所要求的）：

routes.MapRoute(
            "Default", // Route name
            "{controller}/{action}/{id}", // URL with parameters
            new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
        );

我只是使用我的 asp.net mvc3 项目提供的默认路由。

Answer 1

在 Razor 中，@ 运算符用于对输出进行 HTML 编码 => & 变为 &。如果您不希望这种情况发生，您可以使用 Html.Raw 助手：

var url = '@Html.Raw(Url.Action("Edit", "Person", new {
    id = Guid.Parse("28769371-7518-49db-a5ea-b9c62621a609"),
    selectedPersonFor = Model.SelectedPersonFor,
    selectedPersonForId = Model.SelectedPersonForId,
    clientAccountId = Model.ClientAccountId
}))';
$(this).load(url);

现在让我们考虑您的第二个代码 sn-p：

$(this).load("@Url.Action("Edit", "Person")", {
    id: @Guid.Parse("28769371-7518-49db-a5ea-b9c62621a609"),
    selectedPersonFor: Model.SelectedPersonFor,
    selectedPersonForId: Model.SelectedPersonForId,
    clientAccountId: Model.ClientAccountId
});

如果您查看呈现的 HTML，您会看到：

$(this).load("@Url.Action("Edit", "Person")", {
    id: 28769371-7518-49db-a5ea-b9c62621a609,
    selectedPersonFor: Model.SelectedPersonFor,
    selectedPersonForId: Model.SelectedPersonForId,
    clientAccountId: Model.ClientAccountId
});

这显然不起作用，因为Model.SelectedPersonForId 可能不是有效的 javascript 变量，因此您遇到了 javascript 错误。 28769371-7518-49db-a5ea-b9c62621a609 也不是有效的 javascript 表达式，因为您没有用引号括起来。

如果你想让它工作，请确保生成正确的内容：

$(this).load("/Person/Edit", {
    id: '@Guid.Parse("28769371-7518-49db-a5ea-b9c62621a609")',
    selectedPersonFor: '@Model.SelectedPersonFor',
    selectedPersonForId: '@Model.SelectedPersonForId',
    clientAccountId: '@Model.ClientAccountId'
});

注意@ 运算符在每个服务器端变量之前使用，而不仅仅是在 Guid 之前。另请注意，这些值被包装为 javascript 字符串。