How to use javascript in view with _layout.cshtml

Question

I have an mvc 5 project. In the shared layout cshtml file the usual javascript links to jquery and bootstrap.

I have a separate view where I have this code added into:

<div class="test">
    @Html.CheckBoxFor(m => m.MyBool, new { @checked = "checked", onClick="toggleVisibility(this)" })
    @Html.LabelFor(m => m.MyBool)

</div>

<div id="content">
    my content
    @Html.TextBoxFor(m => m.MyText, new { id = "TextBoxA", style = "width:20px;" })
    <br />
    <p>
        Lorum ipsum
    </p>
    <p>
        Lorem Ispum
    </p>
</div>

When the check box is clicked I want to show or hide some stuff on the page. The javascript for that is this code:

function toggleVisibility(cb) {
        var x = document.getElementById("content");
        if (cb.checked == true)
            //x.style.visibility = "visible"; // or x.style.display = "none";
            $("#content").show("fast");
        else
           // x.style.visibility = "hidden"; //or x.style.display = "block";
        $("#content").hide("fast");
    }

The problem that I am having is that if I put this javascript in the shared file in script tags, I can not use the function in my view, but if I use it in the view itself I need to manually add the script link to the jquery bundle there as well. Like this:

@Scripts.Render("~/bundles/jquery")
<script type="text/javascript" language="javascript">
    function toggleVisibility(cb) {
        var x = document.getElementById("content");
        if (cb.checked == true)
            //x.style.visibility = "visible"; // or x.style.display = "none";
            $("#content").show("fast");
        else
           // x.style.visibility = "hidden"; //or x.style.display = "block";
        $("#content").hide("fast");
    }
</script>

I am wondering if this is normal and if not, if there is a solution to this.

Is the link to your javascript file/bundle working correctly if you include the link to your toggleVisibility function? I see no reason why it shouldn't work at first glance. — Steven Lemmens, Jun 23 '15 at 09:44
Yes it works there, but I'm afraid the path will be wrong once published to IIS. I also don't understand why it doesn't work as all of the Jquery/ bootstrap css and javascript that are in the shared file do work. I just can't access it from within another view it seems. — Robin, Jun 23 '15 at 09:49
If the javascript file that contains your toggleVisibility function is incldued correctly (so the page has the toggleVisibility function defined) then it should work everywhere, even from within another view. Does the console log something? — Steven Lemmens, Jun 23 '15 at 10:02
No, I just get the error that it is not defined for that page. — Robin, Jun 23 '15 at 11:54
And if you look in your generated HTML (right click and View Source), you see a valid link to your javascript file with this function in it? — Steven Lemmens, Jun 23 '15 at 11:56
It isn't in a separate JavaScript file. I put it under the links to the jquery bundles in the javascript section in the shared cshtml file. If it is placed there, it is not shown in the source, only when I put it in the view directly. — Robin, Jun 23 '15 at 12:51

score 4 · Accepted Answer · edited May 23 '17 at 12:09

You can use section here

1.Create a section in view.

 @section scripts{
 <script type="text/javascript" language="javascript">
function toggleVisibility(cb) {
    var x = document.getElementById("content");
    if (cb.checked == true)
        //x.style.visibility = "visible"; // or x.style.display = "none";
        $("#content").show("fast");
    else
       // x.style.visibility = "hidden"; //or x.style.display = "block";
    $("#content").hide("fast");
}
 </script>
}

Render section in your _layout.cshtml after the bundle call.

@RenderSection("scripts")

How to use javascript in view with _layout.cshtml

1 Answers1