Samstag, 11. Dezember 2010

How to show Images from Database (Binary Large Objects / BLOB) within Ext.Net GridPanel using ASP.Routing

This Blog moved to http://webapps-in-action.com/

This is what we want to achieve:


We have a table on the SQL Server with several cocktails. Images are saved as blob in the record.

First of all we create Linq-To-SQL Classes (Data.dbml) to have our Cocktail table available as entity for the object mapping in our data context.



We use two ASPX Files. Default.aspx for Ext.Net and ImageLoad.aspx with ASP.NET Routing for loading Images with clean URL and content typ.
To have ASP.NET Routing working, we need also to register the necessary URL Routes in the Global.asax.cs.

Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestApp.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <ext:XScript runat="server" ID="xScript">
        <script type="text/javascript">
            var GetImage = function (value) {
                return "<img src='images/" + value + ".jpg' />";
            }
        </script>
    </ext:XScript>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="res" runat="server">
    </ext:ResourceManager>
    <div>
        <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Title="Cocktails"
            Width="300" Height="600" Visible="true">
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ColumnID="ID" Header="Image" DataIndex="ID" Width="125">
                        <Renderer Fn="GetImage" />
                    </ext:Column>
                    <ext:Column Header="Name" DataIndex="Name">
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:JsonReader>
                            <Fields>
                                <ext:RecordField Name="ID" />
                                <ext:RecordField Name="Name" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                </ext:Store>
            </Store>
        </ext:GridPanel>
    </div>
    </form>
</body>
</html>

Default.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

namespace TestApp
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            using (DataContext dc = new DataContext())
            {
                this.Store1.DataSource = dc.Cocktails.ToList();
                this.Store1.DataBind();
            }
        }
    }
}

ImageLoad.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageLoad.aspx.cs" Inherits="TestApp.ImageLoad" %>

ImageLoad.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

namespace TestApp
{
    public partial class ImageLoad : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            using (DataContext dc = new DataContext())
            {
                try
                {
                    Cocktail cocktail = (from c in dc.Cocktails
                                         where c.ID == Convert.ToInt32(Page.RouteData.Values["id"])
                                         select c).FirstOrDefault();

                    if (cocktail != null)
                    {
                        MemoryStream imageStream = new MemoryStream();

                        byte[] imageContent = cocktail.Image.ToArray();

                        imageStream.Position = 0;
                        imageStream.Read(imageContent, 0, (int)imageStream.Length);
                        Response.ContentType = "image/jpeg";
                        Response.BinaryWrite(imageContent);
                        Response.End();
                    }
                    else
                    {
                        // ERORR HANDLING NOT FOUND
                    }
                }
                catch
                {
                    // ERORR HANDLING INVALID PARAMETER, DB CONN, ETC.
                }
            }
        }
    }
}

Global.asax.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.SessionState;
using System.Web.Routing;

namespace TestApp
{
    public class Global : System.Web.HttpApplication
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.MapPageRoute("ImageLoad",
                "images/{id}.jpg",
                "~/ImageLoad.aspx");
        }
        void Application_Start(object sender, EventArgs e)
        {         
            RegisterRoutes(RouteTable.Routes);
        }
        void Application_End(object sender, EventArgs e)
        {
        }
        void Application_Error(object sender, EventArgs e)
        {
        }
        void Session_Start(object sender, EventArgs e)
        {
        }
        void Session_End(object sender, EventArgs e)
        {
        }
    }
}

1 Kommentar: