CellTemplate and ContentTemplate not rendering properly in Devextreme ASP.NET Core

Question

I have a datagrid, where for each item on the table I need to attach one or many documents. When you click the last column button, you should open a popup which then has the file uploader.

I'm trying to create the custom button in my Datagrid, which will open the custom popup that has the FileUploader widget, but the button is not rendering at all.

Instead of the button showing, this is the result.

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

I'm imagining the same will happen even if the popup shows. Just this text which would seem to represent the file uploader. This is my .chtml code for this part.

@(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>)
    )

I based my solution on this sample app. View

Custom popup

Answer 1

It's strange, I follow the sample codes you provide and it can work on my side. I am using Asp.net core 3.1 and 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>