Jquery/ASP.NET 项目无法正常工作，几乎相同的 jsfiddle 按预期工作答案

【问题标题】：Jquery/ASP.NET project doesn't work properly, virtually identical jsfiddle works as expectedJquery/ASP.NET 项目无法正常工作，几乎相同的 jsfiddle 按预期工作
【发布时间】：2023-03-11 22:41:01
【问题描述】：

我有一个没有按预期工作的 JQuery/ASP.NET 项目，但 JSFiddle 中几乎相同的代码按预期工作。我只是将一些文本作为变量传递到 alert() 中，当您单击表单上的“Click Me”时应该会弹出它。最终我将使用 AJAX 调用将其传递回后面的代码，但首先要做的是，所以忽略 AJAX 调用和函数，我还没有使用它们。

这是 JS（在下面的 ASP 中引用为“OnlineRMA.js”：

$("#button").on('click', function () {
var test = $("#SBE_Services").val();
alert(test);
//asyncServerCall(test);
}); 

function asyncServerCall(userid) {
$.ajax
(
    {
        url: 'WebForm1.aspx/GetData',
        type: "POST",
        data: "{'userid':" + userid + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            alert(data.d);
        }
    }
);
}
$(document).ready(function () {
$("#SBE_Services").dropdownchecklist();
});

这是 ASPX：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JqueryAjaxExample.WebForm1" %>

<!DOCTYPE html>
<script src="Scripts/jquery-1.9.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="Scripts/ui.dropdownchecklist-1.4-min.js" type="text/javascript"></script>
<script src="Scripts/onlinerma.js" type="text/javascript"></script>

<html>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <label for="SBE_services">Requested Services</label>
        <select id="SBE_Services" multiple="multiple">
            <optgroup label="Calibration">
                <option>Temperature</option>
                <option>Conductivity</option>
                <option>Pressure</option>
                <option>Dissolved Oxygen</option>
                <option>pH</option>
            </optgroup>
            <optgroup label="Repairs">
                <option>O-Ring Replacement &amp; Inspection</option>
                <option>Hydrostatic Test</option>
                <option>Diagnose &amp; Repair Problems</option>
                <option>Replace Anti-Foulant Devices</option>
                <option>Download Data From Instrument</option>
            </optgroup>
            <optgroup label="Third Party Sensors">
                <option>Fluorometer</option>
                <option>Transmissometer</option>
                <option>Turbidity</option>
                <option>SUNA</option>
                <option>PAR</option>
            </optgroup>
        </select>
        <input type="button" id="button" value="Click me" />
    </div>
</form>
</body>
</html>

最后，这是the working fiddle

在小提琴中，单击“请求的服务”右侧并选择一些（无论多少，只要您至少选择了一个，如果您不选择，则还没有错误处理）。然后点击“点击我”。您应该会收到一个 JS 警报，列出您的选择。在 ASP 项目中这不起作用，我不明白为什么。唯一的区别是稍微定制的 JQuery-UI，但我认为这不是问题所在。 dropdownchecklist 的东西正在工作，所以它告诉我它在外部文件中看到了 JS，我只是不知道为什么我没有收到 JS 警报。

作为健全性检查，我构建了一个纯 HTML 页面，其中包含所有相同的内容（基本上拉出第一行并删除了所有“runat”语句），我还指出了 JQuery 和 JQuery 的 CDN 版本-UI 而不是指向我本地的，我得到了相同的行为，没有警报。这告诉我这不是 ASP 问题，可能不是 JQuery 问题，这是我缺少的其他东西。我什至将警报更改为： alert("test"); 无济于事。我错过了什么？也许我的路径配置错误？这让我发疯了！

编辑：今天早上我使用来自 JQuery 的 CDN 引用重建了 HTML 文件，现在它可以正常工作了。这是 HTML：

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="Scripts/ui.dropdownchecklist-1.4-min.js" type="text/javascript"></script>
<script src="Scripts/onlinerma.js" type="text/javascript"></script>

</head>
<body>
<form id="form1">
    <div>
        <label for="SBE_services">Requested Services</label>
        <select id="SBE_Services" multiple="multiple">
            <optgroup label="Calibration">
                <option>Temperature</option>
                <option>Conductivity</option>
                <option>Pressure</option>
                <option>Dissolved Oxygen</option>
                <option>pH</option>
            </optgroup>
            <optgroup label="Repairs">
                <option>O-Ring Replacement &amp; Inspection</option>
                <option>Hydrostatic Test</option>
                <option>Diagnose &amp; Repair Problems</option>
                <option>Replace Anti-Foulant Devices</option>
                <option>Download Data From Instrument</option>
            </optgroup>
            <optgroup label="Third Party Sensors">
                <option>Fluorometer</option>
                <option>Transmissometer</option>
                <option>Turbidity</option>
                <option>SUNA</option>
                <option>PAR</option>
            </optgroup>
        </select>
        <input type="button" id="button" value="Click me" />
    </div>
</form>
</body>
</html>

我还使用纯 JS 而不是 JQuery 的按钮构建了另一个页面，它在 ASP.NET 页面中完美运行，因此它与 JQuery 或 JQuery-UI 或下拉列表有关。当我添加一个 JQuery 选择器而不是函数调用时，它停止工作。我将开始尝试找出哪些 JQ 的东西是罪魁祸首。

编辑 2：

我用一个简单的输入按钮和相应的 JQuery 选择器构建了一个准系统 ASP.NET 项目，以响应 onclick 事件，因此任何想要帮助解决这个问题的人都有一个简单的方法。启动一个新的 ASP.NET 项目，接受默认名称，将网页添加到项目（也接受默认名称），然后将其设为起始页。这是页面的代码，我没有更改其他文件：

编辑 3 并在答案中加入约翰的建议，现在它可以工作了：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1-vsdoc.js' type='text/javascript'></script>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="http://dropdown-check-list.googlecode.com/svn/trunk/doc/ui.dropdownchecklist-1.4-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#button").on('click', function() {
        alert("You clicked the button");
    });
});
</script>
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" id="button" value="Click Me"/>
    </div>
    </form>
</body>
</html>

所有与 JQuery 相关的 <script> 调用都是针对各种 CDN 资源的，因此您无需下载任何内容即可完成这项工作。以前一定有人遇到过这个问题，但是在网络上很难找到任何能说明这个特定问题的东西。

【问题讨论】：

您的脚本标签是否存在于您的“html”和“head”标签之外？
尝试添加一个错误：function(jqXHR,status,error){alert('status='+status+', error='+error)} 看看它是否失败，如果是，是什么错误是。
@JordanRynard 我尝试按照您的建议将它们移入内部，但行为没有改变。我尝试按照 Ron 的建议添加错误陷阱，同样的事情。所以我写了一个纯JS函数来弹出警报，它工作得很好，然后我添加了一个JQuery选择器$(#"button").onclick(function() { alert("Alert works!")}它停止工作，所以问题在于JQuery与ASP.NET的交互。带有完整 JQuery 的 HTML 页面按预期工作，所以它是 ASP.NET。

标签： jquery asp.net jquery-ui

【解决方案1】：

这段代码：

$("#button").on('click', function () {
var test = $("#SBE_Services").val();
alert(test);
//asyncServerCall(test);
});

应该在你的 $(document).ready(function(){});

像这样：。

$(document).ready(function(){

    $("#button").on('click', function () {
    var test = $("#SBE_Services").val();
    alert(test);
    //asyncServerCall(test);
    }); 


    $("#SBE_Services").dropdownchecklist();
});

【讨论】：

约翰，感谢您的尝试，但这似乎没有任何区别。我已经在$(document).ready(function()... 调用中移动了代码（这在小提琴和HTML 中都按预期工作，所以它看起来完全有效），但我仍然得到与 ASP.NET 项目相同的行为，没有任何反应当我单击 DDCL 以外的按钮时，它会崩溃。
你用的是什么浏览器，错误控制台有没有报错？
另一件事，你说你从你的元素中取出了所有的 runat='server'，你有一个 runat=server 在按钮或选择上吗？如果是这样，问题可能是 asp.net 中的 id 损坏。
John，事实证明您的原始建议确实有效，我在上面列出的简单 ASP.NET 项目上进行了尝试（稍后我将在这里更正），当我将代码放入<script> 标签，VS2010 注意到我错过了结束 }，它从未在 .JS 页面上看到过。一旦我开始运行它，当我仔细浏览原始项目中的 .JS 页面时，我发现了同样缺失的右花括号，添加了它，瞧，我现在有了一个工作的概念证明。谢谢！