Ext.NET：如何在加载器中呈现局部视图答案

【问题标题】：Ext.NET: How to render a partial view in a loaderExt.NET：如何在加载器中呈现局部视图
【发布时间】：2018-10-15 19:42:10
【问题描述】：

我正在尝试在我的网格中展开一行时加载部分视图。我的听众看起来像这样：

x.RowExpander()
    .Listeners(ls =>
    {
        ls.Expand.Handler = string.Format("Item.onListRowExpand('{0}', {1}, this);",
            Url.Action("ItemDetail", "My"), Model);
    })

这会调用一个 JavaScript 函数：

onListRowExpand: function(url, listId, expander) {
    var container = App.DashboardPanel;
    var itemId = expander.componentsCache[0].cmp.record.data.Id;
    var panelId = "Details_" + listId + "_" + itemId;

    // Check if the selected panel was selected again. If it was do nothing
    var panel = container.getComponent(panelId);
    if (!panel) {

        // Remove the opened panel so we can add a new one
        if (container.items.getCount() > 1) {
            container.remove(container.items.getAt(1).id);
        }

        // Add the new panel...
        container.add({
            id: panelId,
            closeable: true,
            loader: {
                xtype: "panel",
                url: url,
                renderer: "frame",
                params: {
                    "listId": listId,
                    "itemId": itemId                   }
            }
        });

        container.update();
    }
}

然后这个方法调用一个控制器：

public Ext.Net.MVC.PartialViewResult ItemDetail(int listId, int itemId)
{
    var result = new Ext.Net.MVC.PartialViewResult
    {
        RenderMode = RenderMode.AddTo,
        ContainerId = "MyPanel",
        WrapByScriptTag = false,
        Model = new ItemViewModel
        {
            ListId = listId,
            ItemId = itemId
        }
    };

    return result;
}

应该返回要添加到容器的Items的局部视图：

@(x.Container()
    .ID("MyPanel")
    .Layout(LayoutType.HBox)
    .Loader(x.ComponentLoader()
        .Url(Url.Action("ViewList", "My"))
        .Mode(LoadMode.Script)
        .Params(new { listId = Model.ListId })))

视图如下所示：

@model ItemViewModel
@{
    var x = Html.X();
}

@(x.Panel()
   .LayoutConfig(new HBoxLayoutConfig {Align = HBoxAlign.StretchMax})
    .Flex(1)
    .Items(
        x.Button().Text("Temp").Flex(1)))

我的问题是我似乎无法渲染部分视图。如果我将 WrapByScriptTag 设置为 true，它会以白框的形式返回 - 在这种情况下，我会收到一条错误消息，指出“未捕获的 ReferenceError：Ext 未定义”）或者如果我将 WrapByScriptTag 设置为，我会以文本形式获取组件的 JavaScript错误的。我知道我在某处遗漏了一个设置，但我不确定出了什么问题。任何帮助将不胜感激。

【问题讨论】：

标签： javascript asp.net-mvc extjs partial-views ext.net

【解决方案1】：

我的解决方案是将我的控制器更改为使用RenderMode.Config，并将加载程序上的renderer 选项从"frame" 更改为"component"。据我了解，不同之处在于 frame 选项告诉 Ext.JS 期待一个 IFrame（即完全格式的 HTML），而 component 选项用于描述 Ext 组件。那是问题的一半。另一半是我试图渲染组件，以便将其添加到另一个容器的 Items 字段中，但请求源自对 add 的调用，因此这是不必要的。相反，将组件呈现为配置更有意义，因为它是局部视图。

请注意，这适用于 Ext.NET 4.2.0，但不适用于 Ext.NET 4.1.0。在这种情况下，选择 renderer: "script" 可以解决问题。

【讨论】：