MVC忽略了我的Javascript文件。

Question

A while ago I created an MVC application before I really understood that MVC is more backend than frontend (as in, I wasn't entirely sure where my custom html fit). So I created a website that was just an HTML page, a CSS file and a Javascript file. It worked beautifully so I returned to my MVC application to map what I created onto it so I could serve up information from the backend and not clutter my html with paragraphs of information. I put the JS file in the Scripts folder and included it in my index.cshtml.

Upon debugging, I found that it wasn't that the JS was not working, it wasn't included in the project at all. This in both Firefox Developer Edition and Internet Explorer.

I tried adding reference to it in reference.js. I tried creating a .DLL and calling it into my page. I've tried deleting all of the other Javascript files to make sure that it wasn't being overridden, only to end up with a page with no javascript at all. I even tried recreating project and it still did not work. I tried moving my js file to the top in case it had something to do with load order. I tried a couple other things but in the course of three days of searching with little to no progress, I can't remember exactly what they were. The only thing I haven't done is put the script itself directly in the page.

I am using Windows 10, tried developing in VisualStudio 2015 and rolled back to 2013 due in part to not being able to alter my advanced properties to set the JS content to embedded (another suggestion) in 2015. The projects individual pieces were originally done in VS2013 on Windows8.1, so I am wondering if there is some sort of compatibility issue that I am overlooking.

I am not sure what code to offer here but this is my current head to my html:

A Plea for Red Wolves

<!--Styles-->
<link rel="stylesheet" type="text/css" href="Site.css">
<link href='http://fonts.googleapis.com/css?family=Yesteryear' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!--Scripts-->
<script src="~/Scripts/animalpagination.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Here is my JS. It takes a four button pagination styled element that targets information on the webpage and displays it when the button state is active.

//assign button a value, remove active, add active to clicked

$('.animalbutton').on('click', function () {
    var animaltoShow = $(this).attr('rel');
    $('#' + animaltoShow).button();
    $('.animalbutton').removeClass('active');
    $(this).addClass('active');

    //change active class on the content

    $('.animal').removeClass('active');
    $(this).show(function () {
        $("#" + animaltoShow).addClass('active', isactive);
    })

    function isactive() {
        //check if active, toggle visibility
        if (!'.animal .active') {
            document.getElementByClass('.animal').style.visibility = 'hidden';
        }
        else {
            document.getElementByClass('.animal .active').style.visibility = 'visible';
        }
    }

})

I am a newb developer so there are likely to be problems in my code. Right now I am primarily focused on getting that file included in the browser, though suggestions are always welcome.

Answer 1

Have you tried including JQuery before your code ? Since you're using JQuery in it, you must have it included before ...

Also, you may try out to use a few :

console.log('everything is fine here');

to check out if your code is working at each step. Good luck with that !