Repeater İle Satır Taşıma

Repeater ile verileri listemek yada sıralamak^sort mümkün. Peki sıralamasını manuel nasıl yaparız?

Bunu gerçekleştirmek için taşıma yapmak istediğimiz tablomuza RowNumber adlı bir kolon^field ekliyoruz. Bu kolondaki değer verinin sıra numarasını temsil edecek. Taşıma işlemi ise bu numaraları değiştirmekten ibaret olacaktır.

Repeater içine sıralama olayını gerçekleştirmek için iki adet ImageButton kontrolü ekliyoruz. CommandArgument özelliğine^property taşınacak satırın Id değerini atıyoruz^set. CommandName özelliğine atanan up ve down değerleri ile de taşıma yönünü bildiriyoruz.

<td style="width: 24px; text-align: center;">
    <asp:ImageButton runat="server"
                        ID="moveup"
                        ImageUrl="~/Images/up.png"
                        ToolTip="Yukarı Taşı"
                        CommandArgument='<%# Eval("Id")%>' 
                        CommandName="up" />
</td>
<td style="width: 24px; text-align: center;">
    <asp:ImageButton runat="server"
                        ID="movedown" 
                        ImageUrl="~/Images/down.png" 
                        ToolTip="Aşağı Taşı"
                        CommandArgument='<%# Eval("Id")%>' 
                        CommandName="down" />
</td>

Repeater kontrolünün ItemCommand olayı^event na aşağıdaki kodları yazarak taşıma işlemini gerçekleştiriyoruz.

using (NorthwindDataContext db = new NorthwindDataContext())
{
    //taşınacak verinin Id bilgisi alınıyor
    Guid Id = new Guid(e.CommandArgument.ToString());
    //taşınacak veri
    OrderedProduct moveproduct = db.
                                    OrderedProducts.
                                    FirstOrDefault(p => p.Id == Id);
    //yeni numara hesapla
    int RowNumber = e.CommandName == "up" ? 
                    moveproduct.RowNumber - 1 : //yukarı ise
                    moveproduct.RowNumber + 1; //aşağı ise
    //yeri değişecek veri
    OrderedProduct targetproduct = db.
                                    OrderedProducts.
                                    FirstOrDefault(p => p.RowNumber == RowNumber);
    if (e.CommandName == "up")
    {
        //yukarı taşı
        moveproduct.RowNumber -= 1;
        targetproduct.RowNumber += 1;
    }
    else if (e.CommandName == "down")
    {
        //aşağo taşı
        moveproduct.RowNumber += 1;
        targetproduct.RowNumber -= 1;
    }
    //değişiklikleri yap
    db.SubmitChanges();
}
//tekrar listele
BindData();

Daha sonra ise, ilk satırdaki Yukarı Ok u ve en alt satırdaki Aşağı Ok ImageButton'larını basit bir script kodu ile kaldırıyoruz. Bu kod sayesinde sunucu^server tarafındaki ilk kayıt mı son kayıt mı kontrolünü yapmaktan yırtıyoruz :)

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("table tbody tr:first td:eq(3)").empty();
        $("table tbody tr:last td:eq(4)").empty();
    });
</script>

Repeater kontrolü render^{Html koduna dönüşmek} edildiğinde aşağıdaki görüntü oluşacaktır. Kullanıcı yukarı aşağı ok tuşları ile satırları manuel olarak sıralayabilecek.

Projeyi indir.