Javascript inside Razor

Question

I have to use javascript code inside Razor. The code is:

@if (element.ParentItemID == null)
{
    <script type="text/javascript">
        $(window).resize(function () {
            if ($(window).width() > 640) {
                @Html.ActionLink(element.PageTitle, "Details", "Items", new { @parentitem = "website", @url = (element.Url) }, new { @class = "" })
            }
            else {
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">@element.PageTitle</a>
            }
        }); //show syntax error
    </script>
}

Without javascript code , it generates a Menu. But when I use code above it shows nothing.

I tried solution here, but its not working in this case: Mix Razor and Javascript code

what is that suposed to do , you are mixing c# , javascript and HTML, you cant use javascript in that way — Thorarins, Oct 06 '15 at 13:43
yeah, you can't just put a `` tag inside javascript, what would you expect that to do? — DLeh, Oct 06 '15 at 13:43
Possible duplicate of [using razor within javascript](http://stackoverflow.com/questions/4599169/using-razor-within-javascript) — Daniel Casserly, Oct 06 '15 at 13:47
How is that even supposed to work? what do you expect to happen when the window is resized? — Amit, Oct 06 '15 at 13:52
Thanks to all for comments! Please see my comment on answer by jtimperley. — kpr, Oct 06 '15 at 18:03

score 0 · Answer 1 · answered Oct 06 '15 at 13:46

Your javascript block needs to be separate from your html. With the current implementation the browser will try to interpret the html as invalid javascript and nothing will happen. Try toggling the elements or swapping out the href attribute.

@if (element.ParentItemID == null)
{
    <script type="text/javascript">
        $(window).resize(function ()
        {
            var isWideEnough = $(window).width() > 640;
            $(".isWideEnough").toggle(isWideEnough);
            $(".isNotWideEnough").toggle(!isWideEnough);
        });
    </script>

    @Html.ActionLink(element.PageTitle, "Details", "Items", new { @parentitem = "website", @url = (element.Url) }, new { @class = "isWideEnough" })
    <a href="#" class="dropdown-toggle isNotWideEnough" data-toggle="dropdown">@element.PageTitle</a>
}

Actually I want to hide "ActionLink" and show tag for for small devices. And vice-versa for mid and large devices. But its not working properly. Thanks! — kpr, Oct 06 '15 at 17:08

Javascript inside Razor

1 Answers1