页面在加载时不运行 jquery 脚本答案

【问题标题】：page does not run jquery script on load页面在加载时不运行 jquery 脚本
【发布时间】：2009-09-24 17:42:24
【问题描述】：

我有一个 ASP.net mvc 页面，它在加载时执行 jquery 脚本。该脚本在控制器上调用一个动作并为下拉列表添加水合物。

这适用于我的开发机器，但是当部署到网络服务器（运行 IIS 6 的 Win 2k3 机器）时，页面会加载但它不运行脚本，导致下拉列表为空。

我在脚本文件夹中有 jquery-1.3.2.js 文件，并且我已将映射添加到网络服务器上的 aspnet_isapi.dll。我还有什么遗漏的吗？

这是页面的一部分，它为在我的机器上工作但不在它部署到的网络服务器上的下拉列表提供水合，因为您可以看到脚本调用 ApplicationSettings 控制器来获取一个水合下拉列表的 JSON 对象下列表

    <asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
    <script src="~/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        // Wait for the document to be ready
        $(document).ready(function()
        {
            var selectedApp = $('#selectedApplication').val();
            var selectedMac = $('#selectedMachine').val();

            // Get the list of applications and populate the applications drop down list
            $.getJSON("/ApplicationSettings/Applications/List", function(data)
            {
                var items = "<option>----------- Select Application to Configure ----------</option>";
                $.each(data, function(i, application)
                {
                    var selected = (application.Value == selectedApp) ? 'selected' : '';
                    items += "<option value='" + application.Value + "'" + selected + ">" + application.Text + "</option>";
                });
                $("#Applications").html(items);
            });

            // Get the list of machines where the selected application is installed and populate the machines drop down list
            $("#Applications").change(function()
            {
                if ($("#Applications").attr("value") != "")
                {
                    // Enable the Machines DDL if a valid application is selected
                    $("#Machines").removeAttr("disabled");

                    // Populate the machines DDL with a list of machines where the selected application is installed
                    $.getJSON("/ApplicationSettings/Machines/List/" + $("#Applications > option:selected").attr("value"), function(data)
                    {
                        // Set the first item in the list
                        var items = "<option>---------- Select Machine -----------</option>";

                        // Retrieve the list of machines for th selected application from the database
                        $.each(data, function(i, machine)
                        {
                            var selected = (machine.Value == selectedMac) ? 'selected' : '';
                            items += "<option value='" + machine.Value + "'" + selected + ">" + machine.Text + "</option>";
                        });

                        // Add the items retrieved to the Machines DDL
                        $("#Machines").html(items);

                        if ($("#Machines").attr("value") != "")
                        {
                            $("#btnSearch").removeAttr("disabled");
                        }
                        else
                        {
                            $("#btnSearch").attr("disabled", "disabled");
                        }
                    });
                }
                else
                {
                    // If a valid application has not been selected then disable the Machines DDL
                    $("#Machines").attr("disabled", "disabled");
                    $("#btnSearch").attr("disabled", "disabled");
                }
            });

            if (selectedApp != "")
            {
                $("#Machines").removeAttr("disabled");

                $.getJSON("/ApplicationSettings/Machines/List/" + selectedApp, function(data)
                {
                    var items = "<option>---------- Select Machine -----------</option>";
                    $.each(data, function(i, machine)
                    {
                        var selected = (machine.Value == selectedMac) ? 'selected' : '';
                        items += "<option value='" + machine.Value + "'" + selected + ">" + machine.Text + "</option>";
                    });
                    $("#Machines").html(items);
                });

                if (selectedMac != "")
                {
                    $("#btnSearch").removeAttr("disabled");
                }
                else
                {
                    $("#btnSearch").attr("disabled", "disabled");
                }
            }
            else
            {
                $("#Machines").attr("disabled", "disabled");
                $("#btnSearch").attr("disabled", "disabled");
            }
        });


        function saveSelectedApplication()
        {
            $("#selectedApplication").val("");
            $("#selectedMachine").val("");
            $("#selectedApplication").val($("#Applications").attr("value"));
            if ($("#Applications").attr("value") != "")
            {
                $("#Machines").removeAttr("disabled");
                if ($("#Machines").attr("value") != "")
                {
                    $("#btnSearch").removeAttr("disabled");
                }
                else
                {
                    $("#btnSearch").attr("disabled", "disabled");
                }
            }
            else
            {
                $("#Machines").attr("disabled", "disabled");
                $("#btnSearch").attr("disabled", "disabled");
            }
        }

        function saveSelectedMachine()
        {
            $("#selectedMachine").val("");
            $("#selectedMachine").val($("#Machines").attr("value"));
            if ($("#Machines").attr("value") != "")
            {
                $("#btnSearch").removeAttr("disabled");
            }
            else
            {
                $("#btnSearch").attr("disabled", "disabled");
            }
        }
    </script>

【问题讨论】：

您的脚本是否正在运行？脚本顶部的简单警报？
您是否在 global.asax 文件中使用任何自定义路由？您在下面留下的评论与我在执行以下操作之前遇到的错误相同。我认为由于我的脚本路径问题，JS 运行得太早了。
脚本在 $.getJSON("/ApplicationSettings/Applications/List", function(data) 如果我将其更改为 $.getJSON("../ ApplicationSettings/Applications/List", function(data) it works 我想我真正需要做的是能够正确解析动作的路径。不知道如何在 jquery 中执行此操作有什么想法？
我已经修改了我的答案。请在下方查看。

标签： jquery asp.net-mvc

【解决方案1】：

我遇到了脚本路径问题。我使用这个扩展方法对其进行排序。

public static class HtmlHelperExtensions
    {
        /// <summary>
        /// Scripts the specified HTML to allow for correct pathing of the resource.
        /// </summary>
        /// <param name="html">The HTML.</param>
        /// <param name="path">The path.</param>
        /// <returns></returns>
        public static string Script(this HtmlHelper html, string path)
        {
            var filePath = VirtualPathUtility.ToAbsolute(path);
            return "<script type=\"text/javascript\" src=\"" + filePath + "\"></script>";
        }
    }

然后把这个放到母版页中：

<%@ Import Namespace="MYNAMESPACE.Helpers" %>

然后 jsut 注册所有脚本，如：

<%=Html.Script("~/Scripts/jquery-1.3.2.min.js")%>

也尝试实现以下帮助器：

public static string AbsolutePath(this HtmlHelper html, string path)
{
    return VirtualPathUtility.ToAbsolute(path);
}

然后将您的呼叫更改为

$.getJSON("<%=Html.AbsolutePath("~/ApplicationSettings/Machines/List/")%>"

当你的视图被渲染时，绝对路径应该由 MVC ViewEngine 插入。

【讨论】：

littlechris 这行得通！非常感谢你的帮助。并解释解决方案。我做了一点改动，即添加了“~/”以使 getJSON 方法工作 $.getJSON(""

【解决方案2】：

您将代码放在“$(document).ready(function() { [YOUR_CODE] });”中堵塞？如果没有，DOM 可能还没有准备好；)

【讨论】：

如您所见，我确实在 $(document).ready( .... ) 块中具有该功能。我使用 ie8 提供的脚本调试工具逐步执行脚本，它在 $(document).ready(function().. any Ideas?
这可能是 littlechris 指出的脚本路径问题。似乎 $ 没有定义（此时唯一可能未定义的东西）。顺便说一句，我强烈建议使用 firefox+firebug 进行适当的调试（IE8 是一个可悲的笑话）。

【解决方案3】：

你是如何编写动作代码的？如果您在服务器上的虚拟目录中运行，这可能很重要。如果您在本地以http://localhost:xxxx/controller/action 运行，但以http://mysever/myapp/controller/action 远程运行，那么您需要确保使用Url.Action() 来解析动作结果的真实路径。

【讨论】：