为什么我的视图不从_Layout.cshtml加载jquery代码，但是当我将其lcoally添加到视图时却加载吗？
[英]Why doesn't my view load the jquery code from _Layout.cshtml but does when I add it lcoally to the view?
问题描述
why doesn't my view load the Jquery that is inherited from the Layout.cshtml ? 
为什么我的视图不加载从Layout.cshtml继承的Jquery？
When I put local link to the jquery in the view then it works but not otherwise. 当我将本地链接放在视图中的jquery时，它可以工作，但不能正常工作。
_Layout.cshtml: _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>© @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>
View: 视图：
@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>
I tried my best but it doesn't work at all. 我已尽力而为，但根本没有用。 Help me with it. 帮帮我。
I check the page source after rendering but still and the script is below the ajax code. 我在渲染后检查页面源，但是脚本仍然在ajax代码下面。
1 个解决方案
解决方案1
1 2017-11-09 13:45:50
This looks like a problem with the order of loading your scripts and the dependencies needed for that (in this case jQuery). 这看起来像是脚本加载顺序及其所需依赖项的问题（在本例中为jQuery）。 When you look at the view source of the page, you can see that the view level scripts are loaded before jQuery is loaded. 当您查看页面的视图源时，可以看到在加载jQuery之前先加载了视图级别脚本。
This is happening because you are calling RenderBody in layout, which will render the markup rendered from your view to the place where it is called (just before the hr tag). 之所以发生这种情况，是因为您在布局中调用RenderBody ，它将把从视图渲染的标记渲染到调用它的位置（在hr标签之前）。 But you are loading jQuery later, even after rendering the footer. 但是，即使渲染了页脚，您也将稍后加载jQuery。 So when razor render the js code from your view, that time ,jQuery is not available to the DOM yet. 因此，当剃刀从您的视图呈现js代码时，那时jQuery尚不适用于DOM。
To make sure that your view level code is executed after jQuery is loaded, you should be using Sections to render your page level script 为了确保在加载jQuery之后执行视图级代码，您应该使用Sections呈现页面级脚本
So in your layout, include the needed files and after that, call the RenderSection method to execute the page level scripts 因此，在您的布局中，包括所需的文件， 然后 ，调用RenderSection方法以执行页面级脚本
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
@RenderSection("scripts", required: false)
And in your view, keep all the page level scripts inside th section 在您看来，请将所有页面级脚本保留在该部分中
@section scripts
{
<script>
$(function () {
if (jQuery) {
alert("jquery is loaded");
}
// you can use jQuery
});
</script>
}
Now when razor render the layout, it will execute the scripts from your page/view where the RenderSection is called for scripts . 现在，当razor渲染布局时，它将从您的页面/视图执行脚本，在该页面/视图中，为scripts调用RenderSection 。 Clearly we loaded jQuery before that. 显然，我们在此之前加载了jQuery。 So everything will work. 这样一切都会正常。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.