ATLAS, Refresh’siz Uygulamalar -2

ATLAS, Refresh’siz Uygulamalar -2

26.11.2006 00:00:00

Atlas ile ilgili ilk makalemizde atlasın nimetlerinden bahsetmiş ve küçük bir örnek yapmıştık. Örneğimizde sayfalar arasında gezinirken sayfanın refresh olmadığını görmüştük. Bu makalemizde ise Atlas’ın Trigger özelliğinden bahsedeceğiz. Trigger bir nesnenin event’ i yada propertysine göre gerçekleşecek olayı arka planda çalıştırır.

Puan:

Kullanım şekli aşağıdaki gibidir.

<atlas:UpdatePanel ID="CustomerUpdatePanel" runat="server" Mode="Conditional">

’ Burada herhangi bir controlün event’i yada propety si takip edilecek..

<atlas:ControlEventTrigger ControlID="btnSave" EventName="Click" />

<atlas:ControlEventTrigger ControlID="lstCustomers" EventName="SelectedIndexChanged" />

<atlas:ControlValueTrigger ControlID="DropDownList1" PropertyName="SelectedValue" />

</Triggers>

Güncellenebilir içerik, textbox, grid, listbox vs…

</ContentTemplate>

Artık projemize geçebiliriz. Bunun için ilk olarak yeni bir proje açalım fakat proje template lerinden Atlas’ı seçelim.

Projemizi oluşturduktan sonra projemizde ne yapacağımızdan bahsedelim. Bunun için projemize bir adat dropdownlist ve bir adet grid ekleyelim. Sayfamıza eklediğimiz drop downlist içerisinde customers içerisindeki illeri listeleteceğiz. Kullanıcı bu illeri seçtiğinde bu illere ait olan müşteriler grid içerisinde listelenecektir. Sayfamızın kod kısmına gelerek ilk olarak sehirleri dropdownliste dolduracak kodları yazalım.

Private Sub Sehirler()

Dim Cnn As New SqlConnection("Data Source=localhost; Database=northwind; uid=sa; pwd=")

Dim Da As New SqlDataAdapter("Select distinct city from customers", Cnn)

Dim Ds As New DataSet

Da.Fill(Ds, "t")

DropDownList1.DataSource = Ds.Tables(0)

DropDownList1.DataTextField = "City"

DropDownList1.DataValueField = "City"

DropDownList1.DataBind()

End Sub

Sehirler adında bir sub oluşturduk. Bu sub’ ı istediğimiz yerden çağırabiliriz artık. Şehirlerimizi listeledikten sonra bu şehirdeki müşterilerimizi de görüntülemek için gridimizi doldurabiliriz artık.

Private Sub Musteriler(ByVal SQLString As String)

Dim Cnn As New SqlConnection("Data Source=localhost; Database=northwind; uid=sa; pwd=")

Dim Da As New SqlDataAdapter(SQLString, Cnn)

Dim Ds As New DataSet

Da.Fill(Ds, "t")

GridView1.DataSource = Ds.Tables(0)

GridView1.DataBind()

End Sub

Evet Müşterilerimiz içinde bir sub oluşturduk. Bu sub dışarıdan SQL cümlesini alarak kayıtları listelememizi sağlayacak. Artık projemiz hazır. Projemizi çalıştırdığımızda iller ve tüm kullanıcılar çalışacak. Tabi bunun için de form’un load olayında bu subları çağırmamız gerekecektir.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not Page.IsPostBack Then

Sehirler()

Musteriler("Select * from customers")

End If

End Sub

Evet gördüğümüz gibi sehirler sub’ı dropdownlist’i dolduruyor. Musteriler sub’ıda dışarıdan sql cümlesini alarak tüm kayıtları listeliyor. Şimdi seçilen ile göre o ildeki müşterileri grid üzerinde listeleyelim. Bunun için dropdownlist’in SelectedIndexChanged eventine aşağıdaki kodları yazalım.

Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged

Musteriler("Select * from customers where city=’" + DropDownList1.SelectedValue.ToString + "’")

End Sub

End Class

Gördüğünüz gibi yine müşteriler sub’ını çağırdık. Fakat küçük bir kriter ekleyerek J Dropdownlistten seçilen ile göre artık müşterilerimiz gridde listelenecek. Son olarak isterseniz sayfalar arasında gezinmek için (Paging) gridimizin sayfalama özelliğinide yazalım. Bunun için Gridimizin PageIndexChanging özelliğine aşağıdaki kodları yazalım.

Protected Sub GridView1_PageIndexChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewPageEventArgs) Handles GridView1.PageIndexChanging

GridView1.PageIndex = e.NewPageIndex

Musteriler("Select * from customers")

End Sub

Evet artık projemizi çalıştırdıktan sonra şehir isimleri dropdownlistte, tüm müşteriler de grid üzerinde görüntülenecek. Artık projemizi çalıştıralım.

Evet artık herşey çalışıyor. Bir il seçersek o ile ait kayıtlarda listelenecek. Bunun için dropdownlistten London seçelim. Aşağıda gördüğünüz gibi London’a ait kayıtlar aşağıda listelenmiştir.

Fakat projemizde eksik olan bir şeyler var. Sayfamız hala refresh ile çalışıyor. Dilerseniz bizi rahatsız eden bu eksiklikten kurtulalım. Sayfamızın HTML kısmına gelelim ve HTML kısmında küçük bir düzenleme yapalım.

<atlas:UpdatePanel ID="Customers" runat="server" RenderMode="Inline">

<Triggers>

<atlas:ControlValueTrigger ControlID="DropDownList1" PropertyName="SelectedValue" />

</Triggers>

<ContentTemplate>

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" BackColor="White"

BorderColor="#999999" BorderStyle="None" BorderWidth="1px" CellPadding="3" Font-Names="Verdana"

Font-Size="X-Small" GridLines="Vertical">

</asp:GridView>

</ContentTemplate>

</atlas:UpdatePanel>

Evet, düzenlememizi yaptıktan sonra her şey hazır. Projemizi çalıştırıp sayfamızı incelediğimizde sayfamızdaki her şeyin refresh’siz çalıştığını göreceksiniz. Sayfalar arasında gezinirken, Dropdownlistten herhangi bir il seçerken artık sayfamız refresh olmayacaktır. Evet arkadaşlar bu makalemizde atlasın güzelliklerini ve nimetlerini anlatmaya devam ettik. Ben projdeki CodeBehind ve HTML sayfalarını aşağıya ekledim. Detaylı olarak oradan da inceleyebilirsiniz.

------------------------------------------------------------------------------------------------

Default.aspx.cs

Imports System

Imports System.Data

Imports System.Data.SqlClient

Partial Class _Default

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not Page.IsPostBack Then

Sehirler()

Musteriler("Select * from customers")

End If

End Sub

Private Sub Musteriler(ByVal SQLString As String)

Dim Cnn As New SqlConnection("Data Source=localhost; Database=northwind; uid=sa; pwd=")

Dim Da As New SqlDataAdapter(SQLString, Cnn)

Dim Ds As New DataSet

Da.Fill(Ds, "t")

GridView1.DataSource = Ds.Tables(0)

GridView1.DataBind()

End Sub

Private Sub Sehirler()

Dim Cnn As New SqlConnection("Data Source=localhost; Database=northwind; uid=sa; pwd=")

Dim Da As New SqlDataAdapter("Select distinct city from customers", Cnn)

Dim Ds As New DataSet

Da.Fill(Ds, "t")

DropDownList1.DataSource = Ds.Tables(0)

DropDownList1.DataTextField = "City"

DropDownList1.DataValueField = "City"

DropDownList1.DataBind()

End Sub

Protected Sub GridView1_PageIndexChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewPageEventArgs) Handles GridView1.PageIndexChanging

GridView1.PageIndex = e.NewPageIndex

Musteriler("Select * from customers")

End Sub

Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged

Musteriler("Select * from customers where city=’" + DropDownList1.SelectedValue.ToString + "’")

End Sub

End Class

------------------------------------------------------------------------------------------------

Default.aspx

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title>Untitled Page</title>

</head>

<body>

<atlas:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" />

<br />

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" Width="208px">

</asp:DropDownList><br />

<br />

<div>

<atlas:UpdatePanel ID="Customers" runat="server" RenderMode="Inline">

<atlas:ControlValueTrigger ControlID="DropDownList1" PropertyName="SelectedValue" />

</Triggers>

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" BackColor="White"

BorderColor="#999999" BorderStyle="None" BorderWidth="1px" CellPadding="3" Font-Names="Verdana"

Font-Size="X-Small" GridLines="Vertical">

</asp:GridView>

</ContentTemplate>

</atlas:UpdatePanel>

</div>

</form>

</references>

</components>

</page>

</script>

</body>

</html>

Puan: