通过使用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);

现在让我们考虑你的第二个代码片段:

$(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字符串.