ASP.NET MVC 应用程序中的 AJAX 调用未调用 Action 方法答案

【问题标题】：AJAX call in ASP.NET MVC application not calling Action methodASP.NET MVC 应用程序中的 AJAX 调用未调用 Action 方法
【发布时间】：2018-03-16 00:22:07
【问题描述】：

我有以下 ASP.NET MVC .cshtml 文件，我在其中执行以下操作：从MyObject 获取名称和ID 值并从中创建一个DropDownList，当用户在下拉框中选择一个项目时，我尝试使用AJAX 调用TheMethodToCall，这是TheController 中的一种方法，并尝试显示TheMethodTocall返回的文本结果。

@model List<MyWebApp.Models.MyObject>

@if (Model.Count > 0)
{
    using (Html.BeginForm())
    {
        <div class="input-group mb-3">
            @Html.DropDownList("SelectFromDropdownList", Model.Select(i => new SelectListItem()
                {
                    Text = i.Name,
                    Value = i.Id
                }), "This is the default DropDownList option", new { @class="custom-select", @id="mydropdownid"})
            <script>
                $(function(){
                    $('#SelectFromDropdownList').change(function () {
                        var typeFeed = $(this).val();
                        // Perform AJAX call
                        $.get("@Url.Action("TheMethodToCall", "TheController")", { TypeFeed: typeFeed }, function (result){
                            @Html.DisplayText(result);
                            });
                        });
                    });
            </script>
        </div>
    }
}

我有几个问题，请帮助！他们在这里：

我已将我的 Visual Studio 调试器断点放在 TheMethodToCall 方法中，但当用户从 DropDownList 中选择项目时它不会被命中。
这是显示从TheMethodToCall 返回的result 文本的正确方法吗？

更新

我很欣赏到目前为止的答案，但我在这个方法中设置了一个断点，但它仍然没有被调用。我确实将$('#SelectFromDropdownList').change(function () 更改为$('#mydropdownid').change(function ()。还有什么事情要做吗？

    [WebMethod()]
    public static string TheMethodToCall()
    {
        return "This is a test";
    }

【问题讨论】：

您已添加 new { id="mydropdownid" } 生成 <select id="mydropdownid" ... >` 所以您没有带有 id="SelectFromDropdownList" 的元素 - 因此脚本需要为 $('#mydropdownid').change(function () {
不 - @Html.DisplayText(result); 将不起作用。要将结果添加到 DOM，您需要 $(someElement).html(result)
你为什么有[WebMethod()]？它应该是public ActionResult TheMethodToCall() { return Content("This is a test"); }
另外，您正在尝试将数据传递给函数{ TypeFeed: typeFeed }，但您的函数不接受任何参数。在你学习的时候，暂时不要发送任何数据。它只会使事情复杂化。
我觉得我这么说我疯了，但它仍然不起作用！我已经采纳了您的所有建议，但仍然没有调用 TheMethodToCall（断点未命中）。难道是我错过了 AJAX 库？或者 @Url.Action 是使用错误的方法？对于Url.Action 中的第二个参数，如果我有一个名为HouseController 的控制器，我会将House 或HouseController 作为该方法的第二个参数吗？

标签： javascript c# ajax asp.net-mvc razor

【解决方案1】：

您的 .change 侦听器使用了错误的 ID。下拉列表的 ID 为 mydropdownid，但在您的 jQuery 中，您拥有 $('#SelectFromDropdownList').change。改成$('#mydropdownid').change
您在 AJAX 响应中使用结果的方式不正确。您正在尝试使用服务器端 Razor/C#（在页面初始加载时执行）来处理在页面加载很久之后发生的响应。您只需要在响应函数中使用 JavaScript。

【讨论】：

感谢您的回复。我对 JS/AJAX 很陌生，请问您可以编辑代码以仅在响应函数中使用 JavaScript 吗？
这取决于你想对响应做什么。一个例子可能是只显示一个弹出/警报，无论响应是什么：function (result){ alert(result); });