代码之家 › 专栏 › 技术社区 › Francisco Noriega

如何在ASP.NET MVC中使用javascript编写动作链接?

asp.net-mvc jquery javascript c#

Francisco Noriega · 技术社区 · 14 年前

我有一个脚本,它将一些行追加到表中。其中一行有一个删除链接,为此我使用的是actionLink,但是元素的ID是通过JS接收的,这不起作用:

 $("#Table").last().append('<tr><td><a href=\"<%:Html.ActionLink("Delete", "DeleteElementFromSet", new {id=%>Id<%})%>">Delete</a></td><td>'+Id+'</td></tr>');

其中id是一个从DropDownList的值中获取其值的javascript变量。

有没有办法像这样使用actionlink?还是必须手动写下路径?

5 回复 | 直到 14 年前

Darin Dimitrov 14 年前

因为ID仅在客户端已知,所以需要构造正确的URL。这是说永远不要混合C和javascript。以下是您可以进行的操作:

首先声明一个全局变量,该变量将保存不带ID部分的删除链接:

<script type="text/javascript">
    var deleteUrl = '<%: Url.Action("DeleteElementFromSet") %>';
</script>

然后在一个分离 javascript文件:

$('#Table').last().append(
    $(document.createElement('tr'))
        .append($(document.createElement('td'))
            .append($(document.createElement('a'))
                .attr('href', deleteUrl + '/' + Id)
                .text('Delete')
            )
        )
        .append($(document.createElement('td'))
            .text(Id)
        )
);

注意你应该使用 Url.Action 而不是 Html.ActionLink 因为已经手动生成了锚。

注意:避免使用get动词进行删除。你可能会有不好的惊喜。在修改服务器上的状态(如删除)时,请使用适当的动词(或至少post)。

John Hartsock 14 年前

就像在MVC中有一个动作链接助手一样。在javascript中创建一个助手,在其中提供一个操作、控制器和ID来创建链接。

Jader Dias 14 年前

你必须手动写下路径。这是因为C在编译时被评估,而您在运行时将其写入文档。

更好的选择是完全分离HTML和JavaScript。把你的HTML放在一个隐藏的 div 在您的视图中,然后使用javascript将其内容复制到您想要的任何位置。这样,您仍然可以使用c创建动作链接。

将HTML和JavaScript分离也可以提高代码可读性,更好地分离关注点,并扩展语法突出显示。换句话说,这是一个很好的实践。

Josiah Ruddell 14 年前

这个怎么样?

var row = $("#Table").last().append('<tr><td><%:Html.ActionLink("Delete", "DeleteElementFromSet")%>"></td><td>' + Id + '</td></tr>');
row.find('a').attr(Id);

这将添加行,然后找到链接并添加id属性。

在您的代码中,似乎有一个额外的“a”标记被我删除了。

eglasius 14 年前

重构它使其更清晰。从字面上看,等价物是:

var deleteUrl = '<%:Url.ActionLink("Delete", "DeleteElementFromSet", new {id=%>Id<%})%>';
$("#Table").last()
   .append('<tr><td><a href=\"' + deleteUrl + '">Delete</a></td><td>'+Id+'</td></tr>');

你能注意到的第一件事就是用 \" 然后你用 " .

我建议你做上面的练习,直到脚本清晰,混乱的语法不再起作用。

上面说的,在deleteurl中 您试图在服务器上使用客户端值 . 记住<%:将在视图的服务器端呈现期间调用,因此在客户端设置的ID在其中根本不起作用。

一种选择是使用一个占位符,比如 :

var deleteUrl = '<%:Url.ActionLink("Delete", "DeleteElementFromSet", new {id=%>Id<%})%>';
deleteUrl = deleteUrl.replace("##id##", Id);
$("#Table").last()
   .append('<tr><td><a href=\"' + deleteUrl + '">Delete</a></td><td>'+Id+'</td></tr>');