在Ajax ModalPopupExtender中展示含varbinary存储图片的员工详情

1. 后端：编写数据获取逻辑 #

1.1 图片流输出处理程序（.ashx） #

用于根据员工ID从数据库读取varbinary(max)格式的图片并输出为图片流：

public class GetEmployeeImage : IHttpHandler {
    public void ProcessRequest(HttpContext context) {
        int empId = int.Parse(context.Request.QueryString["empId"]);
        byte[] imageBytes = GetImageFromDb(empId);
        
        if (imageBytes != null && imageBytes.Length > 0) {
            // 根据实际存储的图片类型调整ContentType
            context.Response.ContentType = "image/jpeg";
            context.Response.BinaryWrite(imageBytes);
        } else {
            // 无图片时返回默认占位图
            context.Response.Redirect("~/assets/default-emp.jpg");
        }
    }

    private byte[] GetImageFromDb(int empId) {
        byte[] imgData = null;
        string connString = "你的数据库连接字符串";
        using (SqlConnection conn = new SqlConnection(connString)) {
            string query = "SELECT EmpImage FROM Employees WHERE EmpId = @EmpId";
            using (SqlCommand cmd = new SqlCommand(query, conn)) {
                cmd.Parameters.AddWithValue("@EmpId", empId);
                conn.Open();
                imgData = cmd.ExecuteScalar() as byte[];
            }
        }
        return imgData;
    }

    public bool IsReusable => false;
}

1.2 员工详情接口（WebMethod） #

用于获取员工基础信息：

[WebMethod]
public static Employee GetEmpDetails(int empId) {
    Employee emp = new Employee();
    string connString = "你的数据库连接字符串";
    using (SqlConnection conn = new SqlConnection(connString)) {
        string query = "SELECT EmpId, EmpName, EmpDept FROM Employees WHERE EmpId = @EmpId";
        using (SqlCommand cmd = new SqlCommand(query, conn)) {
            cmd.Parameters.AddWithValue("@EmpId", empId);
            conn.Open();
            using (SqlDataReader reader = cmd.ExecuteReader()) {
                if (reader.Read()) {
                    emp.EmpId = (int)reader["EmpId"];
                    emp.EmpName = reader["EmpName"].ToString();
                    emp.EmpDept = reader["EmpDept"].ToString();
                }
            }
        }
    }
    return emp;
}

public class Employee {
    public int EmpId { get; set; }
    public string EmpName { get; set; }
    public string EmpDept { get; set; }
}

2. 前端：配置ModalPopupExtender弹窗 #

<!-- 触发弹窗的按钮，可通过data-empid绑定员工ID -->
<asp:Button ID="btnTriggerPopup" runat="server" Text="查看员工详情" CssClass="btn-view-emp" data-empid="1" />

<asp:ModalPopupExtender ID="EmpModalExtender" runat="server"
    TargetControlID="btnTriggerPopup"
    PopupControlID="pnlEmpDetails"
    BackgroundCssClass="modal-bg">
</asp:ModalPopupExtender>

<!-- 弹窗面板 -->
<asp:Panel ID="pnlEmpDetails" runat="server" CssClass="modal-panel" Style="display:none;">
    <h3>员工信息</h3>
    <div class="emp-content">
        <img id="empImg" src="" alt="员工照片" />
        <div class="emp-info">
            <p>姓名: <span id="empName"></span></p>
            <p>部门: <span id="empDept"></span></p>
        </div>
    </div>
    <asp:Button ID="btnCloseModal" runat="server" Text="关闭" />
</asp:Panel>

添加基础样式：

.modal-bg {
    background-color: rgba(0,0,0,0.6);
    opacity: 0.6;
}
.modal-panel {
    background: #fff;
    padding: 24px;
    width: 420px;
    margin: 80px auto;
    border-radius: 8px;
}
.emp-content {
    display: flex;
    gap: 20px;
    align-items: center;
}
#empImg {
    width: 120px;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
}

3. Ajax加载并填充弹窗数据 #

$(".btn-view-emp").click(function () {
    var empId = $(this).data("empid");
    
    // 请求员工详情
    $.ajax({
        type: "POST",
        url: "EmployeePage.aspx/GetEmpDetails",
        data: JSON.stringify({ empId: empId }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (res) {
            var emp = res.d;
            $("#empName").text(emp.EmpName);
            $("#empDept").text(emp.EmpDept);
            // 绑定图片地址，调用ashx处理程序
            $("#empImg").attr("src", `GetEmployeeImage.ashx?empId=${empId}`);
            // 显示弹窗
            $find("EmpModalExtender").show();
        },
        error: function (err) {
            alert("加载失败: " + err.responseText);
        }
    });
});

// 关闭弹窗
$("#btnCloseModal").click(function () {
    $find("EmpModalExtender").hide();
});

关键注意事项 #

• 若数据库存储的图片类型不固定，建议新增ImageType字段存储图片MIME类型，在ashx中动态设置ContentType。
• 确保数据库查询时完整读取varbinary(max)数据，避免截断。
• 弹窗触发前需等待Ajax请求完成，避免出现空内容。

内容的提问来源于stack exchange，提问作者naimish manzar