dojo/parser::parse() error TypeError: Cannot read property 'getAttribute' of undefined

Question

我将 dojo 与 .NET webforms 结合使用来创建弹出菜单，当我尝试加载页面时出现以下错误。 "dojo/parser::parse() error TypeError: Cannot read property 'getAttribute' of undefined"

如果有人可以分享有关如何将 dojo 与 webforms 结合使用的博客，那将非常有用。下面是我的代码供参考。请检查并帮助我解决此问题。

<%@ Page Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="xyz.aspx.cs" Inherits="xyz" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="../Content/claro.css" rel="stylesheet" />
<link href="../Scripts/dojo/resources/dojo.css" rel="stylesheet" />

<script type="text/javascript" src="../Scripts/jquery-1.12.4.js"></script>
<script type="text/javascript" src="../Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery-ui-1.12.1.js">
</script>
<script type="text/javascript" src="../Scripts/dojo/dojo.js" ></script>

</head>
<body class="claro" style="height:100px;width:100px;">

 <div data-dojo-type="dijit/layout/BorderContainer" style="height:100%; width:100%">

        <div data-dojo-type="dijit/layout/ContentPane"
            data-dojo-props="region: 'center'">
            <div data-dojo-type="dijit/MenuBar">
                <div data-dojo-type="dijit/PopupMenuBarItem">
                    <span>File</span>
                    <div data-dojo-type="dijit/DropDownMenu">
                        <div data-dojo-type="dijit/MenuItem">Open</div>
                        <div data-dojo-type="dijit/MenuItem">Save</div>
                        <div data-dojo-type="dijit/PopupMenuItem">
                            <span> Recent...</span>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </div>

 <script type="text/javascript">

     document.getElementById("pnlControlList").remove();
     $("#navbar").remove();

     require(["dojo/parser"], function (parser) {
         parser.parse();
     });

 </script>
</body>
</html>
</asp:Content>

Answer 1

这段代码导致问题：

<div data-dojo-type="dijit/PopupMenuItem">
   <span> Recent...</span>
</div>

dijit/PopupMenuItem 需要包含下拉元素作为其子元素。

require(["dojo/parser", 
  "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/MenuBar", 
  "dijit/PopupMenuBarItem", "dijit/DropDownMenu", "dijit/MenuItem", "dijit/PopupMenuItem"
], function (parser) {
         parser.parse();
     });

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" />

<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" style="height:100px; width:100px">

        <div data-dojo-type="dijit/layout/ContentPane"
            data-dojo-props="region: 'center'">
            <div data-dojo-type="dijit/MenuBar">
                <div data-dojo-type="dijit/PopupMenuBarItem">
                    <span>File</span>
                    <div data-dojo-type="dijit/DropDownMenu">
                        <div data-dojo-type="dijit/MenuItem">Open</div>
                        <div data-dojo-type="dijit/MenuItem">Save</div>
                        <div data-dojo-type="dijit/PopupMenuItem">
                            <span> Recent...</span>
                            <div data-dojo-type="dijit/DropDownMenu">
                              <div data-dojo-type="dijit/MenuItem">Some Item</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </div>
    </body>

注意：我还将 html 中包含的所有 dijit 模块添加到所需模块中。我不知道它在 .NET 中是否是强制性的，但有些环境在没有它的情况下会抛出错误（例如 jsfiddle）

dojo/parser::parse() error TypeError: Cannot read property 'getAttribute' of undefined

dojo/parser::parse() error TypeError: Cannot read property 'getAttribute' of undefined

javascript

dojo

webforms

dijit.layout

dijit.dialog