Member 14009622 Ответов: 1

Доступ к данным столбцов перетаскивание строк gridview с помощью jquery in ASP.NET


У меня есть код, который может перетаскивать строки из одной сетки в другую, и теперь я хочу получить доступ к столбцам во втором представлении сетки и сохранить их в базе данных.
как я могу получить значения столбца[i]?!

Что я уже пробовал:

Это мой код.
$(function () {
    var sourceCount = $("#gvSource").find('tr:not(tr:first-child)').length;
    var destCount = $("#gvDest").find('tr:not(tr:first-child)').length - 1;
    $(".drag_drop_grid").sortable({
        items: 'tr:not(tr:first-child)',
        cursor: 'crosshair',
        connectWith: '.drag_drop_grid',
        axis: 'y',
        dropOnEmpty: true,
        receive: function (e, ui) {
            if (e.target.id == 'gvDest') {
                destCount++;
                sourceCount--;
                $('#hfSourceRowsCount').val(sourceCount);
                $('#hfDestRowsCount').val(destCount);
            }
            else if (e.target.id == 'gvSource') {
                destCount--;
                sourceCount++;
                $('#hfSourceRowsCount').val(sourceCount);
                $('#hfDestRowsCount').val(destCount);
            }
            $(this).find("tbody").append(ui.item);
        }
    });
    $("[id*=gvDest] tr:not(tr:first-child)").remove();
});



protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[2] { new System.Data.DataColumn("Item"), new System.Data.DataColumn("Price") });
        dt.Rows.Add("Shirt", 450);
        dt.Rows.Add("Jeans", 3200);
        dt.Rows.Add("Trousers", 1900);
        dt.Rows.Add("Tie", 185);
        dt.Rows.Add("Cap", 100);
        dt.Rows.Add("Hat", 120);
        dt.Rows.Add("Scarf", 290);
        dt.Rows.Add("Belt", 150);
        gvSource.UseAccessibleHeader = true;
        gvSource.DataSource = dt;
        gvSource.DataBind();
  
        dt.Rows.Clear();
        dt.Rows.Add();
        gvDest.DataSource = dt;
        gvDest.DataBind();
    }
}
  
protected void Count(object sender, EventArgs e)
{
    int rowsgvSource = Convert.ToInt32(hfSourceRowsCount.Value);
    int rowsgvDest = Convert.ToInt32(hfDestRowsCount.Value);
    ClientScript.RegisterClientScriptBlock(this.GetType(), "", "alert('Source Count: " + rowsgvSource + "'); alert('Destination Count: " + rowsgvDest + "');", true);
}

F-ES Sitecore

Ваш серверный код не знает о каких-либо изменениях, внесенных вами в элементы с помощью javascript. Когда вы добавляете данные в другую таблицу, которую хотите сохранить в базе данных, вам нужно придумать какой-то способ сериализации этих данных и хранения их в скрытом поле, чтобы при отправке страницы данные можно было прочитать из этого скрытого поля и сохранить. Вы можете сериализовать его как json.

Это не тривиальная задача.

1 Ответов

Рейтинг:
2

Vincent Maverick Durano

Вы используете серверный элемент управления представлением данных (GridView) и заполняете их на сервере в своем коде C#, а теперь вы динамически манипулируете DOM (визуализируемым HTML) на клиенте с помощью jQuery и хотите сохранить изменения, которые не будут работать, потому что:

(1) Ваш код C# не знает, что вы изменили в клиенте (перетаскивание) - они изменяются на клиенте, и между ними есть отключенное пространство.
(2) Ваш динамический HTML будет потерян при каждой обратной передаче, так как ваш сервер не знает состояния вашего измененного HTML.


Вы не должны смешивать свою реализацию JavaScript с вашим кодом C#, стоящим за логикой. Если вы создаете свою таблицу с помощью jQuery, то используйте jQuery для создания таблицы и изменения их по мере необходимости. Вам нужно будет использовать AJAX для публикации изменений ваших данных в базе данных. Google для "jquery datatables" , чтобы увидеть пример сетки на стороне клиента.