如何向 Ajax.ActionLink 插入内容答案

【问题标题】：how to insert content to Ajax.ActionLink如何向 Ajax.ActionLink 插入内容
【发布时间】：2012-05-25 21:45:40
【问题描述】：

在 Asp.net mvc3 razor 中我有：

Ajax.ActionLink("Hello world", "Hello", "Say", new RouteValueDictionary(new { word = "Hello" }),new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "dynamic-container" })

它产生

<a href="...." ...>Hello world</a>

我想得到的是

<a href="..." ...><my><html><content/></html></my></a>

如何传递 "" 以便将其插入而不是标准文本？

【问题讨论】：

所以您想在 ActionLink 中添加 html 标签，例如：Ajax.ActionLink("<span>Hello</span> world", "Hello", "Say", new RouteValueDictionary(new { word = "Hello" }),new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "dynamic-container" })?
你能发布你的控制器操作代码吗
是的，我想做 Ajax.ActionLink(..... 并作为参数在某处添加将在中出现的 html)。至于控制器，这里无关紧要。它返回一个插入到页面某处的局部视图

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

【解决方案1】：

我刚刚找到了解决办法

http://forums.asp.net/post/4517653.aspx

它不像我预期的那样优雅，但应该这样做。

谁有更好的主意？

【讨论】：

这就是我要建议的，这似乎是创建自己的助手来做到这一点的最佳方式
有点失望，希望他们会在 MVC4 中添加一些优雅的解决方案 :)
就我个人而言，我觉得整个 helper 并不优雅，我的意思是 Ajax.ActionLink 方法有 12 个重载，这太可怕了
helpers 背后的想法很好，恕我直言，但它可能会被不明智地使用:)，因此我也认为它“不优雅”;)

【解决方案2】：

代码：

Ajax.ActionLink("Hello world", "Hello", "Say", new RouteValueDictionary(new { word = "Hello" }),new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "dynamic-container" })

提供的链接会导致错误。链接如下所示：

.../Say/Hello?Count=1&Keys=System.Collections.Generic.Dictionary%602%2BKeyCollection%5BSystem.String%2CSystem.Object%5D&Values=System.Collections.Generic.Dictionary%602%2BValueCollection%5BSystem.String%2CSystem.Object%5D

这是 BAAADDDDD.... 问题是它使用了错误的重载。而不是：

new RouteValueDictionary(new { word = "Hello" })

应该在哪里：

 new { word = "Hello" }

当代码形成先前答案中的链接时，它就像一个魅力 - 希望它对某人，任何人都有帮助

【讨论】：

【解决方案3】：

您可以在渲染后使用 javascript / jQuery 强制插入项目。这可能有点“快速而肮脏”，但它确实可以毫不费力地完成工作。

使用 HtmlAttributes 对象为每个 @Ajax.Action 附加一个类，以便您稍后使用 JS 选择它们：

@Ajax.ActionLink(.....  new { @class = "AjaxLink btn btn-primary" })

然后使用 javascript / jQuery 按类查找链接，并替换每个链接的 innerHTML。下面是一个 jQuery 示例，它也可以用纯 javascript 编写。我个人喜欢 jQuery，因为它更简洁：

<script type="text/javascript">
//hack to insert a <span> inside the remove links so that the text can be styled                
$('.AjaxLink ).html('<i class="fa fa-minus-circle"></i><span class="ActionLinkText">Your Text here</span>');

</script>

希望对你有帮助

【讨论】：

【解决方案4】：

@4rchie 指点使用辅助方法的解决方案是最好的解决方案。但是还有另一种方法可以使用 data-* 属性通过链接插入数据，并使用 jquery 完成其余工作。

例如：

<div class="list-group">
@foreach (var item in Model.Things)
{
   @Ajax.ActionLink(item.Name, "actionName", "controllerName", new { Id = item.Id }, new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "areaPanel", OnComplete = "" }, new { @class = "list-group-item", data_frequency = item.frequency})

}
</div>

jQuery 代码：

jQuery(document).ready(function () {
$("[data-frequency]").each(function () {
        var linkText = $(this).html();
        var attr = $(this).attr("data-frequency");
        $(this).html("<span class ='badge'>" + attr + "</span>" + linkText);
})
}

结果就像http://getbootstrap.com/components/#list-group-badges

【讨论】：