Как отправить локальные данные jqgrid и элементы ввода формы

Question

Страница содержит одну форму с элементами ввода и данными jqgrid.Данные jqGrid извлекаются в json с использованием параметра loadonce: true.Данные редактируются локально.

Как отправить все эти данные, если нажата кнопка отправки?Имеет jqGrid любой метод, который может помочь представить все данные из всех строк. jqGrid - Как редактировать и сохранять несколько строк одновременно? упоминает, что следует использовать плагин формы jQuery ajax, но я не нашел ни одного примера.

jqGrid, вероятно, содержит извлеченную таблицу json в элементе.В этом случае плагин формы не способен читать эти данные.

Как получить и отправить все данные, полученные с использованием loadonce: true и отредактировано?

Update1

На основании ответа Олега я попытался:

function SaveDocument()  {
  var gridData = $("#grid").jqGrid('getGridParam','data');
  var postData = JSON.stringify(gridData);    
  $('#_detail').val( postData );
  var res = $("#Form").serializeArray();
  $.ajax({ type: "POST",        
  url: 'Edit'
  data : res
  });
   }
}

Страница aspx:

<form id="Form" class='form-fields'>
.... other form fields
<input name='_detail' id='_detail' type='hidden' />
</form>
<div id="grid1container" style="width: 100%">
   <table id="grid">
   </table>
</div>

В методе редактирования контроллера ASP.NET MVC2 я попытался проанализировать результат, используя

public JsonResult Edit(string _detail) {

var order = new Order();
UpdateModel(order, new HtmlDecodeValueProviderFromLocalizedData(ControllerContext));

var serializer = new JavaScriptSerializer();
var details = serializer.Deserialize<List<OrderDetails>>>(_detail);
}

Исключение происходит при вызове Deserialize ().Свойства десятичного числа и даты передаются в локализованном формате, но похоже, что Deserialize () не анализирует локализованные строки, и нет способа заставить его использовать конвертер, такой как HtmlDecodeValueProviderFromLocalizedData, переданный в UpdateModel.

Как исправить?Разумно ли / как преобразовать параметр _detail в коллекцию NameValue, а затем использовать UpdateModel для обновления сведений, использования какой-либо другой десериализации или другой идеи?

Обновление 2.

Десятичные и дата Значения CurrentUICulture присутствуютв форме и в данных jqGrid.Предоставленный образец обрабатывает их в форме ОК, но не для данных jqGrid.Этот контроллер должен обрабатывать различные типы объектов, поля формы и столбцы jqgrid могут быть определены во время выполнения.Таким образом, использование жестко закодированных имен невозможно.Основываясь на ответе Олега, я попытался переопределить десятичное преобразование, создав конвертер

public class LocalizedTypeConverter : JavaScriptConverter
{
    public override IEnumerable<Type> SupportedTypes
    {
        get
        {
            return new ReadOnlyCollection<Type>(new Type[] { typeof(decimal) });
        }
    }

    public override object Deserialize(IDictionary<string, object> dictionary, Type type,
            JavaScriptSerializer serializer)
    {
        if (dictionary == null)
            throw new ArgumentNullException("dictionary");
        if (type == typeof(decimal))
            return decimal.Parse(dictionary["resources"].ToString(), CultureInfo.CurrentCulture);
        return null;

    }

    public override IDictionary<string, object> Serialize(object obj, JavaScriptSerializer serializer)
    {
        throw new InvalidOperationException("We only Deserialize");
    }
}

, но преобразование все еще вызывает исключение

0,0000, недопустимое значение для десятичного числа.Похоже, что десятичный преобразователь не может быть переопределен.Как исправить?

Answer 1

Прежде всего вы можете получить все локальные данные из jqGrid в отношении

var localGridData = $("#list").jqGrid('getGridParam','data');

Если вам потребуется отправить только подмножество строк сетки, например, только выбранные строки, вам может понадобитьсядля получения _index:

var idsToDataIndex = $("#list").jqGrid('getGridParam','_index');

Для отправки данных на сервер вы можете использовать следующую функцию, например:

var sendData = function(data) {
    var dataToSend = JSON.stringify(data);
    alert("The following data are sending to the server:\n" + dataToSend);
    $.ajax({
        type: "POST",
        url: "yourServerUrl",
        dataType:"json",
        data: dataToSend,
        contentType: "application/json; charset=utf-8",
        success: function(response, textStatus, jqXHR) {
            // display an success message if needed
            alert("success");
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // display an error message in any way
            alert("error");
        }
    });
};

В демоверсии вы будетенайдите немного более сложный пример с двумя кнопками: «Отправить все сетки», «Отправить выбранные строки».Соответствующий код находится ниже

$("#sendAll").click(function(){
    var localGridData = grid.jqGrid('getGridParam','data');
    sendData(localGridData);
});
$("#sendSelected").click(function(){
    var localGridData = grid.jqGrid('getGridParam','data'),
        idsToDataIndex = grid.jqGrid('getGridParam','_index'),
        selRows = grid.jqGrid('getGridParam','selarrrow'),
        dataToSend = [], i, l=selRows.length;
    for (i=0; i<l; i++) {
        dataToSend.push(localGridData[idsToDataIndex[selRows[i]]]);
    }
    sendData(dataToSend);
});

, где

var grid = $("#list"),
    decodeErrorMessage = function(jqXHR, textStatus, errorThrown) {
        var html, errorInfo, i, errorText = textStatus + '\n<br />' + errorThrown;
        if (jqXHR.responseText.charAt(0) === '[') {
            try {
                errorInfo = $.parseJSON(jqXHR.responseText);
                errorText = "";
                for (i=0; i<errorInfo.length; i++) {
                   if (errorText.length !== 0) {
                       errorText += "<hr/>";
                   }
                   errorText += errorInfo[i].Source + ": " + errorInfo[i].Message;
                }
            }
            catch (e) { }
        } else {
            html = /<body.*?>([\s\S]*)<\/body>/i.exec(jqXHR.responseText);
            if (html !== null && html.length > 1) {
                errorText = html[1];
            }
        }
        return errorText;
    },
    sendData = function(data) {
        var dataToSend = JSON.stringify(data);
        alert("The following data are sending to the server:\n"+dataToSend);
        $.ajax({
            type: "POST",
            url: "yourServerUrl",
            dataType:"json",
            data: dataToSend,
            contentType: "application/json; charset=utf-8",
            success: function(response, textStatus, jqXHR) {
                // remove error div if exist
                $('#' + grid[0].id + '_err').remove();
                alert("success");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // remove error div if exist
                $('#' + grid[0].id + '_err').remove();
                // insert div with the error description before the grid
                grid.closest('div.ui-jqgrid').before(
                    '<div id="' + grid[0].id + '_err" style="max-width:' + grid[0].style.width +
                    ';"><div class="ui-state-error ui-corner-all" style="padding:0.7em;float:left;"><span class="ui-icon ui-icon-alert" ' +
                    'style="float:left; margin-right: .3em;"></span><span style="clear:left">' +
                    decodeErrorMessage(jqXHR, textStatus, errorThrown) + '</span></div><div style="clear:left"/></div>');
            }
        });
    };

Я думаю, что более сложной и более сложной задачей вы станете на сервере.В случае ошибок параллелизма, но я писал о проблемах раньше.Именно из-за проблем я лично никогда бы не реализовал сохранение нескольких строк на сервере.

ОБНОВЛЕНО : Чтобы получить данные из формы, вы можете использовать jQuery.serialize ,Вы должны использовать атрибут name для всех полей в форме, которые вы хотите сериализовать.Все данные, которые вам нужно отправить:

var allData = {
    localGridData: grid.jqGrid('getGridParam','data'),
    formData: $("#formid").serialize()
};

Вы можете отправить данные точно так, как я описал ранее: sendData(allData).