ASPxGridView ile Veritabanına Resim Kaydetme ve Resmi ASPxImage' bağlama örneği



Aşağıda vermiş olduğum örnekteki işlemleri yapmak için hakikaten internette çok arama yaptım tam olarak nasıl yapıldığına dair bir örnek bulamadım. O yüzden çalışan komple bir örnegi sizlerle paylaşmak istedim faydalı olması dileği ile.

Şimdi bu örneğimizde ne yaptık onu özetle anlatayım.  SQL veri tabanında olan bir tabloya ki ismi (Kurucular) kuruculara ait resim, doğum tarihleri, işe giriş tarihleri, title (başlık) ve öz geçmişlerini yazacağız. Bu işlemleri yapmak için ASPxGridView ile kullanacağız. Bu grid’in içinde Tarih alanları için ASPxDateEdit’i , Özgeçmiş bilgileri için ASPxMemo’yu, Veri tabanında kayıtlı resimleri bağlamak için ASPxImage’i, resimleri veritabanına kaydetmek için de ASPxUploadControl’u, ad,soyad başlık bilgileri için de ASPxTextBox’ı kullanacağız.

Burada beni en çok uğraştıran şeyler  ASPxGridView’in onrowinserting="grid_RowInserting", onrowupdating="grid_RowUpdating" metodları idi peki ne idi bu kadar çok uğraştıran ve bu makaleyi yazmaya iten şey şu idi  ASPxGridView’in içinde Edit Modda iken  ASPxDateEdit’in valuesi almak ve ASPxUploadControl’ile yüklenen Jpeg’in e.UploadedFile.FileBytesini almak vermiş olduğum örneğin kode behind tarafında işlemlerin nasıl yapıldıgı ilgili metod içinde anlatılmıştır. İlgili herkesin istifadesine sunarım.

 

 

[ASP.NET] AdminKurucular.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Yonetim.master" AutoEventWireup="true" CodeFile="YonetimKurucular.aspx.cs" Inherits="YonetimKurucular" %>


<%@ Register Assembly="DevExpress.Web.v8.3, Version=8.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"

    Namespace="DevExpress.Web.ASPxRoundPanel" TagPrefix="dxrp" %>


<%@ Register Src="~/UserController/PictureUpload.ascx" TagName="ImageUpload" TagPrefix="uc1" %>

<%@ Register Assembly="DevExpress.Web.ASPxHtmlEditor.v8.3, Version=8.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxHtmlEditor" TagPrefix="dxhe" %>

<%@ Register assembly="DevExpress.Web.ASPxGridView.v8.3, Version=8.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxGridView" tagprefix="dxwgv" %>

<%@ Register assembly="DevExpress.Web.ASPxEditors.v8.3, Version=8.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxEditors" tagprefix="dxe" %>

<%@ Register Assembly="DevExpress.Web.ASPxGridView.v8.3.Export, Version=8.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxGridView.Export" TagPrefix="dxwgv" %>

<%@ Register assembly="DevExpress.Web.ASPxSpellChecker.v8.3, Version=8.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxSpellChecker" tagprefix="dxwsc" %>


<%@ Register assembly="DevExpress.Web.v8.3, Version=8.3.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxUploadControl" tagprefix="dxuc" %>



<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

  <script type="text/javascript" language="javascript">

      var fieldSeparator = "|";

      function FileUploadStart() {

          document.getElementById("uploadedListFiles").innerHTML = "";

      }

      function FileUploaded(s, e) {

          if (e.isValid) {

              var linkFile = document.createElement("a");

              var indexSeparator = e.callbackData.indexOf(fieldSeparator);

              var fileName = e.callbackData.substring(0, indexSeparator);

              var pictureUrl = e.callbackData.substring(indexSeparator + fieldSeparator.length);

             

              var container = document.getElementById("uploadedListFiles");

              container.appendChild(linkFile);

              container.appendChild(document.createElement("br"));

          }

      }

 

  </script>

 

<br />

<br />

<div style="margin-top:20px;margin-bottom:20px;">

    <dxwgv:ASPxGridView ID="grid" runat="server" KeyFieldName="KurucuID"

        Width="100%" AutoGenerateColumns="False"

        CssFilePath="~/App_Themes/Glass/{0}/styles.css" CssPostfix="Glass"

        onrowdeleting="grid_RowDeleting" onrowupdating="grid_RowUpdating"

        onrowinserting="grid_RowInserting" >

        <Styles CssFilePath="~/App_Themes/Glass/{0}/styles.css" CssPostfix="Glass">

            <Header ImageSpacing="5px" SortingImageSpacing="5px">

            </Header>

        </Styles>

        <SettingsEditing Mode="PopupEditForm"

                         PopupEditFormModal="true"

                         PopupEditFormVerticalAlign="WindowCenter"

                         PopupEditFormWidth="800px" />

        <Settings ShowGroupPanel="True" ShowTitlePanel="true" />

        <SettingsText Title="Kurucular Bilgisi" PopupEditFormCaption="Kurucular Bilgisi" />

        <Columns>

            <dxwgv:GridViewCommandColumn VisibleIndex="0">

                <EditButton Text="Guncelle" visible="True" />

                <NewButton Text="Yeni" Visible="True" />

                <DeleteButton Text="Sil" Visible="True" />

            </dxwgv:GridViewCommandColumn>

            <dxwgv:GridViewDataTextColumn Caption="Image" Name="Image" VisibleIndex="1">

                    <DataItemTemplate>

                        <dxe:ASPxImage ID="ASPxImage1"

                             runat="server"

                             Height="200"

                             Width="200"

                             ImageUrl='<%# "FileHandler.ashx?id=" + Eval("KurucuID") %>'>

                        </dxe:ASPxImage>

                    </DataItemTemplate>

                </dxwgv:GridViewDataTextColumn>

            <dxwgv:GridViewDataColumn FieldName="Baslik" VisibleIndex="2"/>

            <dxwgv:GridViewDataColumn FieldName="Adi" VisibleIndex="3"/>

            <dxwgv:GridViewDataColumn FieldName="Soyadi" VisibleIndex="4"/>

            <dxwgv:GridViewDataColumn FieldName="DogumTarihi" VisibleIndex="5"/>

            <dxwgv:GridViewDataColumn FieldName="GirisTarihi" VisibleIndex="6"/>

            <dxwgv:GridViewDataMemoColumn FieldName="Aciklama" VisibleIndex="7"/>

        </Columns>        

        <Templates>

             <EditForm>

             <div style="padding:4px 4px 3px 4px">

                 <table>

                     <tr>

                      

                         <td rowspan="4">

                             <div style="border: solid 1px #C2D4DA; padding: 2px;">

                                 <dxe:ASPxImage ID="ASPxImage1"

                                     runat="server"

                                     Width="200"

                                     Height="200"

                                     ImageUrl='<%# "FileHandler.ashx?id=" + Eval("KurucuID") %>'>

                                 </dxe:ASPxImage>

                            </div>

                           <br />

                          <dxuc:ASPxUploadControl id="UploadControl"

                               runat="server"

                               ShowAddRemoveButtons="true"

                               ShowUploadButton="true"

                               AddUploadButtonsHorizontalPosition="Left"

                               ClientInstanceName="UploadControl"

                               OnFileUploadComplete="UploadControl_FileUploadComplete"

                               FileInputCount="1">

                              <ValidationSettings MaxFileSize="4000000"

                                                  AllowedContentTypes="image/jpeg, image/gif, image/pjpeg">

                              </ValidationSettings>

                              <ClientSideEvents

                                  fileuploadcomplete="function(s, e) { FileUploaded(s, e) }"

                                  fileuploadstart="function(s, e) { FileUploadStart(); }"

                              />

                          </dxuc:ASPxUploadControl>

                          <div id="uploadedListFiles" style="height: 150px; font-family: Arial;">

                          </div>

                          </td>

                         <td style="white-space:nowrap">Adı</td>

                         <td style="width:50%"><dxe:ASPxTextBox runat="server"

                                                   ID="txtAdi"

                                                   Text='<%# Bind("Adi") %>'

                                                   Width="100%"></dxe:ASPxTextBox> </td>

                         <td style="white-space:nowrap">Soyadı</td>

                         <td  style="width:50%"><dxe:ASPxTextBox runat="server"

                                                    ID="txtSoyadi"

                                                    Text='<%# Bind("Soyadi") %>'

                                                    Width="100%"></dxe:ASPxTextBox> </td>

                     </tr>

                     <tr>

                         <td>Baslik</td>

                         <td style="width:100%" colspan="3">

                                         <dxe:ASPxTextBox runat="server"

                                             ID="edTitle"

                                             Text='<%# Bind("Baslik") %>'

                                             Width="100%"></dxe:ASPxTextBox> </td>

                     </tr>

                     <tr>

                         <td style="white-space:nowrap">Dogum Tarihi</td>

                         <td style="width:50%"><dxe:ASPxDateEdit runat="server"

                                                   ID="edDogumTarihi"

                                                   Value='<%# Bind("DogumTarihi") %>'

                                                   Width="100%"></dxe:ASPxDateEdit> </td>

                         <td style="white-space:nowrap">Giriş Tarihi</td>

                         <td style="width:50%"><dxe:ASPxDateEdit runat="server"

                                                   ID="edGirisTarihi"

                                                   Value='<%# Bind("GirisTarihi") %>'

                                                   Width="100%"></dxe:ASPxDateEdit> </td>

                     </tr>

                     <tr>

                         <td colspan="4">

                             <dxe:ASPxMemo runat="server"

                                 ID="edAciklama"

                                 Text='<%# Bind("Aciklama")%>'

                                 Width="528px"

                                 Height="300px"></dxe:ASPxMemo>

                         </td>

                     </tr>

                 </table>

                

             </div>

             <div style="text-align:right; padding:2px 2px 2px 2px">

                 <dxwgv:ASPxGridViewTemplateReplacement ID="UpdateButton"

                        ReplacementType="EditFormUpdateButton"

                        runat="server"></dxwgv:ASPxGridViewTemplateReplacement>

                 <dxwgv:ASPxGridViewTemplateReplacement ID="CancelButton"

                        ReplacementType="EditFormCancelButton"

                        runat="server"></dxwgv:ASPxGridViewTemplateReplacement>

             </div>

             </EditForm>

         </Templates>

 

         <Settings ShowPreview="true" showgrouppanel="True"/>

         <Images ImageFolder="~/App_Themes/Glass/{0}/">

             <CollapsedButton Height="12px" Width="11px" />

             <DetailCollapsedButton Height="9px" Width="9px" />

             <HeaderFilter Height="18px"

                           Url="~/App_Themes/Glass/GridView/gvHeaderFilter.png"

                           Width="18px" />

             <HeaderActiveFilter Height="18px"

                                 Url="~/App_Themes/Glass/GridView/gvHeaderFilterActive.png"

                                 Width="18px" />

             <FilterRowButton Height="13px" Width="13px" />

             <CustomizationWindowClose Height="17px" Width="17px" />

             <PopupEditFormWindowClose Height="17px" Width="17px" />

             <FilterBuilderClose Height="17px" Width="17px" />

        </Images>

         <SettingsPager PageSize="3" />

     </dxwgv:ASPxGridView>

</div>

<br />

<br />

</asp:Content>

 

[C#] Code Behind

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.IO;

using DevExpress.Web.ASPxUploadControl;

using DevExpress.Web.ASPxTabControl;

using DevExpress.Web.ASPxGridView;

using DevExpress.Web.ASPxEditors;

 

public partial class YonetimKurucular : System.Web.UI.Page

{

    Kurucular k = new Kurucular();

    DataTable dt = new DataTable();

    protected void Page_Load()

    {

        if (Session["GridData"] == null)

            Session["GridData"] = dt;

 

        grid.DataSource = (Session["GridData"] as DataTable);

 

        if (!IsPostBack)

        {

            KurucularYukle();

            grid.DataBind();

        }

    }

           //SQL den Grid'e veri bağlayan metodumuz

    protected void KurucularYukle()

    {

        if (k == null)

                k = new Kurucular();

        grid.DataSource = k.GetAllKurucular();

        grid.DataBind();

    }

           //Gridden SQL veri kaydeden metodumuz

    protected void grid_RowInserting(object sender, DevExpress.Web.Data.ASPxDataInsertingEventArgs e)

    {

        if (k == null)

            k = new Kurucular();

        if (((byte[])Session["data"]).Length >0)

        {

                                //ASPxGridView'in içindeki ASPxDateEdit ve  ASPxMemo kontrolünden veri alan metodumuz  

            ASPxDateEdit DogunTarihi = grid.FindEditFormTemplateControl("edDogumTarihi") as ASPxDateEdit;

            ASPxDateEdit GirisTarihi = grid.FindEditFormTemplateControl("edGirisTarihi") as ASPxDateEdit;

            ASPxMemo memo = grid.FindEditFormTemplateControl("edAciklama") as ASPxMemo;

 


            k.Resim = (byte[])Session["data"];

            k.Adi = Convert.ToString(e.NewValues["Adi"]); //ASPxTextBox veri alan metodumuz

            k.Soyadi = Convert.ToString(e.NewValues["Soyadi"]);

            k.Baslik = Convert.ToString(e.NewValues["Baslik"]);

            k.DogumTarihi = Convert.ToDateTime(DogunTarihi.Value);

            k.GirisTarihi = Convert.ToDateTime(GirisTarihi.Value);

            k.Aciklama = Convert.ToString(memo.Text);

 

            if (dt == null)

                dt = new DataTable();

            dt = k.RecordToKurucular(k);

            Session["GridData"] = dt;

        }

        e.Cancel = true;

        grid.CancelEdit();

        KurucularYukle();

    }

    protected void grid_RowUpdating(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e)

    {

        if (k == null)

            k = new Kurucular();

        if (((byte[])Session["data"]).Length > 0)

        {

            ASPxDateEdit DogunTarihi = grid.FindEditFormTemplateControl("edDogumTarihi") as ASPxDateEdit;

            ASPxDateEdit GirisTarihi = grid.FindEditFormTemplateControl("edGirisTarihi") as ASPxDateEdit;

            ASPxMemo memo = grid.FindEditFormTemplateControl("edAciklama") as ASPxMemo;

 

            k.KurucuID = Convert.ToInt32(e.Keys["KurucuID"]);

            k.Resim = (byte[])Session["data"]; //SQL'in Image alanına yazacağımız veri

            k.Adi = Convert.ToString(e.NewValues["Adi"]);

            k.Soyadi = Convert.ToString(e.NewValues["Soyadi"]);

            k.Baslik = Convert.ToString(e.NewValues["Baslik"]);

            k.DogumTarihi = Convert.ToDateTime(DogunTarihi.Value);

            k.GirisTarihi = Convert.ToDateTime(GirisTarihi.Value);

            k.Aciklama = Convert.ToString(memo.Text);

 

            if (dt == null)

                dt = new DataTable();

            dt = k.UpdateToKurucular(k);

 

            Session["GridData"] = dt;

        }

        e.Cancel = true;

        grid.CancelEdit();

        KurucularYukle();

    }

           //ASPxGridView'den veri silme metodu

    protected void grid_RowDeleting(object sender, DevExpress.Web.Data.ASPxDataDeletingEventArgs e)

    {

        if (k == null)

            k = new Kurucular();

        if (dt == null)

            dt = new DataTable();

        dt = k.DeleteKurucularByID(Convert.ToInt32(e.Keys["KurucuID"]));