Question

我正在尝试Kendo UI网格实现，其中包含一个image列，如下所示：

$("#grid").kendoGrid({
    dataSource: dataSource,
    sortable: true,
    pageable: true,                
    pageSize: 10,
    height: 400,
    toolbar: [{ name: "create"}],
    columns: [{
        field: "ImageData", title: "Select Photo", width: 50, 
        template: '<img id="img_${PersonnelId}" src="/Admin/GetPersonnelImage?personnelId=${PersonnelId}" />' },
                    { field: "Name", title: "Name", width: 80 },
                    { field: "SurName", title: "Surname", width: 80 },
                    { field: "isActive", title: "Active", width: 40 },
                    { command: ["edit", "destroy", { name: "Photo", text: "Photo", click: Photo }], title: " ", width: "130px"}],
        editable: "inline",
        remove: function (e) {
             // remove  
        },            
        save: function (e) {
                //save
            }
        });
    }
});

图像列模板向GET操作方法发出ASP.MVC个请求，以便从数据库访问其相关图像。

public FileContentResult GetPersonnelImage(int personnelId)
{
    Personnel p = personnelRepository.GetById(personnelId);
    if (p != null)
    {
        return File(p.ImageData, p.ImageMimeType);
    }

    return null;            
}

如上所示，有一个名为Photo的自定义命令按钮，用户可以在模态窗口中选择图像文件。当用户单击模态窗口上的submitPhoto按钮时，运行jQuery函数：

var wnd, uploadTemplate, dataItem;

function Photo(e) {
    e.preventDefault();
    dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    wnd.content(uploadTemplate(dataItem));

    $("#imgfile").change(function (evt) {
        var f = evt.target.files[0];
        var reader = new FileReader();

        if (!f.type.match('image.*')) {
            alert("Selected file does not appear an image file! Please check your selection");
            return;
        }

        reader.onload = function (e) { $('#preview').attr('src', e.target.result); };
        reader.readAsDataURL(f);
    });

    // Updates the src attribute of the grid image column
    $("#submitPhoto").click(function (e) {
        var pid = dataItem.PersonnelId;
        var imgPtr = "#img_" + String(pid);
        var v = $('#preview').attr('src');
        $(imgPtr).attr('src', v);
    });

        wnd.center().open();
    }

网格列的src属性在上述函数的末尾更新。

到目前为止一切正常。但是，当模态窗口关闭时，网格会立即向操作方法发出GET个请求，从而导致丢失新的图像选择。

我想在用户编辑数据时阻止GET个请求。我不知道我在这里做错了什么。任何建议都会非常完美。

提前致谢

Kendo UI网格阻止更新图像列

0 个答案: