.NET Core中用jQuery Ajax调用ActionResult的实现求助

控制器中的Action #

说明：GetById方法等同于Find方法，EntityUpdate等同于Update方法

控制器代码：

public IActionResult CategoryStatus(int id)
{
    var data = cm.GetById(id);
    if (data.CategoryStatus)
    {
        data.CategoryStatus = false;
    }
    else
    {
        data.CategoryStatus = true;
    }
    cm.EntityUpdate(data);
    return RedirectToAction("Index");
}

需求：希望在Razor视图中通过Ajax调用这个Action，完善现有代码中的Ajax部分。

现有Razor视图代码 #

<a href="/Admin/Category/CategoryStatus/@item.CategoryID"
   class="btn btn-outline-success btn-sm"
   onclick="return functionConfirm(this)">
   Aktivləşdir
</a>
<script>
function functionConfirm(event) {
          swal({
        title: 'Are you sure?',
        text: "You will not be able to recover this item!",
        type: 'warning',
        showCancelButton: true,
        cancelButtonText: 'No',
        cancelButtonClass: 'btn btn-danger',
        showConfirmButton: true,
        confirmButtonText: 'Yes',
        confirmButtonClass: 'btn btn-success'
    }, function (isConfirm) {
        if (isConfirm) {
            $.ajax({//此处需要帮助
                type: "GET",
                 url: '/Admin/Category/CategoryStatus',
                success: function (msg) {
                    console.log(msg);
                 },
                error: function (req, status, error) {
                    console.log(msg);
                }
            });
            return true;
        } else {
            return false;
        }
    });
    return false;                                                                                                                                                                                                                                           
}
</script>

解决方案 #

核心问题修正点 #

1. 传递分类ID参数给控制器
2. 调整控制器返回值，适配Ajax请求
3. 修正错误回调的变量引用
4. 阻止a标签默认跳转行为

修改后的控制器代码

public IActionResult CategoryStatus(int id)
{
    var data = cm.GetById(id);
    // 增加空值判断，避免空引用异常
    if (data != null)
    {
        // 简化状态切换逻辑
        data.CategoryStatus = !data.CategoryStatus;
        cm.EntityUpdate(data);
        return Json(new { success = true, message = "状态切换成功" });
    }
    return Json(new { success = false, message = "未找到该分类" });
}

修改后的视图代码

<a href="/Admin/Category/CategoryStatus/@item.CategoryID"
   class="btn btn-outline-success btn-sm"
   onclick="return functionConfirm(this)">
   @(item.CategoryStatus ? "禁用" : "启用") <!-- 根据当前状态动态显示按钮文字 -->
</a>
<script>
function functionConfirm(element) {
    swal({
        title: '确定要切换状态吗？',
        text: "操作后将切换该分类的启用/禁用状态！",
        type: 'warning',
        showCancelButton: true,
        cancelButtonText: '取消',
        cancelButtonClass: 'btn btn-danger',
        showConfirmButton: true,
        confirmButtonText: '确定',
        confirmButtonClass: 'btn btn-success'
    }, function (isConfirm) {
        if (isConfirm) {
            // 从a标签的href中提取分类ID
            var categoryId = element.href.split('/').pop();
            $.ajax({
                type: "GET",
                url: '/Admin/Category/CategoryStatus',
                data: { id: categoryId }, // 传递ID参数给控制器
                success: function (response) {
                    console.log(response.message);
                    if (response.success) {
                        // 成功后更新按钮文字，无需刷新页面
                        var btnText = element.textContent.trim() === '启用' ? '禁用' : '启用';
                        element.textContent = btnText;
                        // 如果需要强制刷新页面，可取消注释下面一行
                        // window.location.reload();
                    } else {
                        swal('错误', response.message, 'error');
                    }
                },
                error: function (req, status, error) {
                    console.log(error);
                    swal('错误', '操作失败，请稍后重试', 'error');
                }
            });
        }
        return false; // 始终阻止a标签的默认跳转行为
    });
    return false;
}
</script>

关键说明 #

• 参数传递：通过data属性将分类ID传给控制器，也可以直接拼接URL为/Admin/Category/CategoryStatus/ + categoryId
• JSON返回值：控制器返回JSON结果，让前端可以根据操作状态做针对性处理（比如更新按钮文字），相比直接跳转页面更友好
• 空值判断：增加对数据库查询结果的空值检查，避免不存在对应ID时抛出异常
• 动态按钮文字：根据分类当前状态显示对应操作文字，提升用户操作感知

内容的提问来源于stack exchange，提问作者Ilkin Rufullayev