Razor ActionLink 打开 Colorbox答案

【问题标题】：Razor ActionLink to open ColorboxRazor ActionLink 打开 Colorbox
【发布时间】：2014-06-09 02:06:23
【问题描述】：

有人可以帮我这个 ActionLink 我想在 Razor 中打开一个隐藏的 Div，

这是链接，

<a class='inline' href="#inline_content">Inline HTML</a>

这是脚本，

<script>
    $(document).ready(function () {
        $(".inline").colorbox({ inline: true, width: "50%" });
    });
</script>

还有Div，

<p><a class='inline' href="#inline_content">Inline HTML</a></p>

<div style='display:none'>
    <div id='inline_content' style='padding:10px; background:#fff;'>

        <p><strong>This content comes from a hidden element on this page.</strong></p>

        <p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p>

    </div>
</div>

编辑

我需要用 MVC Razor 样式的 ActionLink 重新编写 HTML 链接，代码在 HTML 中可以正常工作，只是在 Razor 中不行。 HTML 链接发布到 Razor 中的新页面，所以我想我需要一个 ActionLink 来发布到脚本。

<a class='inline' href="#inline_content">Inline HTML</a>

例如..

@Html.ActionLink("Inline HTML", null, null, new { Class="inline", onclick = "#inline_content();" });

【问题讨论】：

stackoverflow.com/questions/1974980/…

标签： javascript jquery model-view-controller actionlink

【解决方案1】：

这样试试，

    @Html.ActionLink("Inline HTML", null, null, new { Class="inline", onclick = "Show_Div_content();" });


<script type="text/javascript">
    function Show_Div_content() {
        $("#inline_content").parent().show();
    }
</script>

【讨论】：

【解决方案2】：

Html.ActionLink 是 LinkExtensions 类 (http://msdn.microsoft.com/en-us/library/system.web.mvc.html.linkextensions.actionlink(v=vs.118).aspx) 的一部分，用于根据传递给它的参数返回锚元素。对我来说，您在这里唯一的操作似乎就是打开一个颜色框。

<a class='inline' href="#inline_content">Inline HTML</a>

使用上面的应该没问题，因为你没有路由任何东西。

【讨论】：

谢谢迈克尔，我的 MVC 技能非常好，我可以在 Razor 中使用一些称为 Visual Light Box 的 Javascript 来处理图像，但我对 ColorBox 很陌生。我应该使用@Url.Content 吗？发生了什么，我的 URL 以 /Home/Index/1#inline_content 结尾，但没有弹出 ColorBox。
是的，因为 ActionLink 将根据您的实际位置返回一个链接，此时该链接为 /Home/Index/，因为这不是控制器操作，您仅使用基本锚元素。

【解决方案3】：

您的问题只涉及 HTML 和 jQuery。您可以通过将点击事件绑定到锚标记来显示隐藏的内容。

jsFiddle here

$("a.inline").on('click',function(){
    $("#inline_content").parent().show();
    return false;
});

【讨论】：