Asp.Net Repeater, Grideview Sürükle Bırak Yöntemi İle Tercih Sıralaması Yapma ve Güncelleme İşlemleri (Tercih Sayfası)

Asp.Net Repeater, Grideview Sürükle Bırak Yöntemi İle Tercih Sıralaması Yapma ve Güncelleme İşlemleri (Tercih Sayfası)

Tercih sıralamasını jquery ile değiştirip veri tabanına ilgili değişikliği kaydetmek için yapılmış bir uygulama.

HTML:

Grideview için:

<asp:GridView ID="GridView1" runat="server" CssClass="table table-hover table-bordered">
                    <Columns>
                        <asp:TemplateField HeaderText="Id">
                            <ItemTemplate>                               
                                <input type="hidden" name="LocationId" value='<%# Eval("Id") %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                       
                    </Columns>
</asp:GridView>

<asp:Button ID="btn_guncelle" runat="server" Text="GÜNCELLE" OnClick="btn_GUNCELLE_Click" CssClass="btn btn-success btn-block btn-lg" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("[id*=GridView1]").sortable({
                    items: 'tr:not(tr:first-child)',
                    cursor: 'pointer',
                    axis: 'y',
                    dropOnEmpty: false,
                    start: function (e, td) {
                        td.item.addClass("table table-border bg-info");
                    },
                    stop: function (e, td) {
                        td.item.removeClass("table table-border bg-danger");
                    },
                    receive: function (e, td) {
                        $(this).find("tbody").append(td.item);
                    }
                });
            });
        </script>

Repeater İçin:

<table id="tablo_1" class="table table-bordered table-hover form-group-sm">
                    <tr>
                        <th>Sıra No</th>
                        <th>İlçe</th>
                        <th>Okul/Kurum Adı</th>
                        <th>Tercih Sırası</th>
                        <th>#</th>
                    </tr>
                    <asp:Repeater ID="Repeater1" runat="server">
                        <HeaderTemplate>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <tr>
                                <td><%#Container.ItemIndex +1%>
                                    <input type="hidden" name="LocationId" value='<%# Eval("Id") %>' />
                                </td>
                                <td><%#Eval("ilce") %></td>
                                <td><%#Eval("okul") %></td>
                                <td><%#Eval("sira") %></td>
                                <td>Sil</td>
                            </tr>
                        </ItemTemplate>
                        <FooterTemplate>
                        </FooterTemplate>
                    </asp:Repeater>

                </table>

<asp:Button ID="btn_guncelle" runat="server" Text="GÜNCELLE" OnClick="btn_GUNCELLE_Click" CssClass="btn btn-success btn-block btn-lg" />

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("[id*=tablo_1]").sortable({
                    items: 'tr:not(tr:first-child)',
                    cursor: 'pointer',
                    axis: 'y',
                    dropOnEmpty: false,
                    start: function (e, td) {
                        td.item.addClass("table table-border bg-info");
                    },
                    stop: function (e, td) {
                        td.item.removeClass("table table-border bg-danger");
                    },
                    receive: function (e, td) {
                        $(this).find("tbody").append(td.item);
                    }
                });
            });
        </script>

Kod Kısmı: Repeater veya Grideniew e veri çekmeyi biliyorsunuz düşüncesiyle direkt koda güncelleme koduna geçeceğim:

Güncelle Butonumuzun click metoduna aşağıdaki kodları yazıyoruz:

protected void btn_guncelle_Click(object sender, EventArgs e)
        {
int[] konumId = (from p in Request.Form["LocationId"].Split(',') select int.Parse(p)).ToArray(); 

//Id nin bulunduğu input nesnesini buluyoruz
            int deger = 1;
            foreach (int konumIds in konumId)
            {
                this.Guncelle(konumIds, deger);
                deger += 1;
            }
            Response.Redirect(Request.Url.AbsoluteUri);

        }

        private void Guncelle(int konumIds, int deger)
        {
            using (VeriTabaniDb db = new VeriTabaniDb())
            {
                var _data = db.mrt_norm_tercih.Where(a => a.Id == konumIds).FirstOrDefault();
                _data.sira = deger;
                db.SaveChanges();
            }
        }