创建一个 javascript 文件答案

【问题标题】：creating a javascript file创建一个 javascript 文件
【发布时间】：2012-05-31 02:46:25
【问题描述】：

在 asp-mvc 中，我有一个包含以下内容的部分视图：

<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>

它工作正常，但后来我决定删除视图底部的脚本并将其放入 Scripts 文件夹中的 javascript(.js) 文件中：Local.js

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 });

  };

我在我的 _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>

当我运行我的网络应用程序时，它不再运行良好... jqGrid 不再显示...问题可能出在哪里？

【问题讨论】：

尝试将它移到页面的更高位置。可能是您将该文件包含到 HTML 中为时已晚。
你打算如何调用那个匿名函数？
已经尝试过了，但是没有用...我创建的 javascript 文件正确吗？
我真的不知道我的 javascript 文件是否正确完成......正确的格式应该是什么？我相信 js 会寻找与其匹配的 id...
如果您想知道您的 javascript 是否正确，您可以使用 Inspect Element (Firebug) 来解决您的错误。

标签： javascript jquery asp.net-mvc-3 jqgrid

【解决方案1】：

你在 Local.js 中的代码永远不会被执行，你可以在 dom 准备好时调用它，$(document).ready()

$(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 });
});

【讨论】：

仍然无法正常工作，我调用 javascript 文件的方式是否正确？

【解决方案2】：

好的，我按照 Musa 所说的做了，但我没有在 _Layout.cshtml 中调用它，而是在我的视图中调用它...我的视图是一个局部视图，所以我猜它会受到那个影响（？）

【讨论】：

【解决方案3】：

Local.js 文件中的函数没有名称...您没有调用该函数，因此 Local.js 中的所有内容都不起作用！您可以使用：

window.onload = function() {
  //your code here
}

但不建议使用。你应该给你的函数命名并调用它们

【讨论】：

如果我删除该功能，为什么它不起作用？它应该看到它与#grid的id匹配并开始执行脚本，对吧？
要将javascript分离到另一个文件中，您必须创建函数并调用它们。您不能像在