Cha*_*oix 3 asp.net-mvc jquery actionlink actionmethod
我一直在广泛搜索如何创建导航链接,当使用Razor视图引擎在MVC 3中运行action方法时,该链接将显示ajax Loading图标.虽然我发现了大量有关添加加载图标的信息,但所有这些信息似乎都与在当前视图中发布数据有关.
我有一个简单的菜单页面,其中包含动作链接,可以在其他页面上调用操作方法,从而呈现视图.下面显示了转到OrdersController和Index操作方法的示例.
@Html.ActionLink("Orders", "Index", "Orders",null,new { id = "OrderLink" })<br />
我试图修改上面的链接,以便在处理索引操作时和返回视图之前,显示ajax加载图标.
我创建了一个包含加载图标的div,并将其放在我的共享_Layout.cshtml页面中.
<div id="ajaxLoaderDiv" style="position:fixed; top:40%; left:45%; z-index:1234; display:none;">
<img src="@Url.Content("~/Images/AjaxLoaderImg.gif")" alt="Loading..."class="ajax-loader" />
</div>
为了尝试显示ajax加载图标,我尝试将链接更改为Ajax ActionLink.
@Ajax.ActionLink("Orders", "Index", "Orders", new AjaxOptions { LoadingElementId="ajaxLoaderDiv" });<br />
这是因为它显示ajax Loading图标几秒钟.我甚至可以在OrdersController的Index动作方法中放置一个断点,它会点击它.但是当Action Method完成时,Orders\Index.cshtml永远不会呈现给页面.我只是留在Menu\Index.cshtml页面上.
我知道Orders/Index.cshtml应该呈现一个视图.
public ActionResult Index()
{
....
return View(OrdersViewModel);
}
我在这做错了什么？此视图是否返回到我的ajax调用而不是渲染？我该如何获得此功能？
如果我以错误的方式解决这个问题,请告诉我.
在发出请求时,我应该在目标页面的操作方法中而不是在链接上执行此操作吗？也许通过在我请求的索引操作方法中显示加载图标作为第一行代码,并在返回视图之前再次隐藏它？
我想尝试通过JQuery Show/hide组合来做到这一点？
<script type="text/javascript">
function showLoadingSpinner() {
$("#ajaxLoaderDiv").show();
};
function hideLoadingSpinner() {
$("#ajaxLoaderDiv").hide();
};
</script>
在此先感谢并提供所有帮助和建议
乍得
我的决议:
我自己解决了我的问题,但我想我会将解决方案发布给任何其他尝试类似问题的人.
我将menu.cshtml页面上的链接保存为@ Html.ActionLink而不是ajax链接.但我添加了一个onclick html属性,调用javacript来显示微调器.
menu.cshtml
@{
ViewBag.Title = "Menu";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container" style="text-align:center">
<div>
@Html.ActionLink("Orders", "Index", "Orders", null, new { id = "OrderLink", onclick="showPageLoadingSpinner()" })
</div>
</div>
我在_Layout.cshtml局部视图中有微调器的scipt.在我的menu.cshtml视图中引用:Layout ="〜/ Views/Shared/_Layout.cshtml";
下面是我的完整_Layout.cshtml页面,包括ajax div和脚本引用.
_Layout.cshtml
<html>
<head>
@Content.Script("jquery-1.5.1.min.js", Url)
@Content.Script("jquery.unobtrusive-ajax.min.js", Url)
</head>
<body>
<div id="ajaxLoaderDiv" style="position:fixed; top:40%; left:45%; z-index:1234; display:none;">
</div>
<div class="container">
@RenderBody()
</div>
</body>
</html>
<script type="text/javascript">
function showPageLoadingSpinner() {
$('#ajaxLoaderDiv').show();
$('#ajaxLoaderDiv').append(
'<img src="@Url.Content("~/Images/AjaxLoaderImg.gif")" alt="Loading..."class="ajax-loader" />'
);
}
function hidePageLoadingSpinner() {
setTimeout(function () {
$('.ajax-loader').remove();
$('#ajaxLoaderDiv').hide();
}, 20000);
}
</script>
这对我有用,因为在menu.cshtml页面上,当你单击链接时,javascript将运行显示微调器,然后actionlink将你发送到下一页.因此,您将在加载导航到的页面时看到微调器.
当新页面准备就绪时,它将呈现并显示.虽然您发送到的新页面(Orders/Index.cshtml)使用包含ajax div的相同布局页面,但它会加载新页面,其中ajaxloader div属性display:none由布局设置.这最终会删除加载页面时显示的ajax微调器.
因此,无需调用javascript来隐藏微调器,因为在新页面呈现时始终会删除它.
除非别人告诉我这是一种不恰当的方法并且成功地向我展示了更好的方法,否则我将接受这个作为答案.
| 归档时间： |
|
| 查看次数： |
7361 次 |
| 最近记录： |