4

私は本当に ASP.NET MVC に慣れていないので、このテクノロジのテストとして作成中の Web サイトに 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>も機能しませんでした。どこで、どのようにすればよいですか？

PS: 私は何か非常に基本的なものが欠けているような気がします... よろしくお願いします!

4

4 に答える 4

2

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

マスター ページで、次のコードをページの下部に配置します (デフォルトで生成されたマスター ページには、このコードが既に存在します)。

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

次に、ビューの一番下にある次のコード:

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

またはバンドルを使用する場合

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

または、Javascript コードを含む <script>...</script> セクションをビューの @section スクリプト ブロックに配置することもできます。

于 2014-01-24T07:33:32.790 に答える
2

考慮すべきことの 1 つは、本文の最後にスクリプトをロードする「スクリプト」コンテンツ プレース ホルダーをマスター ページに追加することです。このように、ページの最後にスクリプトをロードして、DOM 要素のロードが遅くならないようにします (スクリプトのロードが開始されると、コードが DOM に影響を与える可能性があるため、一度に 1 つのリクエストのみを実行します)。これは 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>
于 2010-04-02T01:24:52.247 に答える
1

<asp:ContentPlaceHolder>マスターページの内部に追加を作成する<head>と、ビューに外部ファイル、カスタムブロック、外部ファイル、およびカスタムブロック<asp:Content>を登録するための 3 番目のセクションが表示されます。.js<script>.css<style>

于 2010-04-02T01:07:20.397 に答える
1

<script>タグはブロック内に配置する必要があります<asp:Content>。（そうでなければ、どこに行き着くのでしょうか？）

于 2010-04-02T01:07:32.350 に答える