用ajax渲染局部视图
目前我有一个名为getRolesByYear.cshtml的主视图。 在这个视图中，我有三个按钮，每个按钮一年。 当我点击一个按钮（或在页面加载时）时，我调用一个方法，该方法为一个参数提供一个int“年份”，并使用year参数调用ajax。 这个ajax调用一个动作方法（getRolesByYear，用于主视图）。 Action方法对数据库进行查询，其结果是ViewModel对象的列表。 在return语句中，我返回一个PartialView，像这样： return PartialView("_yearlyRoles",list); 。 可悲的是，毕竟这不是在我的前端获取所需对象的列表，而是从ajax调用的错误部分得到一个错误。 我通常是新手，我非常坚持这一点。
以下是主视图getRolesByYear.cshtml ：
@{
ViewBag.Title = "getRolesByYear";
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
getRolesForYear(parseInt(@DateTime.Now.Year));
$(function () {
$('#years a').click(function () {
var year = $(this).text();
console.log(year);
getRolesForYear(parseInt(year));
});
})
//console.log(year);
function getRolesForYear(year) {
console.log(year);
$.ajax({
type: "POST",
url: '@Url.Action("getRolesByYear", "WorkRoles")',
dataType: "json",
data: {
year: year
},
success: successFunc,
error: errorFunc
});
function successFunc(data, status) {
$("#partial").html(data);
}
function errorFunc() {
alert('error');
}
}
</script>
<div id = "years" class="btn-group btn-group-justified timeline">
<a href="#@DateTime.Now.Year" class="btn btn-primary">@DateTime.Now.Year</a>
<a href="#@DateTime.Now.AddYears(-1).Year" class="btn btn-primary">@DateTime.Now.AddYears(-1).Year</a>
<a href="#@DateTime.Now.AddYears(-2).Year" class="btn btn-primary">@DateTime.Now.AddYears(-2).Year</a>
</div>
<div id = "partial"></div>
部分观点：
@model IEnumerable<eksp.Models.RoleViewModel>
@foreach (var item in Model)
{
<div class="jumbotron">
<h2>item.Role.RoleName</h2>
<h1> item.Role.RoleDescription</h1>
<p class="lead">Focus start : item.Role.FocusStart</p>
<p>Focus end : item.Role.FocusStart </p>
</div>
}
行动方法：
[HttpPost]
public ActionResult getRolesByYear(int year)
{
string currentUserId = User.Identity.GetUserId();
var list = db.WorkRoles.
Join(db.WorkRolesUsersDetails,
o => o.WorkRoleId, od => od.WorkRoleId,
(o, od) => new
{
WorkRoleId = o.WorkRoleId,
RoleName = o.RoleName,
RoleDescription = o.RoleDescription,
CompanyId = o.CompanyId,
WRUDId = od.WRUDId,
UserDetailsId = od.UserDetailsId,
FocusStart = od.FocusStart,
FocusEnd = od.FocusEnd
}).ToList()
.Select(item => new RoleViewModel(
item.WorkRoleId,
item.RoleName,
item.RoleDescription,
item.CompanyId,
item.WRUDId,
item.UserDetailsId,
item.FocusStart,
item.FocusEnd)).ToList();
//RoleViewModel rv = list;
if (Request.IsAjaxRequest())
{
return PartialView("_yearlyRoles", list);
}
else
{
return View(list);
}
}
鉴于报告的错误消息，您需要更改您的ajax调用。 通过将“data”参数设置为“json”，您告诉ajax希望将JSON格式的数据返回到响应中，但部分视图是HTML，因此请更改您的ajax调用以反映这一点：
$.ajax({
type: "POST",
url: '@Url.Action("getRolesByYear", "WorkRoles")/' + year,
dataType: "html", //set the correct data type for the response
success: successFunc,
error: errorFunc
});
另外，通过使用通过$ .ajax提供给回调的参数，可以非常直接地通过将errorFunc更改为类似的方式来改善客户端的错误处理：
function errorFunc(jQXHR, textStatus, errorThrown) {
alert("An error occurred while trying to contact the server: " + jQXHR.status + " " + textStatus + " " + errorThrown);
}
为了减少侵扰性报告和/或更轻松的调试，您可以将alert更改为console.log 。 要获得更多详细信息，您还可以记录整个jQXHR对象：
console.log(JSON.stringify(jQXHR));