ASP.NET MVC3 下拉 JQuery 更改事件连线出错答案

【问题标题】：ASP.NET MVC3 dropdown JQuery change event wire up gone wrongASP.NET MVC3 下拉 JQuery 更改事件连线出错
【发布时间】：2012-04-27 03:21:51
【问题描述】：

我正在尝试为下拉列表连接和更改事件 jQuery 处理程序，一旦用户更改下拉列表中的值，我必须使用从控制器操作返回的 html 填充 div“付款”。

这是我到目前为止所拥有的，我不知道为什么它不起作用或如何进一步追求这一点。更改下拉值没有错误或响应。非常感谢任何帮助！

cshtml:

<script type="text/javascript">
$(document).ready(function () {
    $("#PaymentType").change(function () {
        var selection = $("#PaymentType").val();
        var dataToSend = {
            paymentType: selection
        };

        $.ajax({
            url: "Order/PaymentChanged",
            type: "GET",
            data: dataToSend,
            success: function (data) {
                $("#payment").text("server returned:" + data.agent);
            }
        });
    });
});
</script>

@using (Html.BeginForm())
{
   <div id = "payment">
   <br />
   @Html.Label("Select payment method")
   <br />
   <select id="PaymentType" name="PaymentType">
     <option value="CreditCard">Credit Card</option>
     <option value="Cash">Cash</option>
     <option value="Check">Check</option>
   </select>
   </div>
 }

OrderController.cs

    public JsonResult PaymentChanged(string paymentType)
    {
        return Json(new { agent = "sample html" }, JsonRequestBehavior.AllowGet);
    }

标准，基本未更改的 _Layout.cshtml 文件，包含所有 jQuery src，包括 src="/Scripts/jquery-1.5.1.min.js"

【问题讨论】：

您是否尝试在更改事件函数中添加断点以查看它是否被命中？据我所知，这应该可行。另外你为什么使用这么旧版本的jquery？
@Kadajski 他可能正在使用 1.5.1 附带的默认 MVC 项目，除非他最近升级或正在使用 Nuget。
为什么你自己写<select...html而不是使用MVC辅助方法？
@Kadajski 我试过设置一个断点，但它没有被击中。我正在使用 TerryR 建议的默认 MVC 项目。我可以更新，但认为这个功能应该被 1.5.1 覆盖。

标签： jquery asp.net ajax asp.net-mvc-3 razor

【解决方案1】：

代码对我来说看起来不错，所以我会回答“如何进一步追求”

使用Chrome's debugger 或Firebug 查看status of your XHR。
在调试模式下运行您的 MVC 应用程序（来自 Visual Studio）并在您的控制器中放置一个断点以查看它是否实际被调用以及 paymentType 是否被正确发送（前者更有可能因为您的代码看起来不错)。

【讨论】：

我已经尝试在脚本和控制器中设置断点，但都没有运气。我将尝试使用 Chrome 调试器，因为我没有尝试过。感谢您的建议。
好的，通过 chrome 调试器仔细观察，我注意到正在生成 404。根据我收集到的信息，我的路由不正确。我从 url: "Order/PaymentChanged" 中删除了 "Order" 并且一切都按预期工作。感谢您让我走上正确的道路。
认为这是问题所在。顺便说一句，您应该查看绝对与相对 URL 路径，并确保您了解为什么需要删除“订单”。仅供参考，如果您在全局脚本上使用相同的代码并从另一个控制器调用它，它将无法正常工作。