从数据库中读取图像并在视图中显示

时间:2011-10-18 19:26:09

标签: asp.net-mvc c#-4.0 gridview partial-views

我正在尝试将旧的ASP.NET应用程序转换为MVC(我只是在学习MVC)。我需要在Gridview中显示图像。图像本身作为数据类型图像存储在SQL Server表中。以前使用的代码如下。有人可以建议使用MVC的方法吗?我正在考虑创建一个可以嵌入标准视图的部分页面,但不确定这是否是正确的设计。

谢谢你提前!

   `  string sqlText = "SELECT * FROM Images WHERE img_pk = " + id;
        SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["LocalSqlServer"].ConnectionString);

        SqlCommand command = new SqlCommand(sqlText, connection);
        connection.Open();
        SqlDataReader dr = command.ExecuteReader();
        if (dr.Read())
        {
            //Response.Write("test");
           Response.BinaryWrite((byte[])dr["img_data"]);
        }
        connection.Close();
    }

然后可以使用此图片标记引用它:

<asp:Image Height="73" Width="80" ID="Image1" ImageAlign="Middle" ImageUrl='<%#"viewimage.aspx?id=" + Eval("ImageId") %>' runat="server"/></a></td>

1 个答案:

答案 0 :(得分:7)

首先要忘记ASP.NET MVC应用程序中的GridView。服务器端控件,回发,视图状态,事件......所有这些都是不再存在的概念。

在ASP.NET MVC中,您使用模型,控制器和视图。

所以你可以编写一个控制器动作,它将从数据库中获取图像并提供它:

public class ImagesController: Controller
{
    public ActionResult Index(int id)
    {
        string sqlText = "SELECT img_data FROM Images WHERE img_pk = @id";
        using (var conn = new SqlConnection(ConfigurationManager.ConnectionStrings["LocalSqlServer"].ConnectionString))
        using (var command = conn.CreateCommand())
        {
            conn.Open();
            command.CommandText = sqlText;
            command.Parameters.AddWithValue("@id", id);
            using (var reader = command.ExecuteReader())
            {
                if (!reader.Read())
                {
                    return HttpNotFound();
                }

                var data = GetBytes(reader, reader.GetOrdinal("img_data"));
                return File(data, "image/jpg");
            }
        }
    }

    private byte[] GetBytes(IDataReader reader, int columnIndex)
    {
        const int CHUNK_SIZE = 2 * 1024;
        byte[] buffer = new byte[CHUNK_SIZE];
        long bytesRead;
        long fieldOffset = 0;
        using (var stream = new MemoryStream())
        {
            while ((bytesRead = reader.GetBytes(columnIndex, fieldOffset, buffer, 0, buffer.Length)) > 0)
            {
                byte[] actualRead = new byte[bytesRead];
                Buffer.BlockCopy(buffer, 0, actualRead, 0, (int)bytesRead);
                stream.Write(actualRead, 0, actualRead.Length);
                fieldOffset += bytesRead;
            }
            return stream.ToArray();
        }
    }
}

然后在您的视图中简单地说:

<img src="@Url.Action("Index", "Images", new { id = "123" })" alt="" />

现在当然所有这些控制器操作都很好用,但是你应该把所有数据访问抽象到存储库中:

public interface IImagesRepository
{
    byte[] GetImageData(int id);
}

然后为您正在使用的数据提供程序实现此方法:

public class ImagesRepositorySql: IImagesRepository
{
    public byte[] GetImageData(int id)
    {
        // you already know what to do here.
        throw new NotImplementedException();
    }
}

最后,您将使控制器与数据库无关。您的应用程序中的层现在在它们之间弱耦合,这将允许您重用并单独测试它们:

public class ImagesController: Controller
{
    private readonly IImagesRepository _repository; 
    public ImagesController(IImagesRepository repository)
    {
        _repository = repository;
    }

    public ActionResult Index(int id)
    {
        var data = _repository.GetImageData(id);
        return File(data, "image/jpg");
    }
}

最后一部分是配置您喜欢的DI框架,将存储库的正确实现注入控制器。