ASP.NET MVCビューにJavascriptを配置する方法

StackOverflow https://stackoverflow.com/questions/2564548

質問

I ASP.NET MVCには本当に新たなんだ、と私は、この技術のテストとして作っているウェブサイトにいくつかのJavascriptを統合しようとしています。

私の質問はこれです：をどのように私はビューにJavascriptコードの

挿入することができます？

私はデフォルトのASP.NET MVCテンプレートから始めることにしましょうと言います。閲覧数の面では、これは、マスターページ、「ホーム」ビュー、および「概要」ビューを作成します。 Index.aspxと呼ばれる "ホーム" を表示、次のようになります：

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%= Html.Encode(ViewData["Message"]) %></h2>
    <p>
        To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
    </p>
    <p>Welcome to this testing site!</p>
</asp:Content>

ここ<script>タグを追加すると、動作しませんでした。どこで、どのように私はそれを行う必要がありますか？

P.S：私は、私は非常に基本的な何かが欠けている感じを持っている...事前に感謝！

役に立ちましたか？

解決

Goは、あなたのマスターページの<asp:ContentPlaceHolder>の追加<head>の内部を作成し、あなたの意見はあなたが外部<asp:Content>ファイル、カスタム.jsブロック、外部<script>ファイル、およびカスタム.cssブロックを登録するための第三<style>セクションを持つことになります。

他のヒント

本体の端に負荷スクリプトことをあなたは検討する必要があります。

一つのことは、あなたのマスターページに「スクリプト」コンテンツプレースホルダを追加しています。この方法であなたはそれが（スクリプトコードがDOMに影響を与えることができるので、それは同時に複数の要求をしてロードを開始したら）DOM要素をロード遅くないように、ページの最後にスクリプトをロードします。これはPartialViewと少しトリッキー取得します - あなたがそれらのコードが含まれる場合は、それらのスクリプトをロードした後、後のスクリプトに依存している何かを実行遅らせるための方法を把握する必要があります。妥協はヘッダと本文の最後に、あなたの一般的なスクリプトの残りの部分でjQueryのようなものをロードするかもしれません。

Site.Master 

   <body>

   ...
   <asp:ContentPlaceHolder runat="server" id="MainContent"></asp:ContentPlaceHolder>

   ...

   <script type="text/javascript" src="<%= Url.Content( "~/scripts/jquery-1.4.1.min.js" ) %>"></script>
   <asp:ContentPlaceHolder runat="server" id="ScriptContent"></asp:ContentPlaceHolder>
   </body>
   </html>

表示

  <asp:Content runat="server" ID="mainContent" ContentPlaceHolderID="MainContent">

     ... HTML ...
  </asp:Content>

  <asp:Content runat="server" ID="scriptContent" ContentPlaceHolderID="ScriptContent">

  <script type="text/javascript">
     $(function() {
       $('.selector').click( function() {
            ...
       });
     });
  </script>

  </asp:Content>

ただ、この質問につまずいたとVisual Studio 2013年には、よりエレガントな方法で行うことができるというコメントを追加したいと思います。

あなたのマスターページでちょうど（デフォルト生成されたマスターページにこのコードはすでにそこにある）ページの下部に次のコードを配置します：

<body>
    ...
    @RenderSection("scripts", required: false)
</body>
</html>

次に、あなたのビューでちょうど下部に次のコード：

@section scripts
{
    <script src="...script url..."></script>
}

か、バンドルを使用する場合は、

@section scripts {
    @Scripts.Render("~/bundles/<script id>")
}

またはあなたのビューで@sectionスクリプトブロックにJavaScriptコードでのセクションを置くことができます。

<script>タグは<asp:Content>ブロックの内部に行く必要があります。 （そうでない場合は、どこで終わるのでしょうか？）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top