为什么我的视图不从_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?
问题描述
为什么我的视图不加载从Layout.cshtml继承的Jquery?
why doesn't my view load the Jquery that is inherited from the Layout.cshtml ?
当我在视图中放置本地链接到jquery时，它可以工作，但不能正常工作.
When I put local link to the jquery in the view then it works but not otherwise.
_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>
查看:
@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.
我在渲染后检查页面源，但是脚本仍然在ajax代码下面.
I check the page source after rendering but still and the script is below the ajax code.
推荐答案
这似乎与脚本加载顺序和所需的依赖关系有关(在本例中为jQuery).当您查看页面的视图源时，可以看到在加载jQuery之前先加载了视图级脚本.
This looks like a problem with the order of loading your scripts and the dependencies needed for that (in this case 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.
之所以发生这种情况，是因为您在布局中调用RenderBody，这会将从您的视图渲染的标记呈现到调用它的位置(恰好在hr标记之前).但是，即使在渲染页脚之后，也要稍后加载jQuery.因此，当剃刀从您的视图中呈现js代码时，那时jQuery尚不适用于DOM.
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). But you are loading jQuery later, even after rendering the footer. So when razor render the js code from your view, that time ,jQuery is not available to the DOM yet.
要确保在加载jQuery之后执行视图级代码，应使用Sections呈现页面级脚本
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
因此，在您的布局中，包括所需的文件，并之后，然后调用RenderSection方法以执行页面级脚本
So in your layout, include the needed files and after that, call the RenderSection method to execute the page level scripts
<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>
}
现在，当剃刀渲染布局时，它将在您的页面/视图中执行脚本，其中RenderSection被称为scripts.显然，我们在此之前加载了jQuery.这样一切都会正常.
Now when razor render the layout, it will execute the scripts from your page/view where the RenderSection is called for scripts. Clearly we loaded jQuery before that. So everything will work.
这篇关于为什么我的视图不从_Layout.cshtml加载jquery代码，但是当我将其lcoally添加到视图时呢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
