なぜ私のビューは_Layout.cshtmlからjqueryコードをロードしませんが、ビューにlcoallyを追加するとどうなりますか？

なぜ私のビューはLayout.cshtmlから継承されたJqueryをロードしないのですか？なぜ私のビューは_Layout.cshtmlからjqueryコードをロードしませんが、ビューにlcoallyを追加するとどうなりますか？

jqueryへのローカルリンクをビューに配置すると、それは動作しますが、そうでない場合は動作しません。

_Layout.cshtml：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title - My ASP.NET Application</title> 
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" /> 
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    <script src="~/Scripts/modernizr-2.6.2.js"></script> 
</head> 
<body style="padding-top:0px !important"> 
    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" id="btncollapse" class="navbar-toggle" data-toggle="collapse" data-target="#navbarcollapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" target="_self" href="../Pages/frmHome.aspx">HerHim</a> 
      </div> 
      <div id="navbarcollapse" class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="Active"><a href="../Pages/frmHome.aspx">home</a></li> 
        <li class="dropdown"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">About<span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="../Pages/frmHim.aspx" target="_blank">Me</a></li> 
          <li><a href="../Pages/frmHer.aspx" target="_blank">Her</a></li> 
          <li></li> 
         </ul> 
        </li> 
        <li><a href="/Stories/OurStory">Our Story</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

    <div class="container body-content"> 
     @RenderBody() 
     <hr /> 
     <footer class="footer"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-lg-12"> 
         @*<p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>*@ 
        </div> 

       </div> 
      </div> 
     </footer> 
    </div> 

    <script src="~/Scripts/jquery-1.10.2.min.js"></script> 
    <script src="~/Scripts/bootstrap.min.js"></script> 
</body> 
</html>

ビュー：

@model HimHer.Models.Stories 

@{ 
    ViewBag.Title = "Authenticate"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 


    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 
     <h4>Stories</h4> 
     <hr /> 

     <div> 
      <div class="form-group"> 
       @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2" }) 
       <div class="col-md-10"> 
        @Html.TextBoxFor(model => model.UserName, new { @class = "form-control white" }) 
       </div> 
      </div> 


      <div class="form-group"> 
       @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" }) 
       <div class="col-md-10"> 
        @Html.TextBoxFor(model => model.Password, new { @class = "form-control white" }) 
       </div> 
      </div> 

      <div class="form-group"> 
       <div class="col-md-offset-2 col-md-10"> 
        <input type="submit" onclick="save();" value="Login" class="btn btn-default" /> 
       </div> 
      </div> 
     </div> 
    </div> 
    <script type="text/javascript"> 

      function save() { 


       var u = { 
        UserName: "Hunain", 
        Password: "123" 
       }; 

       var users = JSON.stringify(u); 

       $.ajax 
       ({ 
        url: '@Url.Action("Authenticate", "Users")', 
        type: 'POST', 
        contentType: "application/json; charset= utf-8", 
        data: users, 
        dataType: 'json', 
        success: function (results) { 

         alert(results.UserName); 
         //$('#myModal').modal('hide'); 
        } 
       }); 
      } 
</script>

私は自分のベストを試みたが、それがすべてでは動作しません。それで私を助けてください。

レンダリング後もページソースを確認しますが、スクリプトはajaxコードの下にあります。

出典

2017-11-09 Stacky Underflow

これは、スクリプト（この場合はjQuery）に必要な依存関係とスクリプトの読み込み順序に問題があるようです。ページのビューソースを見ると、jQueryがロードされる前にビューレベルのスクリプトがロードされていることがわかります。

レイアウトでRenderBodyを呼び出すと、ビューからレンダリングされたマークアップが呼び出される場所（hrタグの直前）にレンダリングされるため、これが起こります。しかし、フッターをレンダリングした後でも、後でjQueryをロードしています。したがって、あなたのビューからjsコードをひっくり返すと、その時、jQueryはまだDOMでは利用できません。その、コール後

のjQueryをロードした後に、ビューレベルのコードが実行されることを、あなたはあなたのレイアウトでだからあなたのページレベルのスクリプトをレンダリングするために

をSectionsを使用する必要があることを確認するために、必要なファイルが含まれており、、

<script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> @RenderSection("scripts", required: false)

そして、あなたのビューでページレベルのスクリプトを実行

@section scripts { <script> $(function() { if (jQuery) { alert("jquery is loaded"); } // you can use jQuery }); </script> }
番目のセクション内のすべてのページレベルのスクリプトを維持するRenderSection方法
今、レイアウトをレンダリングすると、RenderSectionがscriptsのところで呼び出されているページ/ビューのスクリプトが実行されます。明らかに、その前にjQueryをロードしました。だからすべてがうまくいく。

出典

2017-11-09 13:45:50 Shyju

なぜ私のビューは_Layout.cshtmlからjqueryコードをロードしませんが、ビューにlcoallyを追加するとどうなりますか？

答えて

関連する問題