.net core 2 中未加载 jQuery Grid css

Question

我的 JqGrid Css 样式没有正确加载。我正在使用 .net core 2.0 和 jqgrid 4.4.3。你能帮我看看我做错了什么吗？我尝试将手动 css 类添加到表中。但这仍然无济于事。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript">
    jQuery.browser = {};
    (function () {
        jQuery.browser.msie = false;
        jQuery.browser.version = 0;
        if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
            jQuery.browser.msie = true;
            jQuery.browser.version = RegExp.$1;
        }
    })();
</script>
<script src="~/js/grid.locale-en.js"></script>
<script src="~/js/jquery.jqGrid.min.js"></script>
<link href="~/css/ui.jqgrid.css" rel="stylesheet" />


<table id="list-student"></table>
<div id="pager"></div>
<script>
    $('#list-student').jqGrid({
        url: '/Home/GetProductsList',
        datatype: 'json',
        colNames: ['proID', 'ID', 'name', 'SKU', 'Price', 'vendorname', 'Active'],
        colModel: [
            { name: 'proID', index: 'proID', editable: false, width: 100, align: 'center' },
            { name: 'ID', index: 'ID', editable: true, width: 240 },
            { name: 'name', index: 'name', editable: true, width: 240 },
            { name: 'SKU', index: 'SKU', editable: true, width: 240 },
            { name: 'Price', index: 'Price', editable: true, width: 240 },
            { name: 'vendorname', index: 'vendorname', editable: true, width: 240 },
            { name: 'Active', index: 'Active', editable: true, width: 240 }

        ],

        rowNum: 1,
        rowList: [1, 2, 3],
        pager: '#pager',
        sortname: 'id',
        viewrecords: true,
        height: 'auto',
        width: 'auto',
        sortorder: 'asc',
        loadonce: true,
        caption: 'List Students',
        jsonReader:
            {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems: false,
                Id: "0"
            },
        autowidth: true,
    }).navGrid('#pager',
        {
            edit: true,
            add: true,
            del: true,
            search: true,
            refresh: true,
            closeAfterSearch: true
        });

</script>

这是我的 cshtml 页面，我的 Controller 是这样的。

[HttpGet]
public virtual ActionResult GetProductsList()
{
    List<ResponseMessage> respmsg = new List<ResponseMessage>();
    respmsg.Add(new ResponseMessage { proID = 1, ID = 5, name = "Product1", SKU = "sku1", Price = 100, vendorname = "Nike", Active = true });
    respmsg.Add(new ResponseMessage { proID = 2, ID = 6, name = "Product2", SKU = "sku2", Price = 100, vendorname = "Addidas", Active = false });

    var result = new
    {
        total = respmsg.Count,
        page = 1,
        records = 2,
        rows = respmsg
    };
    //return Content(Newtonsoft.Json.JsonConvert.SerializeObject(result), "application/json");
    return Json(result);
}

这是我的页面的样子

我的所有功能(如编辑保存创建)都运行良好。除了 css 样式。

Answer 1

你错过了加载 jQuery UI CSS 文件 jquery-ui.css，像这样

...
<link rel="stylesheet" type="text/css" media="screen" href="~/css/jquery-ui.css" />

确保指向正确的 jquery-ui css