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

Question

我希望能够在剃刀页面应用程序中使用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")

你能建议我正确的方法吗？

Answer 1

那不是真正的Razor Pages。它是旧的ASP.NET Web Pages框架。如果你有选择并且正在学习，我会推荐Razor Pages而不是网页，它现在已经有7年没有开发了。

无论是Web页面还是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>
}