Getting 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'jqGrid'

Getting 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'jqGrid'

首先，是的，我知道在 Whosebug 上有几乎相同的问题，但我仍然无法让它工作。即使使用我在那里找到的提供的解决方案：
Getting 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'jqGrid'

问题： 当我尝试 运行 程序时出现此错误：

Unhandled exception at line 56, column 13 in "Link"

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'jqGrid'

index.cshtml:

<!DOCTYPE html>

<html>

<head>
    <title>FlexDatenportal</title>
    <link rel="icon" href=".\icon.png">
    <link href="~/styles/styles`enter code here`heet1.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>

    <script type=text/javascript>
        $

(function () {
                "use strict";
                $("#grid").jqGrid({
                    colModel: [
                    { key: true, name: 'ID', index: 'ID'},
                    { name: "Vorname" },
                    { name: "Nachname" }
                ],
                data: [
                    { Vorname: "Angelk", Nachname: "Merkel" },
                    { Vorname: "Vladimir", Nachname: "Putin" },
                    { Vorname: "David", Nachname: "Cameron" },
                    { Vorname: "Barack", Nachname: "Obama" },
                    { Vorname: "François", Nachname: "Hollande" }
                ]
                });
    
        });
    </script>
</head>

<body>
    <div class="header">
        <a href=".\index.html"><img class="flexLogo" src="~/styles/Bilder/flexLogo.png" alt="Logo"></a>
        <h1 class="Titel">Datenportal</h1>
        <p class="UsernameTag">username</p>
        <img class="profileimg" src="~/styles/Bilder/profileimage.jpg" alt="profileimg">
    </div>

    <div class="section">
        <div class="Daten">
            <p class="DatenHeadline">Daten</p>

            <table id="grid"></table>         
            
            <div class="inputAButton row">
                <div class="col-md-3">
                    <input class="form-control" type="text" value="" id="in1" maxlength="20">
                </div>

                <div class="col-md-3">
                    <input class="form-control" type="text" value="" id="in2" maxlength="20">
                </div>

                <div class="col-md-3">
                    <input class="form-control" type="text" value="" id="in3" maxlength="20">
                </div>

                <div class="col-md-3">
                    <div class="input-group">
                        <input class="form-control" type="text" value="" id="in4" maxlength="20">
                        <span class="input-group-btn">
                            <button type="button" id="AddButton" class="btn btn-primary">+</button>
                        </span>
                    </div>

                </div>
            </div>
            <p class="Signed">by Patrick Korb</p>
        </div>
    </div>
</body>
</html>

HomeController.cs:

using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using MyFirstWebApp.Models;
using System.Web.Mvc;
using System.Data;
using Newtonsoft.Json;
using System.Text;
using System.Data.Entity;
using System.Web.UI;
using System.Diagnostics;
using System.Threading;
using System.IO;
using System.Reflection;
using System.Net;
using System.ComponentModel;
using System.Web.Script.Serialization;

namespace MyFirstWebApp.Controllers
{
    public class HomeController : Controller
    {
        /***Connection***/
        SqlConnection sqlCon = new SqlConnection(System.Web.Configuration.WebConfigurationManager.AppSettings.Get("myConnectionString"));
        PatrickTestDBEntities db = new PatrickTestDBEntities();

        public ActionResult Index()
        {

            return View();
        }
        
        public JsonResult GetMitarbeiter()
        {
            var testQuery = (from a in db.tbl_PatricksMitarbeiter
                             select new
                             {
                                 a.ID,
                                 a.Vorname,
                                 a.Nachname
                             }).Distinct();

            return Json(testQuery);
        }
        
        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

我尝试了 Oleg 的免费 jqGrid.I 几乎从 https://free-jqgrid.github.io/getting-started/index.html 复制了 Oleg 的 Javascript 并更改了控制器中的 GetMitarbeiter 方法。

如果您需要更多详细信息，请告诉我。 （我的第一个问题）

请写 always 您使用的 jqGrid 的 version 以及来自 jqGrid 的 fork （free jqGrid, commercial Guriddo jqGrid JS 或版本 <=4.7 的旧 jqGrid）。

以任何方式 JavaScript 文件列表和您使用的文件顺序

<script src="~/Scripts/JQGrid/jquery-ui.min.js"></script>
<script src="~/Scripts/JQGrid/grid.locale-en.js"></script>   
<script src="~/Scripts/JQGrid/jquery-1.11.0.min.js"></script>
<script src="~/Scripts/JQGrid/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/JQGrid/jquery.jqGrid.js"></script>

错了。

您应该首先包含 jQuery（例如，jquery-1.11.0.min.js），然后是所有 jQuery 插件：jQuery UI（jquery-ui.min.js ) 和 jqGrid。需要在 JS 文件中额外包含 jQuery UI CSS。

如果您使用旧版本的 jqGrid（或商业 Guriddo jqGrid JS），那么您应该在 jquery.jqGrid.min.js 之前包含 grid.locale-en.js。如果您使用免费的 jqGrid 分支，那么您不需要包含 grid.locale-en.js，因为默认情况下 jquery.jqGrid.min.js 中包含英语美国语言环境。

同时包含 最小化 (jquery.jqGrid.min.js) 和非最小化 (jquery.jqGrid.js 或 jquery.jqgrid.src.js) JavaScript 是错误的jqGrid的代码。你应该使用只有一个版本的jqGrid。

如果您在页面上使用 Bootstrap CSS，那么您也应该考虑使用带有 Bootstrap 选项的 jqGrid。参见 here for example. You can load all free jqGrid files from CDN (see the wiki article) or alternatively to use free jqGrid from NuGet package free-jqGrid or npm package (see here)。

已更新 您项目中的错误与 jqGrid 无关。您在 Index.cshtml 中包含了以 <!DOCTYPE html> 开头的页面的整个 HTML 代码。 ASP.NET MVC 默认将 "~/Views/Shared/_Layout.cshtml" 与 Index.cshtml 的内容结合在一起，你会得到完全错误的 HTML 页面，其中 Index.cshtml 的内容将放在 <body> 共 _Layout.cshtml。

您可以通过添加

来解决问题 
@{
    Layout = null;
}

在 Index.cshtml 的开头（在行 <!DOCTYPE html> 之前）。

如果你使用Guriddo jqGrid Please check the detailed installation documentation here