如何在 ASP.NET Razor 页面项目中使用 Sencha ExtWebComponents？答案

【问题标题】：How do you use Sencha ExtWebComponents in an ASP.NET Razor page project?如何在 ASP.NET Razor 页面项目中使用 Sencha ExtWebComponents？
【发布时间】：2020-01-17 14:46:02
【问题描述】：

我希望能够在 Razor 页面应用程序中使用来自 Sencha ExtWebcomponents 的按钮和其他 UI 元素。例如，我希望 Index.cshtml 看起来像

@using WebMatrix.Data;

@{
Layout = "../Shared/Index.cshtml";
}

<script>
    Ext.create('Ext.Container', {
        fullscreen: true,
        padding: 10,
        items: {
            xtype: 'button',
            text: text,
            handler: handler
        }
    });
</script>

我尝试将一些 JS 文件（见下文）捆绑在我认为很重要的模板 ExtWebcomponents 应用程序中，但我仍然收到类似 "SCRIPT5009: 'require' is not defined" 或 "SCRIPT5007: Unable to get property 'define' of undefined or null reference." 之类的错误

var scriptBundle = new ScriptBundle("~/Scripts/extwc_scripts/ExtWCBundle");
scriptBundle.Include("~/Scripts/extwc_scripts/extract-code.js");
scriptBundle.Include("~/Scripts/extwc_scripts/build/ext/ext.js");

然后我会在主布局中放置

@Scripts.Render("~/Scripts/extwc_scripts/ExtWCBundle")

您能告诉我正确的方法吗？

【问题讨论】：

标签： javascript c# asp.net extjs razor-pages

【解决方案1】：

这实际上不是 Razor Pages。这是旧的ASP.NET Web Pages 框架。如果您有选择并且正在学习，我会推荐 Razor Pages 而不是 Web Pages，现在已经有 7 年没有开发了。

无论是网页还是 Razor 页面，您遇到的问题可能都是一样的。当您在特定页面中包含脚本时，您应该在 @section 名称“脚本”中这样做。这样，它将包含在库脚本之后的布局页面中，应该在布局页面中的 RenderSection("scripts") 调用之前包含：

@using WebMatrix.Data;

@{
Layout = "../Shared/Index.cshtml";
}

@section scripts{
<script>
    Ext.create('Ext.Container', {
        fullscreen: true,
        padding: 10,
        items: {
            xtype: 'button',
            text: text,
            handler: handler
        }
    });
</script>
}

【讨论】：