為什么我的視圖不從_Layout.cshtml加載jquery代碼，但是當我將其lcoally添加到視圖時卻加載嗎？

Question

為什么我的視圖不加載從Layout.cshtml繼承的Jquery？

當我將本地鏈接放在視圖中的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代碼下面。

Answer 1

這看起來像是腳本加載順序及其所需依賴項的問題（在本例中為jQuery）。 當您查看頁面的視圖源時，可以看到在加載jQuery之前先加載了視圖級別腳本。

之所以發生這種情況，是因為您在布局中調用RenderBody ，它將把從視圖渲染的標記渲染到調用它的位置（在hr標簽之前）。 但是，即使渲染了頁腳，您也將稍后加載jQuery。 因此，當剃刀從您的視圖呈現js代碼時，那時jQuery尚不適用於DOM。

為了確保在加載jQuery之后執行視圖級代碼，您應該使用Sections呈現頁面級腳本

因此，在您的布局中，包括所需的文件，然后，調用RenderSection方法以執行頁面級腳本

<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>
}

現在，當razor渲染布局時，它將從您的頁面/視圖執行腳本，在該頁面/視圖中，為scripts調用RenderSection 。 顯然，我們在此之前加載了jQuery。 這樣一切都會正常。

為什么我的視圖不從_Layout.cshtml加載jquery代碼，但是當我將其lcoally添加到視圖時卻加載嗎？

問題描述

1 個解決方案

解決方案1
1 2017-11-09 13:45:50

為什么我的視圖不從_Layout.cshtml加載jquery代碼，但是當我將其lcoally添加到視圖時卻加載嗎？

問題描述

1 個解決方案

解決方案1 1 2017-11-09 13:45:50

解決方案1
1 2017-11-09 13:45:50