Kendo UI Grid добавление новой записи без публикации данных на стороне сервера - PullRequest
Новая
       20

Kendo UI Grid добавление новой записи без публикации данных на стороне сервера

1 голос
/ 26 марта 2019

Я работаю над Kendo UI jQuery grid CRUD.Я могу получить данные отображения в сетке, но не добавляя новые записи.

Когда я нажимаю кнопку обновления, чтобы добавить запись после заполнения столбцов во всплывающем окне, на стороне сервера ничего не публикуется, поскольку каждое свойство имеет нулевое значение.На рисунке показано, что я получил при нажатии кнопки.

enter image description here

Контроллер: 

[HttpPost]
public JsonResult AddLostProperty(LostPropertyViewModel lostProperty)
{
    try
    {
        using (var dbContext = new DBEntities())
        {
            if (lostProperty != null)
            {
                var newLostProperty = new sz_LostProperty()
                {
                    Name = lostProperty.PropertyName,
                    CategoryId = dbContext.sz_PropertyCategory.Where(x => x.Name == lostProperty.CategoryName).Select(c => c.Id).FirstOrDefault(),
                    Description = lostProperty.PropertyDescription,
                    FoundDate = lostProperty.FoundDate,
                    FoundLocation = lostProperty.FoundLocation,
                    CratedDate = DateTime.UtcNow.Date,
                    CratedBy = ""
                };

                dbContext.sz_LostProperty.Add(newLostProperty);
                dbContext.SaveChanges();

                return Json(new { Success = true, Message = "The Property has been added." });
            }
            else
            {
                return Json(new { Success = false, Message = "No lost property added." });
            }
        }
    }            
    catch (Exception e)
    {
        return Json(new { Success = false, Message = "Error: " + e });
    }
}

JavaScript: 

<script>
    $(document).ready(function () {
        var serviceBaseUrl = "@Request.Url.ToString()",
            lostPropertyDataSource = new kendo.data.DataSource({
                transport: {
                    create: {
                        url: serviceBaseUrl + "/AddLostProperty",
                        type: "POST",
                        dataType: "json",
                        complete: function (e) {
                            $('#manageLostPropertiesGrid').data('kendoGrid').dataSource.read();
                        }
                    },
                    read: {
                        url: serviceBaseUrl + "/GetLostProperties",
                        type: "GET",
                        dataType: "json"
                    },
                    update: {
                        url: serviceBaseUrl + "/UpdateLostProperty",
                        type: "PUT",
                        dataType: "json"
                    },
                    destroy: {
                        url: serviceBaseUrl + "/DeleteLostProperty",
                        type: "DELETE",
                        dataType: "json"
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            return { models: kendo.stringify(options.models) };
                        }
                    }
                },
                batch: true,
                pageSize: 20,
                schema: {
                    model: {
                        id: "PropertyId",
                        fields: {
                            PropertyId: { editable: false, nullable: true, type: "number" },
                            PropertyName: { type: "string", editable: true, validation: { required: true } },
                            CategoryId: { type: "number", editable: true, validation: { required: true } },
                            PropertyDescription: { validation: { required: false } },
                            Image: { validation: { required: false } },
                            FoundDate: { type: "Date" },
                            FoundLocation: { editable: true, validation: { required: false } }
                        }
                    }
                }
            });

        $("#manageLostPropertiesGrid").kendoGrid({
            dataSource: lostPropertyDataSource,
            pageable: true,
            height: 550,
            toolbar: ["create"],
            columns: [
                { field: "PropertyName", title: "Property Name", width: "150px" },
                { field: "CategoryName", title: "Category", editor: propertyCategoryList,/* template: "#=CategoryName#", */width: "150px"},
                { field: "PropertyDescription", title: "Description", width: "200px" },
                { field: "FoundDate", title: "Found Date", template: "#= kendo.toString(kendo.parseDate(FoundDate, 'dd-MM-yyyy'), 'dd-MM-yyyy') #",  width: "130px" },
                { field: "FoundLocation", title: "Found Location", width: "120px" },
                { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
            editable: "popup"
        }).data("kendoGrid");
});

В браузере я вижу объект, отправленный на сервер ниже:

enter image description here

Что я делаю не так?

1 Ответ

0 голосов
/ 26 марта 2019

Я считаю, что в этом случае проблема в типе вашего параметра на стороне сервера.

Вы включили batch: true редактирование, которое полезно, если вы хотите внести много изменений в вашу сетку, но в конце отправить только один запрос с измененными моделями.Это очень полезно, например, в случае режима редактирования inCell , когда вы видите много запросов и, таким образом, хотите их уменьшить, но в случае всплывающего редактирования я лично не вижу никакой причиныиспользовать пакетное редактирование, но да, я знаю, что Telerik имеет это в своей демонстрации.

Итак, поскольку пакетное редактирование включено, перед выполнением запроса вызывается parameterMap .(примечание: parameterMap вызывается, только если у вас включено пакетное редактирование, в противном случае оно игнорируется).Этот параметрMap упаковывает все ваши модели в массив строк json и отправляет этот массив с запросом на сервер.В вашем случае всегда редактируется одна запись, но это не имеет значения - она ​​будет отправлена ​​в виде массива (в формате строки json).

Поскольку она отправляется в виде сериализованной строки, вы можете

1) изменить параметр вашего метода AddLostProperty на строковые модели , а затем десериализовать в массив, который позволяет работать сэто как вы привыкли к 

public ActionResult AddLostProperty(string models)
{
    ...
    var data = JsonConvert.DeserializeObject<IEnumerable<LostPropertyViewModel>>(models);
    ...
}

2) Если мы будем следовать демонстрации Telerik, вы можете использовать такую ​​реализацию 

public ActionResult AddLostProperty()
{
    var products = this.DeserializeObject<IEnumerable<LostPropertyViewModel>>("models");
    if (products != null)
    {
        //logic
    }
    return this.Jsonp(products);
}

3) И это решение я бы предпочел

Просто удалите batch: true и parameterMap (так как без пакета это бесполезно) - и он должен начать отправку одного объекта вашему методу сервера.

...