javascript - 如何在 jQuery 的部分 View 中将 Kendo Grid 行数据传递到 Kendo 弹出窗口？

Question

我正在尝试将 Kendo 网格行数据传递到通过 Kendo 弹出窗口呈现的部分 View 。

在局部 View 中，可以为行记录上传图像文件。这部分是异步的，并且与行编辑分开。我已经可以上传和保存图像，但我需要获取行的 ID，以便我可以保存该记录的图像文件。

此外，我需要将图像数据传递到局部 View ，并在有图像数据后显示它。

由于数据已经在 Kendo Grid dataSource 中，因此如何在客户端将数据从 Kendo Grid 完美地传递到部分 View (Kendo 弹出窗口) ？

JS:

$("#manageLostPropertiesGrid").kendoGrid({
    dataSource: lostPropertyDataSource,
    pageable: true,
    height: 550,
    toolbar: ["create"],
    columns: [
        {
            command: { text: "View", click: showPhoto },
            title: "Photo",
            filterable: false, sortable: false, width: 100,
        },
        { field: "PropertyName", title: "Property Name", width: "150px" },
        { field: "CategoryName", title: "Category", editor: propertyCategoryList, width: "150px" },
        { field: "PropertyDescription", title: "Description", width: "200px" },
        {
            field: "FoundDate", type: "date", title: "Found Date", format: "dd/MM/yyyy",
            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: " ", width: "250px" }],
    editable: "popup"
}).data("kendoGrid");

// Pop-up window for photo view/upload
    wnd = $("#photo-window")
        .kendoWindow({
            content: {
                url: "ImageUploader",
            },
            title: "Image Uploader",
            modal: true,
            visible: false,
            resizable: true,
            width: 750,
            height: 500
        }).data("kendoWindow");

    photoTemplate = kendo.template($("#template").html());

    function showPhoto(e) {
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        wnd.center().open();
    }

部分 View :

<div id="example" class="k-content">
<div class="demo-section k-content wide">
    <div class="wrapper">
        <div id="products"></div>
        <div class="dropZoneElement">
            <div class="textWrapper">
                <p>Add Image</p>
                <p class="dropImageHereText">Drop image here to upload</p>
            </div>
        </div>
    </div>
</div>

<input name="files" id="files" type="file" />

<script type="text/x-kendo-template" id="template">
    <div class="product"></div>
</script>

<script>
    $(function () {
        var template = kendo.template($("#template").html());
        var initialFiles = [];

        $("#products").html(kendo.render(template, initialFiles));

        $("#files").kendoUpload({
            async: {
                saveUrl: "save?id=" + "1",//Need the row Id here
                removeUrl: "remove",
                autoUpload: true
            },
            multiple: false,
            validation: {
                allowedExtensions: [".jpg", ".jpeg", ".png", ".bmp", ".gif"]
            },
            success: onSuccess,
            dropZone: ".dropZoneElement"
        });

        function onSuccess(e) {
            if (e.operation == "upload") {
                var file = e.files[0].rawFile;
                if (file) {
                    var reader = new FileReader();

                    reader.onloadend = function () {
                        $("#products").empty().append("<div class='product'><img src=" + this.result + " /></div>");
                    };
                    reader.readAsDataURL(file);
                }
            }
            if (e.operation == "remove") {
                $("#products").empty();
            }
        }
    });
</script>

Answer 1

我已经找到了自己问题的解决方案。

我确实进行了服务器端调用，将行 Id 传递给部分 View 。

下面的工作解决方案代码:

Controller :

public PartialViewResult ImageUploader(int? propertyId)
{
    var viewModel = new LostPropertyViewModel();

    using (var dbContext = new PortalEntities())
    {
        if (propertyId != null)
        {
            viewModel = dbContext.sz_LostProperty.Where(x => x.Id == propertyId).Select(x => new LostPropertyViewModel
            {
                PropertyId = x.Id,
                Image = x.Image
            }).FirstOrDefault();
        }
        return PartialView("_ImageUploader", viewModel);
    }
}

查看:

// Click function for Kendo grid button
function showPhoto(e) {
    e.preventDefault();

    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var propertyId = dataItem.PropertyId;
    console.log(propertyId);

    // Pop-up window for photo view/upload
    var wnd = $("#photo-window")
        .kendoWindow({
            content: {
                url: "ImageUploader",
                data: { propertyId: propertyId }
            },
            title: "Image Uploader",
            modal: true,
            visible: false,
            resizable: true,
            width: 750,
            height: 500
        }).data("kendoWindow");
    wnd.center().open();
}

部分 View :

@using WebApp.ViewModels
@model LostPropertyViewModel
@{ 
    var propertyId = Model.PropertyId;
}
<div id="example" class="k-content">

    <div class="demo-section k-content wide">
        <div class="wrapper">
            <div id="products"></div>
            <div class="dropZoneElement">
                <div class="textWrapper">
                    <p>Add Image</p>
                    <p class="dropImageHereText">Drop image here to upload</p>
                </div>
            </div>
        </div>
    </div>

    <input name="files" id="files" type="file" />

    <script type="text/x-kendo-template" id="template">
        <div class="product">
            <img src="../content/web/foods/#= name #" alt="#: name # image" />
        </div>
    </script>

    <script>
        $(function () {
            var template = kendo.template($("#template").html());
            var initialFiles = [];

            $("#products").html(kendo.render(template, initialFiles));

            $("#files").kendoUpload({
                async: {
                    saveUrl: "save?id=" + @propertyId,
                    removeUrl: "remove",
                    autoUpload: true
                },
                multiple: false,
                validation: {
                    allowedExtensions: [".jpg", ".jpeg", ".png", ".bmp", ".gif"]
                },
                success: onSuccess,
                dropZone: ".dropZoneElement"
            });

            function onSuccess(e) {
                if (e.operation == "upload") {
                    var file = e.files[0].rawFile;

                    if (file) {
                        var reader = new FileReader();

                        reader.onloadend = function () {
                            $("#products").empty().append("<div class='product'><img src=" + this.result + " /></div>");
                        };

                        reader.readAsDataURL(file);
                    }
                }
                if (e.operation == "remove") {
                    $("#products").empty();
                }
            }
        });

    </script>
</div>