创建javascript文件
在asp mvc中,我有一个局部视图,其中包含以下内容:创建javascript文件,javascript,jquery,asp.net-mvc-3,jqgrid,Javascript,Jquery,Asp.net Mvc 3,Jqgrid,在asp mvc中,我有一个局部视图,其中包含以下内容: <table id="grid"> </table> <div id="pager1"> </div> <script language="javascript" type="text/javascript"> $('#grid').jqGrid({ url: '/Employee/JsonEmployee', datatype: 'json', mty
<table id="grid">
</table>
<div id="pager1">
</div>
<script language="javascript" type="text/javascript">
$('#grid').jqGrid({
url: '/Employee/JsonEmployee',
datatype: 'json',
mtype: 'GET',
colNames: ['NUMBER', 'NAME', 'ROLE', 'OPERATIONS'],
colModel: [
{ name: 'NUMBER', index: 'number', width: 200, sortable: false, align: 'center' },
{ name: 'NAME', index: 'name', width: 300, sortable: false, align: 'center' },
{ name: 'ROLE', index: 'role', width: 200, sortable: false, search: false, align: 'center' },
{ name: 'OPERATIONS', index: 'operation', width: 200, sortable: false, search: false, align: 'center'}],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager1',
sortname: 'number',
viewrecords: true,
sortorder: "desc",
height: "100%",
caption: "EMPLOYEES"
});
jQuery("#grid").jqGrid('navGrid', '#pager1', { del: false, add: false, edit: false }, {}, {}, {}, { width: 600 });
</script>
我在my_Layout.cshtml中调用了脚本文件:
<head>
<meta charset="utf-8" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/themes/base/css")" rel="stylesheet" type="text/css" />
<script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>
<script src="@Url.Content("~/Scripts/i18n/grid.locale-en.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Local.js")" type="text/javascript"></script>
<meta name="viewport" content="width=device-width" />
</head>
当我运行我的web应用程序时,它不再正常工作。。。jqGrid不再显示。。。问题出在哪里?您在Local.js中的代码从未执行过,您可以在dom准备就绪时使用
$(document.ready()
Local.js文件中的函数没有名称。。。您没有调用该函数,因此Local.js中的所有内容都不起作用!您可以使用:
window.onload = function() {
//your code here
}
但不建议使用。你应该给你的函数命名并调用它们好吧,我按照穆萨说的做了,但不是在_Layout.cshtml中调用它,而是在我的视图中调用它。。。我的视图是局部视图,因此我认为它会受到该(?)的影响,请尝试在页面中将其移到更高的位置。可能是您将该文件包含到HTML中太晚了。您将如何调用该匿名函数?已经尝试过了,但它不起作用。。。我创建的javascript文件正确吗?我真的不知道我的javascript文件是否正确。。。正确的格式应该是什么?我相信js会寻找与之匹配的id…如果你想知道你的javascript是否正确,你可以使用Inspect元素(Firebug)来控制你的错误。仍然不工作,我调用javascript文件的方式正确吗?如果我删除了该函数,为什么它不工作?它应该看到它与#grid的id匹配并开始执行脚本,对吗?要将javascript分离到另一个文件中,必须创建函数并调用它们。您不能像在标记中那样直接编写代码。如果你想的话,你可以用另一种方法来做,但这并不好。让我为你编辑我的答案。
$(document).ready(function () {
$('#grid').jqGrid({
url: '/Employee/JsonEmployee',
datatype: 'json',
mtype: 'GET',
colNames: ['NUMBER', 'NAME', 'ROLE', 'OPERATIONS'],
colModel: [
{ name: 'NUMBER', index: 'number', width: 200, sortable: false, align: 'center' },
{ name: 'NAME', index: 'name', width: 300, sortable: false, align: 'center' },
{ name: 'ROLE', index: 'role', width: 200, sortable: false, search: false, align: 'center' },
{ name: 'OPERATIONS', index: 'operation', width: 200, sortable: false, search: false, align: 'center'}],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager1',
sortname: 'number',
viewrecords: true,
sortorder: "desc",
height: "100%",
caption: "EMPLOYEES"
});
jQuery("#grid").jqGrid('navGrid', '#pager1', { del: false, add: false, edit: false }, {}, {}, {}, { width: 600 });
});
window.onload = function() {
//your code here
}