Menghadapi masalah di ASP.NET GridView drag and drop menggunakan jQuery

Anda perlu memberikan id baris nilai kunci Anda di GridView Anda. Ini mudah dilakukan di acara OnRowDataBound. Tautkan File JavaScript Anda di kepala Anda. jquery.tablednd.js berasal dari 30 Oktober 2014

<script src="js/jquery-1.11.1.js" type="text/javascript"></script>
<script src="js/jquery.color.js" type="text/javascript"></script>
<script src="js/jquery.tablednd.js" type="text/javascript"></script>

Tulis halaman JavaScript. Ganti gvDevConfig dengan nama GridView Anda. Manfaatkan rutinitas ajax Anda sendiri untuk memperbarui database Anda dengan pesanan baru. Ganti ctl00_indexPH_gvDevConfig dengan id server GridView Anda. Jika tidak berada di dalam PlaceHolder, Anda dapat alert($.tableDnD.serialize()); untuk melihat serialisasi apa yang lewat, dan ganti semua kecuali nilai numerik, pisahkan titik koma.

<script type="text/javascript" language="javascript">
    function ActivateGrid() {
        $("#<%=gvDevConfig.ClientID%>").tableDnD({
            onDragClass: "highlight",
            onDrop: function (table, row) {
                $(row).animate({ backgroundColor: "#ffff99" }, 1000).animate({ backgroundColor: "white" }, 3500);
                var values = $.tableDnD.serialize().replace(/&/gi, ";").replace(/%5B%5D/gi, "").replace(/ctl00_indexPH_gvDevConfig=/gi, "");
                $.ajax({ type: "GET", url: "xml/ajax_spacers.aspx", async: true, data: "DevOrder=" + values, success: function (t) {
                    $(".jqOrderResults").html("Order Saved");
                } 
                });
            }
        });
    }
</script>

Tambahkan kelas ke header dan footer Anda untuk mencegah drag and drop ke posisinya. Buat acara OnRowDataBound untuk mengaktifkan fitur ini dan tetapkan Kunci untuk setiap baris. Catatan, GridView ini terdapat dalam UpdatePanel dan memiliki asp:ScriptManager di halamannya. Gunakan SqlDataSource atau proses Anda sendiri untuk mengisi GridView.

<asp:GridView ID="gvDevConfig" runat="server" DataSourceID="dsDevConfig" DataKeyNames="DevConfigurationID"
    Width="795" CssClass="gvDevCfg" BorderStyle="None" GridLines="None" AutoGenerateColumns="false"
    UseAccessibleHeader="false" OnRowDataBound="gvDevConfig_RDB" ShowFooter="true"
    OnRowCommand="AddNewRecord">
    <HeaderStyle CssClass="dgHead nodrop nodrag" />
    <RowStyle VerticalAlign="Top" />
    <AlternatingRowStyle VerticalAlign="Top" />
    <FooterStyle CssClass="NewMaterialEntry nodrop nodrag" VerticalAlign="Top" HorizontalAlign="Center" />
    <Columns>
        <asp:Your Columns Here />
    </Columns>
</asp:GridView>

Kode di belakang untuk OnRowDataBound. Perbarui DevConfigurationID ke bidang kunci Anda. Setelah grid merender datanya dan mencapai footer, JavaScript dipanggil untuk menginisialisasi fitur DnD

protected void gvDevConfig_RDB(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        if (!((e.Row.RowState & DataControlRowState.Edit) > 0))
        {
            e.Row.Attributes.Add("id", DataBinder.Eval(e.Row.DataItem, "DevConfigurationID").ToString());
            e.Row.Attributes["ondblclick"] = ClientScript.GetPostBackClientHyperlink(((LinkButton)(e.Row.FindControl("lbEdit"))), "", false);
        }
    }
    else if (e.Row.RowType == DataControlRowType.Footer)
    {
        ScriptManager.RegisterStartupScript(((GridView)sender), this.GetType(), "ResetGrid", "<script type='text/javascript'>ActivateGrid();</script>", false);
    }
}

Inilah rutinitas ajax saya yang menambah pesanan menggunakan nilai kunci ke tabel saya untuk diperbarui. Anda harus menyesuaikan ini dengan logika Anda, dan tentunya lebih banyak kesalahan dan pemeriksaan nilai pada string kueri Anda.

private void UpdateDevOrder()
{
    string keyValues = ValueOf.QueryString("DevOrder");

    try
    {
        string[] RowData = keyValues.Split(";".ToCharArray(), StringSplitOptions.RemoveEmptyEntries);
        int NewOrder = 1;

        for (int i = 0; i < RowData.Length; i++)
        {
            string DevConfigurationID = RowData[i];
            DB.Update("DevelopmentConfig", "DisplayOrder=" + NewOrder.ToString(), "DevConfigurationID=" + DevConfigurationID);
            NewOrder++;
        }
        Response.Write("Order Saved");
    }
    catch (Exception ex)
    {
        audit.Audit(ex.Message, "Exception Error", Request.Url.AbsolutePath, "Xml Command", "UpdateDevOrder()");
        Response.Write("Failed");
    }
}