我正在尝试查看是否可以触发一些自定义事件,以诊断我是否正确连接了 pjax。据我所知,pjax 根本不起作用。
这是我正在测试的脚本块。
$('#main').pjax('a.pjax')
.on('pjax:start', function () { console.log('start'); })
.on('pjax:end', function () { console.log('end'); })
.on('pjax:beforeSend', function () { console.log('beforeSend'); })
.on('pjax:complete', function () { console.log('complete'); })
.on('pjax:success', function () { console.log('success'); })
.on('pjax:error', function () { console.log('error'); })
.on('pjax:timeout', function () { console.log('timeout'); });
这是我页面的整个 HTML 输出。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Index</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/scripts/lib/jquery/jquery.pjax.js"></script>
<script>
$('#main').pjax('a.pjax')
.on('pjax:start', function () { console.log('start'); })
.on('pjax:end', function () { console.log('end'); })
.on('pjax:beforeSend', function () { console.log('beforeSend'); })
.on('pjax:complete', function () { console.log('complete'); })
.on('pjax:success', function () { console.log('success'); })
.on('pjax:error', function () { console.log('error'); })
.on('pjax:timeout', function () { console.log('timeout'); });
</script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/">Rocky Mountain Arts</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Gallery <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/Gallery" class="pjax">For Sale</a></li>
<li><a href="/Gallery/Sold" class="pjax">Sold</a></li>
<li><a href="/Gallery/PrivateCollection" class="pjax">Private Collection</a></li>
</ul>
</li>
<li><a href="/About" class="pjax">About The Artist</a></li>
<li><a href="/Contact" class="pjax">Contact</a></li>
</ul>
</div>
<div class='loader'><img src='/img/spinner.gif'></div>
</div>
</div>
</div>
<div id="main" class="container">
<h2>Index</h2>
</div>
</body>
</html>
至于 .NET 部分。
_ViewStart.cshtml
@{
if (Request.Headers["X-PJAX"] != null) {
Layout = "~/Views/Shared/_Pjax.cshtml";
} else {
Layout = "~/Views/Shared/_Layout.cshtml";
}
}
_Pjax.cshtml
<title>@ViewBag.Title</title>
@RenderBody()
现在,当我单击一个链接时,我看不到X-PJAX
正在发送的标题,我的控制台中也没有显示任何内容。
我有什么明显的遗漏吗?