Where to use/put jQuery in ASP MVC .Net Core?

Question

I learned that it is recommended to load jQuery at the end of the page (aka footer)

I am currently experimenting with the Scaffold template from the MVC project. Now, my scenario is that I have a _Layout where jQuery/script/bootstrap are loaded in the footer. Says I have a view called "Index.cshtml" that will use _Layout.cshtml as layout. And inside "Index.cshtml", I am just having something as simple as this:

<script>
$(document).ready(function () {
    $('#test').on('click', function (e) {
        alert("hey");
    });       
});
</script>
<button id="test">test</button>

My questions is:

I want to bind event to the button using jQuery. How can i call $(document).ready... inside "Index.cshtml" so I can achieve this in the most efficient way? (since the jQuery is loaded later on at the footer and I want to write my code in the corresponding page instead of in a shared page like _Layout.cshtml). I was thinking to load jQuery in the view, but that would make it a duplicate load wouldn't it?

Solution

In case anyone ran in the the same question like me, please check out Robert's answer below.

Basically the Scaffold template of ASP MVC .Net Core defined a @Section named "Scripts". Therefore, if we define that Script in our View, it will be loaded into the footer of _Layout right after the scripts for jquery/js are loaded.

You put jQuery in the _Layout. The $(document).ready(function () will just work in the Index.cshtml page as expected. If you need different .js files for different pages, just create multiple _Layout pages with different names. — Steve
– Steve, Commented Nov 11, 2019 at 15:08
@Steve unfortunately I tried that and it didn't work. Seems like at the time it was load, the jQuery script is not loaded just yet. I got the error message "$ is not define" in the console log — Nate Nguyen
– Nate Nguyen, Commented Nov 11, 2019 at 15:13
Do you have this line in the <head> tag? <script src="ajax.googleapis.com/ajax/libs/jquery/3.3.1/…> — benmartin101
– benmartin101, Commented Nov 11, 2019 at 18:48
@benmartin101 I didn't include it. Reason being it will be loaded later in the footer section of the _Layout as mentioned, therefore doing so would cause jQuery to be loaded twice, and I don't want that — Nate Nguyen
– Nate Nguyen, Commented Nov 12, 2019 at 9:39

RobertC · Accepted Answer · 2019-11-11 15:08:12Z

1

There are a few ways, but why not give the script section a try?

@section Scripts {
 <script type="text/javascript" src="/scripts/main.js"></script>
}

Source: https://learn.microsoft.com/en-us/aspnet/core/mvc/views/layout?view=aspnetcore-3.0

Or in your case:

@section Scripts {
    <script>
    $(document).ready(function () {
        $('#test').on('click', function (e) {
            alert("hey");
        });       
    });
    </script>
 }

answered Nov 11, 2019 at 15:08

RobertC

5983 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Where to use/put jQuery in ASP MVC .Net Core?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related