ASP.NET MVC 5项目DevExtreme DataGrid运行时出现橙色报错条问题咨询

问题根源 #

你当前的报错是_Layout.cshtml的资源加载逻辑存在两处严重错误导致的：

• 重复加载jQuery：head和body底部各调用了一次@Scripts.Render("~/bundles/jquery")，DevExtreme脚本在head加载后绑定到了首次加载的jQuery实例上，body底部二次加载的jQuery会覆盖全局$对象，导致DevExtreme的数据源绑定方法丢失，触发E4000报错。
• 重复定义scripts渲染节、DevExtreme脚本加载顺序错误：DevExtreme的脚本依赖jQuery、Bootstrap，你当前把DevExtreme脚本放在head加载，早于body底部的Bootstrap，同时两次声明RenderSection("scripts")会导致视图层的脚本重复执行。

修复后的_Layout.cshtml代码 #

替换你的_Layout.cshtml全部内容为以下代码即可：

<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

@* 仅保留DevExtreme样式在head加载 *@
@Styles.Render("~/Content/DevExtremeBundle")
</head>
<body>

<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>

@* 按依赖顺序加载脚本：jQuery → Bootstrap → DevExtreme脚本 → 自定义scripts节 *@
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/Scripts/DevExtremeBundle")
@RenderSection("scripts", required: false)
</body>
</html>

可选额外排查项 #

如果调整加载顺序后仍存在报错，可依次排查以下内容：

• 检查WebApi配置是否开启了路由映射，确认CountryWebController的Get接口可以正常接收GET请求并返回符合DevExtreme格式的响应数据
• 确认DevExtremeBundle的注册逻辑已在Global.asax的Application_Start方法中被调用，DevExtreme相关的js、css资源可以正常加载，没有404报错

内容的提问来源于stack exchange，提问作者Musau