小编Cha*_*oix的帖子

我一直在广泛搜索如何创建导航链接,当使用Razor视图引擎在MVC 3中运行action方法时,该链接将显示ajax Loading图标.虽然我发现了大量有关添加加载图标的信息,但所有这些信息似乎都与在当前视图中发布数据有关.

我有一个简单的菜单页面,其中包含动作链接,可以在其他页面上调用操作方法,从而呈现视图.下面显示了转到OrdersController和Index操作方法的示例.

Menu.cshtml

@Html.ActionLink("Orders", "Index", "Orders",null,new { id = "OrderLink" })<br />

我试图修改上面的链接,以便在处理索引操作时和返回视图之前,显示ajax加载图标.

我创建了一个包含加载图标的div,并将其放在我的共享_Layout.cshtml页面中.

_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.

Menu.cshtml

@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应该呈现一个视图.

OrdersController.cs

public ActionResult Index()
{
    ....

return View(OrdersViewModel);
}

我在这做错了什么？此视图是否返回到我的ajax调用而不是渲染？我该如何获得此功能？

如果我以错误的方式解决这个问题,请告诉我.

在发出请求时,我应该在目标页面的操作方法中而不是在链接上执行此操作吗？也许通过在我请求的索引操作方法中显示加载图标作为第一行代码,并在返回视图之前再次隐藏它？

我想尝试通过JQuery Show/hide组合来做到这一点？

<script type="text/javascript">
    function showLoadingSpinner() {
        $("#ajaxLoaderDiv").show();
    };
    function hideLoadingSpinner() {
        $("#ajaxLoaderDiv").hide();
    };

</script>

在此先感谢并提供所有帮助和建议

乍得