在ASP中使用jQuery / Ajax调用主布局中的部分视图/子页面净MVC

Question

我正在一个CRM管理面板上工作，在那里我使用左侧面板导航到其他页面。有多个按钮，如Home, About, Contact等

我创建了一个主布局并添加了视图，并在这些按钮上设置了视图链接。当我点击其中一个按钮时，整个页面确实会加载。我想加载子页面，而不刷新整个页面/主布局。我需要使用部分页面。但我不知道如何使用按钮点击或标签点击来调用部分页面。或者有没有更好的办法来实现这个目标?

输入图片描述

提前感谢。

Answer 1

可以通过向按钮单击事件添加ajax函数来实现。

主视图按钮

<button onclick="loadPartialView()">Click me</button>

这个ajax函数将分部视图绑定到主视图的ID。

Ajax函数

function loadPartialView() {
$.ajax({
type: "GET",
url: "/Controller/PartialViewReturningActionMethod",
success: function (result, status) {
$("#IdInMainView").html(result);
}
});
}

控制器代码

public ActionResult PartialViewReturningActionMethod()
{
return PartialView(//pathOfPartialView , data)
}

在主视图中，你应该有一个像这样的空div

<div id="IdInMainView">
</div>

还必须添加脚本引用到jQuery。