How do i use Scripts in mvc. not inline script

Question

I wrote js code in MyScript.js and how I can make my script run when page load? and how I can make script file run in my mvc? I hope I can get a precise answer and understand that good. When I did on regular html and not in mvc it works very well the two js file i would like to use are

1. jquery.zaccordion.js

2. MyScript.js

<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-1.8.2.js")
@Scripts.Render("~/bundles/jquery.zaccordion.js")
@Scripts.Render("~/bundles/MyScript.js")
@RenderSection("scripts", required: false)
@RenderSection("MyScript", required: false)
</head>

<body>
<header>
<div class="site-logo">
  <img class="img-logo-size" src="Images/logo.png" alt="" />
 </div>
<div class="manu">
     <div class="nav-tabs">
         <div class="hoverBtn">@Html.ActionLink("Home", "Index", "Home")</div>
         <div class="hoverBtn">@Html.ActionLink("About", "About", "Home")</div>
         <div class="hoverBtn">@Html.ActionLink("Contact","Contact","Home")</div>
       </div>
    </div>
    <div class="slider-border">
        <ul id="splash">
            <li>
                <img class="img-size" src="../Images/TM-front-image-World-network.jpg" alt="" />
                <div>
                    <strong>Old School Diner</strong>
                    <p class="splash-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor lacus sollicitudin ligula sagittis a ultricies nulla ultricies. Ut odio nisi, posuere sed blandit at, bibendum non dolor.</p>
                </div>
            </li>
            <li>
                <img class="img-size" src="../Images/banner-your-it-11.jpg" alt="" />
                <div>
                    <strong>A Day at the Pool</strong>
                    <p class="splash-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in condimentum sem. Aenean faucibus dignissim auctor. In ut libero vitae augue laoreet iaculis at a tellus.</p>
                </div>
            </li>
            <li>
                <img class="img-size" src="../Images/network1.png" alt="" />
                <div>
                    <strong>Fill it Up!</strong>
                    <p class="splash-text">Duis viverra velit orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue molestie. Donec ultrices facilisis erat at porttitor.</p>
                </div>
            </li>
            <li>
                <img class="img-size" src="../Images/1338453958network_header.jpg" alt="" />
                <div>
                    <strong>Going for a Drive</strong>
                    <p class="splash-text">Phasellus sed lectus nisl, eget cursus eros. Suspendisse posuere orci eu lorem luctus et porta nunc posuere. Cras sed lectus vitae leo accumsan adipiscing.</p>
                </div>
            </li>
        </ul>
    </div>
</header>

<div class="page-wrap">
    @RenderBody()
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
    @RenderSection("MyScript", required: false)
</div>

<footer>
    <div class="site-footer">
        <div class="float-left">
            <p>&copy;@DateTime.Now.Year-Erez Gershon</p>
        </div>
    </div>
</footer>

Thanks for all

You have duplicate scripts (@Scripts.Render("~/bundles/jquery-1.8.2.js") and @Scripts.Render("~/bundles/jquery")) and also duplicate @RenderSection() Render all your scripts in one place (in the <head> or immediately before the closing </body> tag) and in the correct order — user3559349
– user3559349, Commented May 20, 2015 at 9:54
they are in scripts folder the scrip (@Scripts.Render("~/bundles/jquery-1.8.2.js") and @Scripts.Render("~/bundles/jquery")) are showing by defualt mvc and also te render section but i can delete if thats what i need — Erez
– Erez, Commented May 20, 2015 at 9:58

adricadar · Accepted Answer · 2015-05-20 10:03:03Z

1

For this line to work @Scripts.Render("~/bundles/MyScript.js") you have to register MyScript.js to bundle in BundleConfig.cs file.

bundles.Add(new ScriptBundle("~/bundles/MyScript.js").Include(
                    "~/Scripts/MyScript.js")); // make sure that this is your path to MyScript.js

If you want to use @RenderSection("MyScript", required: false), it's a section that will be rendered in a view, like below. But if you want to add MyScript.js you have to include that line of code inside the section.

@section MyScript {
   @Scripts.Render("~/bundles/MyScript.js")
}

Note: Every new script you add in your project that you want to use it with @Scripts.Render you have to include in BundleConfig.

answered May 20, 2015 at 10:03

adricadar

10.2k5 gold badges35 silver badges47 bronze badges

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

2 Comments

Erez Over a year ago

i have to them both? if i register my script to bundles i dont need to use rendersection?

adricadar Over a year ago

@Erez you don't need to use RenderSection, this is for another purpose. To include your <script /> tag, you have to use @Scripts.Render.

Collectives™ on Stack Overflow

How do i use Scripts in mvc. not inline script

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related