ASP.NET MVC 与 jQuery 的异步通信实践
在 ASP.NET MVC 架构中，前端通过 jQuery 实现与后端的高效异步交互，是构建响应式 Web 应用的关键环节。以下展示五种典型场景下的实现方式，涵盖表单提交、数据查询、删除操作及列表渲染等常见需求。
1. 表单异步提交（基于 ajaxForm）
使用 ajaxForm 插件替代原生提交，避免页面刷新：
if ($('#userForm').valid()) {
$('#userForm').ajaxForm({
success: function (response) {
if (response.code === 200) {
layer.msg('操作成功', { icon: 1 });
setTimeout(() => {
const iframeIndex = parent.layer.getFrameIndex(window.name);
parent.location.reload();
parent.layer.close(iframeIndex);
}, 800);
} else {
layer.msg(response.message || '操作失败', { icon: 2 });
}
},
error: () => layer.msg('网络异常，请重试', { icon: 0 })
});
}
对应控制器方法返回标准化 JSON 响应：
[HttpPost]
public JsonResult UpdateUserProfile(UserProfileDto dto)
{
var result = _userService.Save(dto);
return Json(new { code = result ? 200 : 500, message = result ? "更新成功" : "保存失败" });
}
2. GET 请求获取单条记录（带参数）
通过 URL 参数传递 ID，获取用户详情：
$.get('/api/user/detail', { userId: 123 }, function (res) {
if (res && res.data) {
$('#userName').text(res.data.fullName);
$('#email').val(res.data.email);
}
});
后端采用 JsonResult 并启用跨请求访问支持：
[HttpGet]
public JsonResult Detail(int userId)
{
var user = _userRepository.FindById(userId);
return Json(new { data = user }, JsonRequestBehavior.AllowGet);
}
3. POST 请求执行删除操作（含错误处理）
封装结构化请求，统一处理响应逻辑：
$.ajax({
url: '/api/user/remove',
type: 'POST',
data: { id: targetId, operator: 'admin' },
dataType: 'json',
timeout: 5000,
success: function (resp) {
if (resp.success) {
$(`tr[data-id="${targetId}"]`).fadeOut(300, function () { $(this).remove(); });
} else {
layer.alert(resp.error || '删除失败');
}
},
error: function (xhr) {
if (xhr.status === 0) {
layer.msg('网络中断');
} else if (xhr.status === 401) {
layer.msg('未授权访问');
}
}
});
控制器返回语义化结果对象：
[HttpPost]
public JsonResult Remove(int id, string operator)
{
try
{
var deleted = _userService.Delete(id, operator);
return Json(new { success = deleted, error = deleted ? null : "删除失败" });
}
catch (Exception ex)
{
return Json(new { success = false, error = ex.Message });
}
}
4. 简化 POST 调用（$.post）
适用于轻量级操作，如状态切换或简单删除：
$.post('/api/user/toggle-status', { id: itemId, status: 1 }, function (result) {
if (result > 0) {
$(`#status-${itemId}`).text('已启用').removeClass('disabled');
} else {
layer.msg('状态更新失败');
}
});
后端直接返回整型状态码（兼容旧式习惯）：
[HttpPost]
public int ToggleStatus(int id, int status)
{
return _userService.ChangeStatus(id, status) ? 1 : 0;
}
5. 动态加载表格数据（GET + JSON List）
结合 Razor URL 辅助方法生成安全路由，并渲染模板：
$.get('@Url.Action("List", "User")', { category: 'active' }, function (users) {
const tbody = $('#userTable tbody').empty();
users.forEach(u => {
tbody.append(`
<tr data-id="${u.id}">
<td>${u.name}</td>
<td>${u.email}</td>
<td>${u.isActive ? '✅' : '❌'}</td>
<td><button class="btn-delete" data-id="${u.id}">删除</button></td>
</tr>
`);
});
}, 'json');
服务端投影 DTO 并过滤敏感字段：
[HttpGet]
public JsonResult List(string category)
{
var query = _userService.GetByCategory(category);
var dtos = query.Select(x => new UserSummaryDto
{
Id = x.Id,
Name = x.FullName,
Email = x.EmailAddress,
IsActive = x.Enabled,
LastLogin = x.LastLoginTime?.ToString("yyyy-MM-dd HH:mm")
}).ToList();
return Json(dtos, JsonRequestBehavior.AllowGet);
}
