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.

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.

• javascript
• jquery
• asp-mvc-5

Share Improve this question Follow asked Jun 23, 2015 at 9:32 RobinRobin 2,72377 gold badges3535 silver badges5050 bronze badges 6

• 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 Commented Jun 23, 2015 at 9: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 Commented Jun 23, 2015 at 9: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 Commented Jun 23, 2015 at 10:02
• No, I just get the error that it is not defined for that page. – Robin Commented Jun 23, 2015 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 Commented Jun 23, 2015 at 11:56

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 4

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

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

   @RenderSection("scripts")