我如何在mvc中使用脚本。不是内联脚本

时间:2015-05-20 09:49:04

标签: javascript jquery html asp.net-mvc asp.net-mvc-4

我在MyScript.js中编写了js代码,以及如何在页面加载时运行脚本? 以及如何在我的mvc中运行脚本文件? 我希望我能得到一个准确的答案并理解这一点。 当我使用常规html而不是mvc时,它的效果非常好 我想使用的两个js文件是

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>

全部谢谢

1 个答案:

答案 0 :(得分:1)

要使此行有效@Scripts.Render("~/bundles/MyScript.js"),您必须注册MyScript.js以捆绑BundleConfig.cs个文件。

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

如果你想使用@RenderSection("MyScript", required: false),它将是一个将在视图中呈现的部分,如下所示。但是,如果您要添加MyScript.js,则必须在section中包含该行代码。

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

注意:您在项目中添加的每个新脚本都要包含在@Scripts.Render BundleConfig中。