Telerik RadlistView Asp.Net C# Image

Menampilkan  Gambar di Asp.net C# dari Sqlserver 2008 R2 dengan menggunakan RadlistView

Sebelumnya kita sudah memiliki table yang berisi gambar di SqlServer2008R2

Mari kita langsung aja ke buka visual studio 2008 dan pilih  new project –pilih Asp.net Web Aplication berinama pada Name ReportDataImage dan Location untuk tempat penyimpanan ya

 

Setelah itu kita pada project nya kita klik kanan dan pilih add new exsiting dan pilih web form control dan berinama ReportDataImage kita dan secara otomatis akan terdapat tiga tetapi kita bekerja hanya pada ReportDataImage.ascx dan ReportDataImage.ascx.cs

 

Untuk ReportDataImage.ascx beri coding seperti berikut ini:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ReportDataImage.ascx.cs" Inherits="ReportDataImage.ReportDataImage" %>

  

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

    <style type="text/css">

  

   .details

{

    width: 100%;

    height: 90%;

}

.details ul

{

    list-style-image: none;

    list-style-type: none;

    margin: 0;

    padding: 10px;

}

.details ul label

{

    font-weight: bold;

}

.photo-container

{

    padding: 10px;

    width: 120px;

    float: left;

}

.data-container

{

    height: 90%;

    width: auto;

}

</style>

   <telerik:RadListView ID="RadListView1" runat="server" DataSourceID="SqlDataSource2"

            ItemPlaceholderID="ListViewContainer">

            <LayoutTemplate>

                <asp:PlaceHolder runat="server" id="ListViewContainer" />

            </LayoutTemplate>

            <ItemTemplate>

                <fieldset style="float: left; width: 350px; height: 150px;">

                    <legend><b> Name</b>:

                        <%#Eval("Name")%></legend>

                    <div class="details">

                        <div class="photo-container">

                            <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" DataValue='<%#Eval("Data") %>'

                                AutoAdjustImageControlSize="false" Width="90px" Height="110px" ToolTip='<%#Eval("Name", "Data of {0}") %>'

                                AlternateText='<%#Eval("Name", "Data of {0}") %>' />

                        </div>

                        <div class="data-container">

                            <ul>

                                <li>

                                    <label>

                                         Name:</label>

                                    <%#Eval("Name")%>

                                </li>

                                <li>

                                    <label>

                                        Description:</label>

                                    <%#Eval("Description")%>

                                </li>

                                

                              

                            </ul>

                        </div>

                    </div>

                </fieldset>

            </ItemTemplate>

        </telerik:RadListView>

         <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:SiteSqlServer %>"

            ProviderName="<%$ ConnectionStrings:SiteSqlServer.ProviderName %>"

            SelectCommand="SELECT TOP 6 * FROM [Images]"></asp:SqlDataSource>

Dan untuk ReportDataImage.ascx.cs kita beri Coding seperti berikut ini

using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

using DotNetNuke.Entities.Modules;

namespace ReportDataImage

{

    public partial class ReportDataImage :PortalModuleBase

    {

        protected void Page_Load(object sender, EventArgs e)

        {

        }

    }

}

Setelah itu kita run dengan menggunakan DotnetNuke dengan cara CreateModules dan hasilnya adalah seperi pada gambar di bawah ini

 Sekian Terimakasih!