Razor ActionLink to open Colorbox

Question

Can someone help me with this ActionLink I want to open a hidden Div with in Razor,

This is the link,

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

And this is the script,

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

And also the 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>

Edit

I need the HTML link re-written in an MVC Razor style ActionLink, the code works fine in HTML, just not in Razor. The HTML link posts to a new page in Razor so I think I need an ActionLink to post to the script.

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

e.g..

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

http://stackoverflow.com/questions/1974980/putting-html-inside-html-actionlink-plus-no-link-text — rjdmello, Jun 09 '14 at 11:56

Praveen Reddy · Answer 1 · 2014-06-09T15:31:03.940

0

Your problem only deals with HTML and jQuery. You can show the hidden content by binding a click event to the anchor tag.

jsFiddle here

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

edited Jun 09 '14 at 15:31

answered Jun 09 '14 at 03:42

Praveen Reddy

7,295
2
21
43

score 0 · Answer 2 · answered Jun 09 '14 at 08:53

0

Try like this,

    @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>

answered Jun 09 '14 at 08:53

Jaimin

7,964
2
25
32

score 0 · Answer 3 · answered Jun 09 '14 at 14:42

0

Html.ActionLink is part of the LinkExtensions class (http://msdn.microsoft.com/en-us/library/system.web.mvc.html.linkextensions.actionlink(v=vs.118).aspx) which is used to return an anchor element based on parameters passed to it. For me it seems that your only action here is to open up a colorbox.

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

Using the above should be fine since your are not routing anything.

answered Jun 09 '14 at 14:42

Michael D. Irizarry

6,186
5
30
35

Thanks Michael, My MVC skills are pretty good and I can do this with images using some Javascript called Visual Light Box in Razor but i'm brad new to ColorBox. Should I be using @Url.Content? What is happening, is I end up with a URL ending with /Home/Index/1#inline_content but no ColorBox popup. – Bojangles Jun 09 '14 at 23:59
Yeah makes sense since the ActionLink will return a link based on your actual location which at this point is /Home/Index/ since this is not a controller action your are not committing a crime by just using the basic anchor element. – Michael D. Irizarry Jun 10 '14 at 13:19

Razor ActionLink to open Colorbox

3 Answers3