1

我正在研究 Asp.net mvc。我有一个包含左窗格和中心窗格（内容窗格）的旧版布局页面，即我的左窗格包含一些选项卡，如主页、事件等。当用户单击任何选项卡时，将执行相应的操作并加载页面。但我想异步加载内容窗格，即不加载整个页面，即布局和内容页面我只想加载内容页面。为此，我使用了 jquery ajax 调用和 RenderPartial 视图机制，例如，

$('#lnkHome').click(function () {
                $.ajax({
                    url: '/Home/Home',
                    type: 'POST',
                    cache: false,
                    success: function (data) {
                        $('div.ContentPane').html(data);
                    }
                });
            });
public actionresult Home()
{
return Partial("_home");
}

但我无法使用我所有的 javascript 代码，我认为它与布局页面脚本重叠。有什么方法可以异步加载与我的场景匹配的页面。请指导我。

4

1 回答 1

2

如果这些链接是锚点，您应该确保通过从单击处理程序返回 false 来取消默认事件：

$(function() {
    $('.menuLink').click(function () {
        $.ajax({
            url: this.href,
            type: 'GET',
            cache: false,
            success: function (data) {
                $('div.ContentPane').html(data);
            }
        });

        return false;
    });
});

现在您的左窗格中可以有许多链接：

@Html.ActionLink("go to home", "index", "home", null, new { @class = "menuLink" })
@Html.ActionLink("go to events", "events", "home", null, new { @class = "menuLink" })
...

或者干脆使用 Ajax.ActionLinks：

@Ajax.ActionLink("go to home", "index", "home", new AjaxOptions { UpdateTargetId = "contentPane", HttpMethod = "POST" })
@Ajax.ActionLink("go to events", "events", "home", new AjaxOptions { UpdateTargetId = "contentPane", HttpMethod = "POST" })
...

您只需为内容窗格 id 提供一个 id，因为 Ajax.ActionLink 需要目标 DOM 元素的 id：

<div id="contentPane">
    ...
</div>

并且不要忘记jquery.unobtrusive-ajax在您的页面中引用脚本，以便 Ajax.ActionLinks 实际上是不显眼的 AJAX 化并发送 AJAX 请求而不是常规请求：

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
于 2012-10-04T14:34:53.810 回答