Geek Answers Handbook

Adding Scripts to MVC

I start with the first MVC application. Here I have the main confusion. In fact, the default _Layout.cshtml file created as shown below

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <script> </script> @RenderBody() @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) </body> </html>

I used the base template, so I had no template. But check the line "@ Scripts.Render (" ~ / bundles / jquery ")". Its after @RenderBody (). Thus, it is actually added after the body section.

I think this is actually the best practice. But if I add $. (Document) .ready, it shows the following error

Microsoft JScript runtime error: '$' - undefined

Based on the error, this is due to the script tag. I just moved the line @ Scripts.Render ("~ / bundles / jquery") in front of the body of @Render and the last page, for example

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery") </head> <body> <script> </script> @RenderBody() @RenderSection("scripts", required: false) </body> </html>

The w application works fine with my jquery.

So why did this happen? So, do you always need a script add tag before @RenderBody? Then why is the default template displayed in the wrong place?

+6
source share
3 answers

This probably happens because you add scripts before the jQuery link on the page. You need to write scripts inside the scripts section in your views:

 @section scripts { //stuff }

This ensures that it will be displayed after the jQuery link (call to RenderSection ).

+14
source

jQuery should be in the head, and any custom scripts you write should be at the bottom of the body.

This is because if you use any jQuery in your body and it is not wrapped in document.ready, it will try to execute before jQuery is loaded and you will get the error $ is undefined

+1
source

@ Scripts.Render does not process scripts in the script section. It displays the corresponding script tag where the call is made.

To achieve what you need is pretty much the layout I use:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> @RenderBody() @Scripts.Render("~/bundles/jquery") <script> $(function() { }); </script> @RenderSection("scripts", required: false) </body> </html>

Similarly, @RenderSection is useful in views that use this layout, in which case they will be used as:

 @section scripts { <script> $(function() { }); </script> }

It is usually recommended not to use inline scripts in the body, so jQuery rendering below in this order will work fine.

+1
source

More articles:


All Articles