Sermin'in Bilgi Paylaşımı..

27 Aralık 2009 Pazar

ASP.NET AJAX Tabs Kontrol

0 yorum Gönderen Sermin Yağcı zaman: 01:24

Bu yazımızda Asp.net Ajax'ta kullanımımıza sunulan işlevsel ve görsel zenginliklerden bir tanesi olan Tab Kontrol üzerinde duracağız. Bu kontrol tek bir sayfayı organize bir şekilde kullanmamıza olanak sağlar.

VisualStudio içinde projemizi AJAXEnabledWebApplication olarak başlatıyoruz. ScriptManager sekmesi altına AjaxControlToolkit içinden bir tane TabContainer sürüklüyoruz bu kontrol TabPanellerimizi kendi bünyesinde toplayacaktır. Daha sonra sırasıyla istediğimiz kadar TabPanel kontrolünü TabContainer sekmesi içine sürüklüyoruz.TabPanel etiketi altına '< ' parantezimizi açtığımız zaman karşımıza iki seçenek çıkar ' <ContentTemplate> ', ' <HeaderTemplate> '. Content Template sekme içeriğini oluşturmamıza olanak sağlayacak etikettir. Header Template ise adından da anlaşılacağı gibi sekme başlığını yapılandırmamızı sağlar.
Default.aspx sayfamız içierisinde aşağıdaki gibi bir düzenleme yaparak

<cc1:TabContainer ID="TabContainer1" runat="server">
    <cc1:TabPanel ID="TabPanel1" runat="server" >
        <ContentTemplate>
        1. Sayfa - Sekme 1
        </ContentTemplate>
    </cc1:TabPanel>
    <cc1:TabPanel ID="TabPanel2" runat="server" >
        <ContentTemplate>
        2. Sayfa - Sekme 2<br />
        2. Sayfa - Sekme 2<br />
        </ContentTemplate>
    <2/cc1:TabPanel>
    <cc1:TabPanel ID="TabPanel3" runat="server">
        <ContentTemplate>
        3. Sayfa - Sekme 3<br />
        3. Sayfa - Sekme 3<br />
        3. Sayfa - Sekme 3<br />
        </ContentTemplate>
    </cc1:TabPanel>
</cc1:TabContainer>

Projemizi çalıştırdığımızda aşağıdaki görüntüyü elde ederiz.

İhtiyaçlarımız doğrultusunda özelleştirebileceğimiz bir kaç noktaya bakmak gerekirse. TabPanel etiketi içerisindeki "HeaderText" içinde sayfa başlığını belirtebiliriz.

<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="1. Sekme">
</cc1:TabPanel>

Sekme başlığını aynı zamanda ' <HeaderTemplate> ' içerisinde vererek dinamik olarak 'HeaderText' i override (ezmiş) oluruz.

<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="1. Sekme">
    <HeaderTemplate>
        Özel Başlık
    </HeaderTemplate>
</cc1:TabPanel>

Kodlarımıza aşağıdaki küçük eklemeyi yaptıktan sonra

<cc1:TabContainer ID="TabContainer1" runat="server">
    <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="1. Sekme">
        <ContentTemplate>
        1. Sayfa - Sekme 1
        </ContentTemplate>
    </cc1:TabPanel>
    <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="2. Sekme">
        <ContentTemplate>
        2. Sayfa - Sekme 2<br />
        2. Sayfa - Sekme 2<br />
        </ContentTemplate>
    <2/cc1:TabPanel>
    <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="3. Sekme">
        <ContentTemplate>
        3. Sayfa - Sekme 3<br />
        3. Sayfa - Sekme 3<br />
        3. Sayfa - Sekme 3<br />
        </ContentTemplate>
    </cc1:TabPanel>
</cc1:TabContainer>

Sayfa görünümümüz :

gibi olacaktır.Buna ek olarak yukarıda bahsettiğimiz Header Template etiketini eklersek :

dsds <cc1:TabContainer ID="TabContainer1" runat="server">
    <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="1. Sekme">
        <HeaderTemplate>
            Özel Başlık
        </HeaderTemplate>
        <ContentTemplate>
        1. Sayfa - Sekme 1
        </ContentTemplate>
    </cc1:TabPanel>
    <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="2. Sekme">
        <ContentTemplate>
        2. Sayfa - Sekme 2<br />
        2. Sayfa - Sekme 2<br />
        </ContentTemplate>
    <2/cc1:TabPanel>
    <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="3. Sekme">
        <ContentTemplate>
        3. Sayfa - Sekme 3<br />
        3. Sayfa - Sekme 3<br />
        3. Sayfa - Sekme 3<br />
        </ContentTemplate>
    </cc1:TabPanel>
</cc1:TabContainer>

Sayfa görüntümüz :

şeklinde olacaktır.
Umarım sizin için yararlı olabilmiştir. Yeni bir kontrolde görüşmek umuduyla..

9 Aralık 2009 Çarşamba

ASP.NET Web Sayfasında Popup Pencere Açmak

1 yorum Gönderen Sermin Yağcı zaman: 15:35

Bu yazımızdaki örneğimizde ana sayfamız olan aspx sayfasından javascript ve ASP.NET Methodlarından ClientScript.RegisterStartupScript kullanarak popup penceresi açmayı ve ana sayfamızda yaptığımız güncellemenin açılan popup penceresinde nasıl yenilendiğini beraberce öğreneceğiz.

Daha önceki yazılarımıda Ajax kontrollerinden ModalPopupExtender kullanarak popup menü açmayı ele almıştık. Burda farklı olarak popup penceresini ana pencereye bağlı başka bir child (alt) sayfa üzerinden açmayı öğreneceğiz.

Başlangıç olarak Default.aspx sayfamıza popup penceresinin açılmasını sağlayan butonu sürüklüyoruz. Güncellenecek bilgileri göstermek içinde iki tane label. Kod bloğumuz aşağıdaki gibidir.

<div>
    Adı :
    <asp:Label ID="lblAdi" runat="server" Text=" E. Yeşim">
    </asp:Label><br />
    <br />
    Soyadı :
    <asp:Label ID="lblSoyadi" runat="server" Text="Yağcı">
    </asp:Label><br />
    <br />
    <asp:Button ID="btnPop" runat="server" Text="Bilgileri Güncelleyin" />
</div>

Daha sonra Default.aspx sayfasının baş tarafına aşağıdaki java script kodunu ekleyelim. Burada amacımız alınan değerleri popup sayfası içine geçişi sağlamak.

Sonraki adımda Default.aspx.cs içindeki Page_Load methodu içine

protected void Page_Load(object sender, EventArgs e)
{
    string updateValuesScript = @"function updateValues(popupValues)
                {
                document.getElementById('lblFirstName').innerHTML=popupValues[0];
                document.getElementById('lblLastName').innerHTML=popupValues[1];
                }";

    this.ClientScript.RegisterStartupScript(Page.GetType(), "UpdateValues", updateValuesScript.ToString(), true);
    btnPop.Attributes.Add("onclick", "openPopUp('PopUp.aspx')");
}
protected void btnPop_Click(object sender, EventArgs e)
{

}

Şimdi projemize yeni bir Web Form ekleyerek devam ediyoruz. Bu form bizim güncelleme yapmak için açacağımız PopUp sayfamız olacak. Sayfa içerisine

<div>
    First Name :
    <asp:TextBox ID="txtPopAdi" runat="server" Width="113px">
    </asp:TextBox><br />
    <br />
    Last Name:<asp:TextBox ID="txtPopSoyAdi" runat="server" Width="109px">
    </asp:TextBox><br />
    <br />
    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</div>

protected void Page_Load(object sender, EventArgs e)
{
    string updateParentScript = @"function updateParentWindow()
                {
                var adi=document.getElementById('txtPopAdi').value;
                var soyadi=document.getElementById('txtPopSoyadi').value;
                var arrayValues= new Array(adi,soyadi);
                window.opener.updateValues(arrayValues);
                window.close();
                }";
    this.ClientScript.RegisterStartupScript(this.GetType(), "UpdateParentWindow", updateParentScript, true);
    if (!IsPostBack)
    {
        txtPopFName.Text = Request["fn"];
        txtPopLName.Text = Request["ln"];
    }
    Button1.Attributes.Add("onclick", "updateParentWindow()");
}
protected void Button1_Click(object sender, EventArgs e)
{

}

19 Kasım 2009 Perşembe

.csv Uzantılı Dosyayı Excel 2007’de Açmak

6 yorum Gönderen Sermin Yağcı zaman: 01:43

csv uzantılı bir dosyayı Excel Dosyası olarak açtığımızda, veriler karşımıza tek satır halinde yazılmış ve virgülle birbirinden ayrılmış, düz yazı olarak görüntülenir. Böyle olduğunda da verileri tablo şeklinde kullanmak imkansız olur.

Excel1

O yüzden dosyayı açarken şu yolu izlersek bu görünüşle karşı karşıya kalmayız. Boş Excel sayfası açalım.

Excel2

Data > FromText Seçtikten sonra Dönüştürmek istediğimiz csv uzantılı dosyayı gösterelim ve import seçelim.
Karşımıza üç adımlık bir dönüştürme sihirbazı çıkacak 1. Adımda düzenlemeyi kaçıncı satırdan başlayarak yapmamız istendiği soruluyor. 2. Adımda verileri neye göre sınırlayabileceğimiz soruluyor. Comma (virgül) seçtiğimiz zaman

Excel4

Aşağıdaki ekrana ulaşabiliriz.

Excel5

Umarım sizin için yaralı bir ipucu olmuştur..

4 Kasım 2009 Çarşamba

ASP.NET AJAX AutoCompleteExtender Kullanımı

1 yorum Gönderen Sermin Yağcı zaman: 00:58

Bu yazıda, Textbox içine doldurulması istenen veriyi veritabanından getirerek otomatik tamamlamayı bir örnek üzerinden anlamaya çalışacağız.

Textbox üzerinde otomatik tamamlama birçok yerde karşımıza çıkar. Bunun ASP.NET AJAX içinde herhangi bir TextBox Kontrolüne AutoCompleteExtender ekleyerek yapılabileceğinide biliriz. Kullanıcı Textbox içine yazmaya başladığında bir popup panel hareketli olarak kullanıcıya ilişkili sözcükleri getirir. Kullanıcı bu panelden istediği sözcüğü seçebilir. Şimdi WebService yardımı ile veri tabanından verileri nasıl getireceğiz ona balkalım.

Başlangıç olarak VisualStudio açarak, AJAXEnabledWebApplication olacak şekilde projemizi başlatıyoruz. Default.aspx sayfası içine bir tane TextBox birtane de AutoCompleteExtender sürüklüyoruz. Projeye bir tane WebService.asmx ekliyoruz. Yapacağımız ilk şey WebService.asmx.cs içine;

using System.Web.Script.Services;
[ScriptService]

referansını eklemek olmalı. Daha sonra 'SehirleriGetir' web metodu ile Sehir tablosundaki verileri alacağız.

private string cnstr = ConfigurationManager.ConnectionStrings["SehirConnectionString"].ConnectionString;

private string sql = string.Empty;

[WebMethod]
public string[] SehileriGetir(string onText)
{
    string sql = "Select * From Sehir Where Sehir_Adi like @onText";
    SqlDataAdapter da = new SqlDataAdapter(sql, cnstr);
    da.SelectCommand.Parameters.Add("@onTexst", SqlDbType.VarChar, 50).Value = onText + "%";
    DataTable dt = new DataTable();
    da.Fill(dt);
    string[] items = new string[dt.Rows.Count];
    int i = 0;
    foreach (DataRow dr in dt.Rows)
    {
        items.SetValue(dr["Sehir_Adi"].ToString(),i);
        i++;
    }
    return items;
}

Yukarıdaki webmethod içinde tutulan onText değişkeni, veri tabanından getirilecek olan veri ile ilişkili sözcükleri sorgulamak için gereklidir. Sql sorgusu ise bir strin dizi olarak sonuç döndürür.

Şimdi Default.aspx sayfası içine bir tane AutoCompleteExtender Kontrolü sürükleyerek özelliklerini aşağıdaki gibi düzenleyelim

<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
MinimumPrefixLength="1" ServiceMethod="SehirleriGetir"
ServicePath="WebService.asmx" TargetControlID="TextBox1">
</cc1:AutoCompleteExtender>

MinimumPreferixLength : Otomatik tamamlama işi kaç karakter yazdıktan sonra başlasın.
ServiceMethod : Tetiklendiği anda hangi method çağırılsın.
ServicePath : Methodun yolu.
TargetControlID : Tetikleme hangi kontrolle başlatılsın.

Projemizi çalıştırdığımızda karşımıza gelen sayfada texbox içine ilk harfimizi yazdığımızda o harfle başlayan veri tabanındaki şehirlerin kusursuz bir şekilde, popup bir kutuda sıralandığını göreceğiz.
Umarım sizin için yaralı olmuştur..

2 Kasım 2009 Pazartesi

ASP.NET GridView - Excel'e Veri Aktarma

1 yorum Gönderen Sermin Yağcı zaman: 12:28

Asp.Net'te Web uygulaması geliştirirken GridView tablosu içindeki veriyi Excel Tablosuna dönüştürme zorunluluğu çok sık karşılaştığımız bir ihtiyaçtır. Bu makalemizde ışık tutacağımız senaryoları şöyle sıralayabiliriz.

- GridView içindeki verinin tamamını Excele dönüştürme.
- GridView içindeki verinin göründüğü sayfayı Excele dönüştürmek
- GridView içinden seçilen rasgele satırı Excele Dönüştürmek
- GridView üzerindeki resim kolonunu Excel Tabloya dönüştürmek
- GridView içindeki sayı ve tarih sütünlarını Excel'e özel format tanımlayarak dönüşüm yapmak

Bu amaçla MS Management Studio içinde bir tablo oluşturarak başlayalım.

CREATE TABLE [dbo].[Personel](
[PersonelId] [int] IDENTITY(1,1) NOT NULL,
[Adi] [nvarchar](50) NULL,
[Yasi] [nvarchar](50) NULL,
[Eposta] [nvarchar](50) NULL,
[Sayi] [nvarchar](50) NULL,
[Bugun] [datetime] NULL,
[ImageURL] [nvarchar](250) NULL
) ON [PRIMARY]

Daha sonraki adımda Visual Studio içinde AJAX Enabled WebApplication açarak ihtiyacımız olan bileşenleri oluşturmaya başlıyoruz. Yapmayı istediğimiz şey database üzerindeki verileri bir sayfada tablo halinde göstererek kullanıcının istediği satırları, tüm tabloyu yada seçili sayfayı Excel Tablosuna dönüştürmek. Bunun için bizim en başta bir Update Panel'e ihtiyacımız var. Çünkü seçim yapılacak bir sayfamız var ve her seçimde sayfamızın yenilenmesini istemeyiz. Default.aspx sayfası içine sürüklediğimiz UpdatePanel içine GridView yerleştirdikten sonra, sütünları aşağıdaki gibi düzenliyoruz. Burda iki tane TemplateField, beş tanede BoundField ekeleyerek DataField'larını düzenliyoruz.

Mak10_1

Düzenlemeleri yaptıktan sonra üç tane buton sürükleyerek UpdatePanel'in tetikleyicisine bu butonları verebiliriz. Düzenlemeler yapıldıktan sonra Default.aspx sayfası içinde kodlar aşağıdaki gibi görülecektir.

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <table width="100%">
            <tr>
                <td>
                    <asp:GridView ID="GridView1" runat="server" Width="100%" OnPageIndexChanging="GridView1_PageIndexChanging"
PageSize="10" AllowPaging="True" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound"
DataKeyNames="PersonelId">
                        <Columns>
                            <asp:TemplateField HeaderText="Select">
                                <ItemTemplate>
                                    <asp:CheckBox ID="chkSecim" runat="server"} />
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:BoundField DataField="Adi" HeaderText="Adı" />
                            <asp:BoundField DataField="Yasi" HeaderText="Yaşı" />
                            <asp:BoundField DataField="Eposta" HeaderText="Eposta" />
                            <asp:BoundField DataField="Sayi" HeaderText="Sayı" />
                            <asp:BoundField DataField="Bugun" HeaderText="Bugün" />
                            <asp:TemplateField HeaderText="Sevdiği">
                                <ItemTemplate>
                                    <asp:Image ID="Image1" runat="server" ImageUrl='<%# Bind("ImageURL") %>'></asp:Image>
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                </td>
            </tr>
            <tr>
                <td>
                    <table width="100%">
                        <tr>
                            <td width="25%">
                                <asp:Button ID="TumTabloyuDonustur" OnClick="TumTabloyuDonustur_Click" runat="server" Text="Tüm Satırları Dönüştür" />
                            </td>
                            <td width="25%">
                                <asp:Button ID="SeciliSatirlariDonustur" OnClick="SeciliSatirlariDonustur_Click" runat="server" Text="Seçili Satırları Dönüştür"/>
                            </td>
                            <td width="25%">
                                <asp:Button ID="SayfayiDonustur" OnClick="SayfayiDonustur_Click" runat="server" Text="Mevcut Sayfayı Dönüştür"/>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </ContentTemplate>
    <Triggers>
        <asp:PostBackTrigger ControlID="TumTabloyuDonustur" />
        <asp:PostBackTrigger ControlID="SeciliSatirlariDonustur" />
        <asp:PostBackTrigger ControlID="SayfayiDonustur" />
    </Triggers>
</asp:UpdatePanel>

Dönüştürme işlemine başlamadan önce GridView için yapmamız gereken üç kontrolümüz var. Bunlar:

1. Personel tablomuzu GridView içine taşımak
2. GridView içinde sayfalanmasına izin vermek
3. Seçim kutusunun işaretlendiği değerleri koruyarak başka sayfaya yönlendirme yapmak

1. Personel Tablosunu GridView içine doldurmak

Bu işlem sırasında kullanılan ConnectionString cümlesini metot dışında tanımlamak daha sağlıklı olduğu için aşağıdaki şekilde kullanıyoruz.

private string cnstr = ConfigurationManager.ConnectionStrings["PersonelConnectionString"].ConnectionString;

private string sql=string.Empty;

private void GridDoldur()
{
     string sql = "Select PersonelId, Adi, Yasi, Eposta, Sayi, Bugun, ImgUrl From Personel";
     SqlDataAdapter da = new SqlDataAdapter(sql, "PersonelConnectionString");
     DataTable dt = new DataTable();
     da.Fill(dt);
     GridView1.DataSource = dt;
     GridView1.DataBind();
}

Yukarıda private bir metotla sql bağlantısını kurup veri tabanındaki tablomuzu bir DataTable üzerine alarak, GridView içine bağlıyoruz. Sayfa açıklırken yüklenmesini sağlıyoruz.

protected void Page_Load(object sender, EventArgs e)
{
     if (!IsPostBack)
     {
         GridDoldur();
     }
}

2. PageIndexChanging olayında sayfanın görüntülenmesi

Seçilen satırlardaki verileri göstermek için ayrı bir GridView oluşturmadan ortak kullanımla sayfalama yoluna gitmek için aşağıdaki düzenlemeyi yapmamız gerekiyor. Biz GridView özelliklerinden AllowPaging özelliğini "true" yaptığımızda bu aslında bu kullanımı sağlayabiliyoruz. Ama burda dikkat etmemiz gereken şey bu gösterimin sadece seçilen satırlar için olması gerektiği.

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
     SecilenListeyiGetir();
     GridView1.PageIndex = e.NewPageIndex;
     BindGrid();
}

Bu yüzden seçilen satırları geçici bir ArrayList değişkeninde tutarak ViewState içinde muhafaza edilmesini sağlayacağız. Kullanıcı diğer sayfaları gezerken seçilen değerler saklı kalacak.

3. Seçilen satırlardaki değerlerin korunması

Bu işlemi yapabilmek için bir tane ArrayList değişkenine ihtiyaç duyarız. Bunun için System.IO alanını projemize referans etmeliyiz.

using System.IO;

ArrayList arrlist = new ArrayList();

Daha sonraki adımda SecilenListeyiGetir metodunu oluşturacağız. Bu metot içinde yaptığımızı kısaca açıklamak gerekirse; ViewState içinde bir ArrayList değişkeni tanımlıyoruz, daha sonra bir foreach döngüsü ile GridView satırları içinde dönerek find kontrolü ile tespit ettiğimiz chkSecim olarak adlandırdığımız CheckBox kontrolünün seçili olanlarını değişken üzerine atıyoruz.

private void SecilenListeyiGetir()
{
    if (this.ViewState["ArrList"] != null)
    {
        arrlist = (ArrayList)this.ViewState["ArrList"];
    }

    foreach (GridViewRow gvr in GridView1.Rows)
    {
        CheckBox chkSecim = (CheckBox)gvr.FindControl("chkSecim");
        if (chkSecim.Checked)
        {
            if (!arrlist.Contains(GridView1.DataKeys[gvr.RowIndex].Value.ToString()))
arrlist.Add(GridView1.DataKeys[gvr.RowIndex].Value.ToString());
        }
        else
        {
            if (arrlist.Contains(GridView1.DataKeys[gvr.RowIndex].Value.ToString()))
arrlist.Remove(GridView1.DataKeys[gvr.RowIndex].Value.ToString());
        }
    }

    if (arrlist.Count > 0)
    {
        this.ViewState["ArrList"] = arrlist;
    }
}

GridView'un RowDataBound Olayı

Seçilmiş CheckBox'ları seçili tutmak için GridView kontrolün RowDataBound olayında ArrayList'in seçili herhangi bir değer içerip içermediğini kontrol ediyoruz. Eğer öyle bir değer içeriyorsa CheckBox'un Checked özelliğini "true" olarak set ediyoruz;

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        if (arrlist.Contains(GridView1.DataKeys[e.Row.RowIndex].Value.ToString()))
        {
            CheckBox chkSelect = (CheckBox)e.Row.FindControl("chkSelect");
            chkSelect.Checked = true;
        }
    }
}

Şimdi internet tarayıcısında sayfa çalıştırıldığında GridView içine tablo verilerinin dolduğunu görebiliriz ve sayfalar arasında gezinebiliriz. Seçilen herhangi bir sayfadaki herhangi bir seçim kutusu, başka sayfalar görüntülenirken bizim için saklı tutulacaktır.

GridView'u Excel'e Aktarım

Şimdi makalemizin ana amacına geldik. GridView içindeki verileri Excel sayfası olarak görüntülemek. Bunu başarmak için GridView sınıfından bir nesne oluşturmamız gerekir. Bu nesnenin sütunları, veri tabanından getirerek GridView kontrolü içinde gösterdiğimiz tablo sütunları ile aynı olmalı. GridView sınıfının, RenderControl metodu yardımıyla, verileri bir html olarak yazdıracağız. Daha sonra FileStream kullanarak, bir Excel dosyası oluşturup, içerisini oluşturduğumuz html ile dolduracağız. Bu arada Tarih ve sayı kolonları için format düzenlemesi yapacağız. Şimdi bunları adım adım yapalım:

1: GridView Instance oluşturup DataTable'a bağlayalım

private void GridExceleDonsun(DataTable dtData)
{
    StringWriter strWriter = new StringWriter();
    HtmlTextWriter htmlWriter = new HtmlTextWriter(strWriter);

    BoundField PerId = new BoundField();
    BoundField PerAdi = new BoundField();
    BoundField PerYasi = new BoundField();
    BoundField PerEposta = new BoundField();
    BoundField KesirliSayi = new BoundField();
    BoundField BugunTarihi = new BoundField();
    ImageField ImgField = new ImageField();

    PerAdi.HeaderText = " Personel Id";
    PerAdi.HeaderText = "Adı";
    PerYasi.HeaderText = "Yaşı";
    PerEposta.HeaderText = "Eposta";
    KesirliSayi.HeaderText = "Kesirli Sayı";
    BugunTarihi.HeaderText = "Bugün";
    ImgField.HeaderText = "Sevdiği";

    ImgField.ItemStyle.Height = Unit.Pixel(100);
    ImgField.ItemStyle.Width = Unit.Pixel(150);

    PerId.DataField = "PersonelId";
    PerAdi.DataField = "Adi";
    PerYasi.DataField = "Yasi";
    PerEposta.DataField = "Eposta";
    KesirliSayi.DataField = "Sayi";
    BugunTarihi.DataField = "Bugun";
    ImgField.DataImageUrlField = "ImgURL";
    ImgField.DataImageUrlFormatString = "http://localhost/Makaleler/ExportingData/{0}";

    GridView g = new GridView();
    g.AutoGenerateColumns = false;
    g.RowDataBound += new GridViewRowEventHandler(g_RowDataBound);
    g.Columns.Insert(0, PerId);
    g.Columns.Insert(1, PerAdi);
    g.Columns.Insert(2, PerYasi);
    g.Columns.Insert(3, PerEposta);
    g.Columns.Insert(4, KesirliSayi);
    g.Columns.Insert(5, BugunTarihi);
    g.Columns.Insert(6, ImgField);

    g.DataSource = dtData;
    g.DataBind();
}

Yukarıdaki kodda altı tane BoundField ve bir tane ImageField kolonu oluşturduk, başlıklarını hazırladık. Herbirinin FieldName'ini beirttik. Son sütundaki DataImageUrlField ve DataImageUrlFormatString belirttik. DataImageUrlFormatString içine resmin tam yerinin URL'sini verdik. Resmin genişliği ve yüksekliğini ayarladık.
Yeni bir GridView instance oluşturup AutoGenerateColumns özelliğini "false" yapıyoruz. BoundField ve ImageField' larımızı içine yerleştiriyoruz. Daha sonra GridView içine DataTable 'dtData' bağlayarak Excel sayfasına dönüştürüyoruz.
Oluşturduğumuz GridView instance'ı RowDataBound olayı ile başlatıyoruz. Bunun sebebi bazı sütunların özel format gerektirmesidir.

protected void g_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Cells[4].Attributes.Add("class", "text");
        e.Row.Cells[5].Attributes.Add("class", "tarihformat");
    }
}

2: StringWriter Instance Oluşturmak

StringWriter strwriter = new StringWriter();
HtmlTextWriter htmlwriter = new HtmlTextWriter(strwriter);
g.RenderControl(htmlwriter);
string htmlmarkup = strwriter.ToString();

Yukardaki kodu anlamak kolaydır. StringWriter ve HtmlTextWriter instance yaratıp GridView instance içeriğini html olarak dönüştürür. Artık elimizden 'htmlmarkup' denilen bir HTML kaynağı vardır.

3: FileStream Nesnesi Oluşturmak

Excel dosya adı oluşturarak 'Dosya1.xls' FileStream nesnesinin içini htmlmarkup içeriği ile dolduruyoruz.

FileStream fs = new FileStream(Server.MapPath("Dosya1.xls"), FileMode.Create);
    try
    {
        Byte[] bContent = System.Text.Encoding.GetEncoding("utf-8").GetBytes(htmlmarkup);
        fs.Write(bContent, 0, bContent.Length);
    }
    catch (Exception ex)
    {
        Response.Write(ex.Message);
    }
    finally
    {
        fs.Close();
        fs.Dispose();
    }

4: Sayı ve Tarih sütunlarının Excel Sayfası için formatlanması

Bir Cascading Style Sheet (CSS) (basamaklı biçim deposu) yaratarak kesirli sayı ve tarih kolonları için Excel sayfasına göre formatlıyoruz.

string style = @"<style> .text { mso-number-format:0\.00; } ";
style += ".tarihformat {mso-number-format:\"Short Date\"}";
style += " </script>";

Response.Write(style);

5: Excel Sayfasında indirildi mesaj kutusu

Tablo içerisinden indirilmesi istenen kısımların nereye ve hangi adla kaydedilmesi gerektiği kullanıcıdan dinamik olarak sorgulanması gereken bir görevdir.İşin bu kısmınıda aşağıdaki gibi yapabiliyoruz.

Response.AppendHeader("content-disposition", "attachment;filename=File1.xls");

Response.WriteFile("File1.xls");
Response.End();

Son düzenlemelerden sonra

GridView bir tabloyu Excel Sayfası olarak nasıl görüntüleyip, Excel Dökümanı olarak nasıl kaydedebileceğimizi örneğimiz üzerinde ayrıntılı şakilde anlamaya çalıştık. Tüm düzenlemelerden sonra kodlarımız bütün olarak aşağıdaki gibi görünmektedir.

private ArrayList arrlist = new ArrayList();
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        GridDoldur();
    }

}
private string cnstr = ConfigurationManager.ConnectionStrings["PersonelConnectionString"].ConnectionString;

private string sql;
private void GridDoldur()
{
    string sql = "Select PersonelId, Adi, Yasi, Eposta, Sayi, Bugun, ImageURL From Personel";
    SqlDataAdapter da = new SqlDataAdapter(sql, cnstr);
    DataTable dt = new DataTable();
    da.Fill(dt);
    GridView1.DataSource = dt;
    GridView1.DataBind();
}
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    SecilenListeyiGetir();
    GridView1.PageIndex = e.NewPageIndex;
    GridDoldur();
}
private void GridExceleDonussun(DataTable dtData)
{
    StringWriter strWriter = new StringWriter();
    HtmlTextWriter htmlWriter = new HtmlTextWriter(strWriter);

    BoundField PerId = new BoundField();
    BoundField PerAdi = new BoundField();
    BoundField PerYasi = new BoundField();
    BoundField PerEposta = new BoundField();
    BoundField KesirliSayi = new BoundField();
    BoundField BugunTarihi = new BoundField();
    ImageField ImgField = new ImageField();

    PerAdi.HeaderText = " Personel Id";
    PerAdi.HeaderText = "Adı";
    PerYasi.HeaderText = "Yaşı";
    PerEposta.HeaderText = "Eposta";
    KesirliSayi.HeaderText = "Kesirli Sayı";
    BugunTarihi.HeaderText = "Bugün";
    ImgField.HeaderText = "Sevdiği";

    ImgField.ItemStyle.Height = Unit.Pixel(100);
    ImgField.ItemStyle.Width = Unit.Pixel(150);

    PerId.DataField = "PersonelId";
    PerAdi.DataField = "Adi";
    PerYasi.DataField = "Yasi";
    PerEposta.DataField = "Eposta";
    KesirliSayi.DataField = "Sayi";
    BugunTarihi.DataField = "Bugun";
    ImgField.DataImageUrlField = "ImgUrl";
    //AdresDüzenlenecek
    ImgField.DataImageUrlFormatString = "http://localhost/Makaleler/ExportingData/{0}";

    GridView g = new GridView();
    g.AutoGenerateColumns = false;
    g.RowDataBound += new GridViewRowEventHandler(g_RowDataBound);

    g.Columns.Insert(0, PerId);
    g.Columns.Insert(1, PerAdi);
    g.Columns.Insert(2, PerYasi);
    g.Columns.Insert(3, PerEposta);
    g.Columns.Insert(4, KesirliSayi);
    g.Columns.Insert(5, BugunTarihi);
    g.Columns.Insert(6, ImgField);

    g.DataSource = dtData;
    g.DataBind();
    g.RenderControl(htmlWriter);

    string htmlmarkup = strWriter.ToString();
    FileStream fs = new FileStream(Server.MapPath("Dosya1.xls"), FileMode.Create);
    try
    {
        Byte[] bContent = System.Text.Encoding.GetEncoding("utf-8").GetBytes(htmlmarkup);
        fs.Write(bContent, 0, bContent.Length);
    }
    catch (Exception ex)
    {
        Response.Write(ex.Message);
    }
    finally
    {
        fs.Close();
        fs.Dispose();
    }
    string style = @"<style> .text { mso-number-format:0\.00; } ";
    style += ".tarihformat {mso-number-format:\"Short Date\"}";
    style += " </script>";
    Response.Write(style);

    Response.AppendHeader("content-disposition", "attachment;filename=Dosya1.xls");
    Response.WriteFile("Dosya1.xls");
    Response.End();
}

protected void g_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Cells[4].Attributes.Add("class", "text");
        e.Row.Cells[5].Attributes.Add("class", "tarihformat");
    }
}

private void SecilenListeyiGetir()
{

    if (this.ViewState["ArrList"] !=null)
    {
        arrlist = (ArrayList)this.ViewState["ArrList"];
    }
    foreach (GridViewRow grv in GridView1.Rows)
    {
        CheckBox chkSecim = (CheckBox)grv.FindControl("chkSecim");
        if (chkSecim.Checked)
        {
            if(!arrlist.Contains(GridView1.DataKeys[grv.RowIndex].Value.ToString()))
                arrlist.Add(GridView1.DataKeys[grv.RowIndex].Value.ToString());
        }
        else
        {
            if(arrlist.Contains(GridView1.DataKeys[grv.RowIndex].Value.ToString()))
                arrlist.Remove(GridView1.DataKeys[grv.RowIndex].Value.ToString());
        }
    }
    if (arrlist.Count>0)
    {
        this.ViewState["Arrlist"] = arrlist;
    }
}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        if (arrlist.Contains(GridView1.DataKeys[e.Row.RowIndex].Value.ToString()))
        {
            CheckBox chkSecim = (CheckBox)e.Row.FindControl("chkSecim");
            chkSecim.Checked = true;
        }
    }
}
protected void TumTabloyuDonustur_Click(object sender, EventArgs e)
{
    DataTable dt = new DataTable();
     string sql = "Select PersonelId, Adi, Yasi, Eposta, Sayi, Bugun, ImageURL From Personel";
    SqlDataAdapter da = new SqlDataAdapter(sql, cnstr);
    da.Fill(dt);
    GridExceleDonussun(dt);
}
protected void SeciliSatirlariDonustur_Click(object sender, EventArgs e)
{
    SecilenListeyiGetir();
    if (this.ViewState["ArrList"] != null)
    {
        arrlist = (ArrayList)this.ViewState["ArrList"];
    }

    DataTable dt = new DataTable();
    string sql = "Select PersonelId, Adi, Yasi, Eposta, Sayi, Bugun, ImageURL From Personel";
    SqlDataAdapter da = new SqlDataAdapter(sql, cnstr);
    da.Fill(dt);
    DataView dv = dt.DefaultView;
    DataTable dtTemp = dv.ToTable().Clone();
    for (int i = 0; i < arrlist.Count; i++)
    {
        dv.RowFilter = "PersonelId=" + arrlist[i].ToString();
        dtTemp.ImportRow(dv.ToTable().Rows[0]);
    }
    GridExceleDonussun(dtTemp);
}
protected void SayfayiDonustur_Click(object sender, EventArgs e)
{
    DataTable dt = new DataTable();
    string sql = "Select PersonelId, Adi, Yasi, Eposta, Sayi, Bugun, ImageURL From Personel";
    da.Fill(dt);
    DataView dv = dt.DefaultView;
    DataTable dtTemp = dv.ToTable().Clone();
    foreach (GridViewRow grv in GridView1.Rows)
    {
        dv.RowFilter = "PersoneId" + GridView1.DataKeys[grv.RowIndex].Value.ToString();
        dtTemp.ImportRow(dv.ToTable().Rows[0]);
    }
    GridExceleDonussun(dtTemp);
}

Bu çalışma umarım sizler için yararlı olmuştur..

17 Ekim 2009 Cumartesi

Microsoft Web Platform Installer 2.0

0 yorum Gönderen Sermin Yağcı zaman: 10:48

Microsoft Web Platform Installer 2.0 (Web PI), Internet Information Services (IIS), SQL Server Express, .NET Framework ve Visual Web Developer dahil Microsoft Web Platform un tüm bileşenlerini ücretsiz indirmemizi sağlayan çok yararlı bir araçtır. Denemenizi tavsiye ederim. Aşağıdaki linkten indirebilirsiniz..

Microsoft Web Platform Installer 2.0

Sermin Yağcı

9 Ekim 2009 Cuma

ASP.NET AJAX Controltoolkit: ToggleButtonExtender Kullanımı

0 yorum Gönderen Sermin Yağcı zaman: 14:20

Asp.Net Ajax Kontrollerinden Toggle Button nasıl ve ne amaçla kullanıldığını anlamaya çalışacağız. Türkçe karşılığı iki konumlu düğme olan bu kontrol adından da anlaşılacağı gibi iki farklı görsel öğeyi üzerinde barındırır. Alışık olduğumuz kontrollerden RadioButton ve CheckBoxtan farklı olarak üzerinde resim taşır. Checkbox kontrolü yardımı ile herhangi bir işlem için onay alımı ya da bir grid üzerinde görüntülenmekte olan bilgilerin bir kısmının silinip silinmeyeceği bilgisini arka tarafta list kolleksiyonuna eklerken ana işlem olarak kullanılabilmekte. Ancak son kullanıcılara kutu içerisinde bir seçilmiş okey işareti yerine dikkat çeken bir görsel öğe sunmak her zaman sayfamıza zenginlik katar.

Bunu basit bir örnekle anlatmak gerekirse; VisualStudio içinde projemizi AJAXEnabledWebApplication olarak başlatalım. projeye yeni bir resim klasörü ekleyelim. Bu klasör içine slayt içinde kullanacağımız resimleri koyalım. Default.aspx sayfasındaki script manager altına bir tane update panel, iki tane check box, bir tane button, bir tane image, iki tane de toggle button sürükleyelim.

Sırasıyla CheckBoxların checked özelliğini "false" widht ve hight özelliklerinide seçtiğimiz resimlerin boyutuna getirelim. ToggleButton özelliklerinden TargetControlID, ImageWidth, ImageHeight, UncheckedImageUrl, ChekedImageUrl özelliklerini düzenliyoruz.

<asp:CheckBox ID="CheckBox1" Checked="false" Width="200px" Height="150" runat="server" />
<br />
<asp:CheckBox ID="CheckBox2" Checked="false" Width="200px" Height="150" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
<br />
<asp:Image ID="Image1" ImageUrl="~/Resim/r0.png" runat="server" />
<br />
<asp:Label ID="Label1" runat="server" Text="Daha bişey seçilmedi.."></asp:Label>
<cc1:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server" TargetControlID="CheckBox1"
        ImageWidth="100" ImageHeight="100" UncheckedImageUrl="Resim/r0.png" CheckedImageUrl="Resim/r1.png"
        CheckedImageAlternateText="Seçildi" UncheckedImageAlternateText="Seçilmedi">
</cc1:ToggleButtonExtender>
<cc1:ToggleButtonExtender ID="ToggleButtonExtender2" runat="server" TargetControlID="CheckBox2"
        ImageWidth="100" ImageHeight="100" UncheckedImageUrl="Resim/r0.png" CheckedImageUrl="Resim/r2.png"
        CheckedImageAlternateText="Seçildi" UncheckedImageAlternateText="Seçilmedi">
</cc1:ToggleButtonExtender>

Button1 üzerine iki kez tıkaldıktan sonra Default.aspx.cs içine

protected void Button1_Click(object sender, EventArgs e)
     {
         string strSecilen = "";
         Image1.ImageUrl = "Resim/r0.png";
         if (!CheckBox1.Checked && !CheckBox2.Checked)
             {
                  Image1.ImageUrl = "Resim/r0.gif";
                  strSecilen = "Seçilmedi bişey..";
              }
          else if (!CheckBox2.Checked)
              {
                 Image1.ImageUrl = "Resim/r1.gif";
                 strSecilen = "üst resim seçildi..";
              }
           else if (!CheckBox1.Checked)
             {
                  Image1.ImageUrl = "Resim/r2.gif";
                  strSecilen = "alt resim seçildi..";
             }
           else
            {
                 Image1.ImageUrl = "Resim/r3.gif";
                 strSecilen = "aboo hepsi geliverdi..";
            }
          Label1.Text = strSecilen;
     }

kontrolünü yazıyoruz.Proğramı çalıştırdığımızda sonuç..

Hiç seçim yapmadan tıkladığımızda..

sayfa2

Üst resmi seçip tıkladığımızda..

sayfa3

Alt resmi seçip tıklandığımızda..

sayfa4

İkisi de seçildiğinde..

sayfa5

Umarım yararlı olabilmişimdir.

Sermin Yağcı

http://serminyagci.blogspot.com

Sermin'in Bilgi Paylaşımı..

27 Aralık 2009 Pazar

ASP.NET AJAX Tabs Kontrol

9 Aralık 2009 Çarşamba

ASP.NET Web Sayfasında Popup Pencere Açmak

19 Kasım 2009 Perşembe

.csv Uzantılı Dosyayı Excel 2007’de Açmak

4 Kasım 2009 Çarşamba

ASP.NET AJAX AutoCompleteExtender Kullanımı

2 Kasım 2009 Pazartesi

ASP.NET GridView - Excel'e Veri Aktarma

17 Ekim 2009 Cumartesi

Microsoft Web Platform Installer 2.0

9 Ekim 2009 Cuma

ASP.NET AJAX Controltoolkit: ToggleButtonExtender Kullanımı

Etiketler

Blog Arşivim

Sponsor

Blog Listem