繁体   English   中英

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

[英]How do i use Scripts in mvc. not inline script

我在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>

谢谢大家

为了使这一行工作@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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM