jQuery inside View in ASP.Net MVC

Question

I have 2 solutions in ASP.Net MVC. In both solutions I use jQuery (library included in main layout) But in latter solution jQuery didnt work in a view. So I used the @section Scripts { ... } for my jQuery in the View and it worked. My question is : Why in one solution jQuery worked well without @section Scripts and why the other solution needed to put my jQuery inside @section Scripts { ... } in order to work.

Both Views in the solutions have the libraries included in main layout (by default by Visual Studio)

Code I used:

This isi the test code I used

$(document).ready(function () {

            $('#btnTest').click(function () {
                $('#txtTest').val('Hey');
            });
        });

are you sure that the same version of jquery is used in both solutions and that you were using the same methods. For example in jquery.slim there is no $ajax(). It's hard to say more if you don't show us the error or the code — Budyn, Jun 07 '18 at 15:36
It depends, do they have the same layout? Do you have RenderSection scripts on your layout? — Willy David Jr, Jun 07 '18 at 15:37
Can you define "worked" and "didn't work"? Can you provide a minimal but complete example? — David, Jun 07 '18 at 15:45
By didn't work I mean browser didn't recognize the $ symbol of jQuery — Paul Z., Jun 07 '18 at 15:51
@PaulZ.: In that case, https://stackoverflow.com/questions/2194992/jquery-is-not-defined Aside from that we'd need an actual example of the code. Showing us how you're trying to use `$` doesn't tell us anything about where you defined `$`. — David, Jun 07 '18 at 15:54

score 4 · Answer 1 · answered Jun 07 '18 at 16:02

4

If jQuery is rendered at the bottom of _Layout.cshtml, then you need to place your script inside @section Scripts.

By doing so, your script render after jQuery script.

@section Scripts
{
    <script>
        $(function () {   
             // Some code         
        })
    </script>
}

Sometime, server-side wrapper controls like Kendo UI requires jQuery script renders before its controls. For that case, you simply move jQuery script inside head tag.

answered Jun 07 '18 at 16:02

Win

61,100
13
102
181

Yes it was rendered at the bottom. Thanks – Paul Z. Jun 07 '18 at 16:06
1

You just move jQuery script inside `head` tag in `_Layout.cshtml`. If you use bundling, then you can reference [this](https://github.com/WinLwinOoNet/AspNetMvcActiveDirectoryOwin/blob/master/src/Presentation/AspNetMvcActiveDirectoryOwin.Web/Views/Shared/_Layout.cshtml) and [this](https://github.com/WinLwinOoNet/AspNetMvcActiveDirectoryOwin/blob/master/src/Presentation/AspNetMvcActiveDirectoryOwin.Web/App_Start/BundleConfig.cs). – Win Jun 07 '18 at 16:07

score 0 · Answer 2 · answered Jun 07 '18 at 16:05

0

I didn't notice different versions of jQuery in the layouts.

In the solution that doesn't need @section Scripts has jQuery 2.2.4 The solution that does need @section Scripts has jQuery 1.10.2

answered Jun 07 '18 at 16:05

Paul Z.

105
1
2
11

score 0 · Answer 3 · answered Jun 07 '18 at 16:07

0

I think you should add your code in a .js file and then in the bundles so that is available in your application.

answered Jun 07 '18 at 16:07

Ivan Lopez

87
8

jQuery inside View in ASP.Net MVC

3 Answers3