asp.net-core - CellTemplate 和 ContentTemplate 在 Devextreme ASP.NET Core 中无法正确呈现

Question

我有一个数据网格，我需要为表格上的每个项目附加一个或多个文档。当您单击最后一列按钮时，您应该打开一个弹出窗口，其中包含文件上传器。

我正在尝试在我的 Datagrid 中创建自定义按钮，这将打开具有 FileUploader 小部件的自定义弹出窗口，但该按钮根本不呈现。

这是结果，而不是显示按钮。

\[%!function(){%\]\ [%DevExpress.aspnet.createComponent("dxButton",{"text":"Attach","onClick":function (e) { attachButtonClick(data) }},arguments\[0\])%\]\[%}("dx-" + new DevExpress.data.Guid())%\]

我想即使弹出窗口显示也会发生同样的情况。只是这个似乎代表文件上传者的文本。这是我这部分的 .chtml 代码。

@(Html.DevExtreme().DataGrid<myModel>()
        .ID("dataGrid")
        .DataSource(ds => ds.Mvc().Controller("DataGridMaterials")
                                    .LoadAction("Get")
                                    .InsertAction("Insert")
                                    .UpdateAction("Update")
                                    .DeleteAction("Delete")
                                    .Key("ID")
        )
        .Columns(columns => {
            columns.AddFor(m => m.Equipment);
            columns.AddFor(m => m.Client);
            columns.AddFor(m => m.Number);
            columns.AddFor(m => m.Address);
            columns.AddFor(m => m.Phone);
            columns.Add().Width(160).Alignment(HorizontalAlignment.Center).CellTemplate(@<text>
                @Html.DevExtreme().Button().Text("Attach").OnClick("function (e) { attachButtonClick(data) }")
            </text>);
        })

        .OnRowDblClick(@<text>
           function MyHandler(selectedItem) {
                var dataGrid = $("#dataGrid").dxDataGrid("instance");
                var selectedRowsData = dataGrid.getSelectedRowsData();
                var allData = selectedRowsData[0];
                var id = allData.ID;
                console.log(id);

                $('#customPopup').dxPopup('instance').option('visible', true);
           }
        </text>)

        .RowAlternationEnabled(true)
        .Editing(editing => {
            editing.Mode(GridEditMode.Row);
            editing.AllowUpdating(true);
            editing.AllowDeleting(true);
            editing.AllowAdding(true);
        })
        .Selection(s => s.Mode(SelectionMode.Single))
        .RemoteOperations(true)
    )

  @(Html.DevExtreme().Popup().ID("customPopup").Width(660).Height(540).Title("Attachments").Visible(false)
            .ContentTemplate(@<text>

                    @(Html.DevExtreme().FileUploader()
                        .ID("file-uploader")
                        .Name("myFile")
                        .Multiple(true)
                        .Accept("*")
                        .UploadMode(FileUploadMode.UseButtons)
                        .UploadUrl(Url.Action("Upload", "FileUploader"))
                        .OnValueChanged("fileUploader_valueChanged")

                    )
                </text>)
    )

我的解决方案基于此示例应用程序。 看法

自定义弹出窗口

标签： asp.net-coredevexpressdevextreme

Answer 1

很奇怪，我遵循您提供的示例代码，它可以在我这边工作。我正在使用Asp.net core 3.1和Devextreme 20.1：

@model Order

@{
    ViewBag.Title = "Index";
}

<h2>Home</h2>

@(Html.DevExtreme().DataGrid<Order>()
        .ID("gridContainer")
        .ShowBorders(true)
        .DataSource(d => d.Mvc().Controller("Orders").LoadAction("Get").Key("OrderID").UpdateAction("Put"))
        .Columns(columns => {
            columns.AddFor(m => m.CustomerName);
            columns.AddFor(m => m.OrderDate);
            columns.AddFor(m => m.ShipCity);
            columns.Add().Width(160).Alignment(HorizontalAlignment.Center).CellTemplate(@<text>
                @Html.DevExtreme().Button().Text("Attach").OnClick("function (e) { attachButtonClick() }")
            </text>);
        })

        .Selection(s => s.Mode(SelectionMode.Single))
        .RemoteOperations(true)
)

@(Html.DevExtreme().Popup().ID("customPopup").Width(660).Height(540).Title("Attachments").Visible(false)
            .ContentTemplate(@<text>

            @(Html.DevExtreme().FileUploader()
                .ID("file-uploader")
                .Name("myFile")
                .Multiple(true)
                .Accept("*")
                .UploadMode(FileUploadMode.UseButtons)
                .UploadUrl(Url.Action("Upload", "FileUploader"))
            )
        </text>)
)

<script>
    function attachButtonClick() {
        $('#customPopup').dxPopup('instance').option('visible', true);
    
    }
</script>