AJAX call in ASP.NET MVC application not calling Action method

Question

I have the following ASP.NET MVC .cshtml file in which I do the following: Grab the Name & Id values from MyObject and create a DropDownList out of them, when the user selects an item in the Drop Down box I attempt to use AJAX to call TheMethodToCall which is a method in TheController, and attempt to display the text result returned by 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>
    }
}

I'm having a couple of issues, please help! Here they are:

I have put my Visual Studio debugger breakpoint in the TheMethodToCall method, but it does not get hit when the user selects an item from the DropDownList.
Is this the correct way of displaying the result text which is returned form TheMethodToCall?

Update

I appreciate the answers so far, but I'm setting a breakpoint in this method, but it is still not being called. I did change $('#SelectFromDropdownList').change(function () to $('#mydropdownid').change(function (). Is there anything else to do?

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

You have added new { id="mydropdownid" } which generates <select id="mydropdownid" ... >` so you do not have an element with id="SelectFromDropdownList" - therefore the script needs to be $('#mydropdownid').change(function () { — user3559349
– user3559349, Commented Mar 16, 2018 at 0:25
And no - @Html.DisplayText(result); will not work. To add the result to the DOM you need $(someElement).html(result) — user3559349
– user3559349, Commented Mar 16, 2018 at 0:26
Why do you have [WebMethod()]? And it should be public ActionResult TheMethodToCall() { return Content("This is a test"); } — user3559349
– user3559349, Commented Mar 16, 2018 at 1:57
Also, you're trying to pass data to the function { TypeFeed: typeFeed } but your function doesn't accept any parameters. For now while you're learning, don't send any data. It just complicates things. — ash
– ash, Commented Mar 16, 2018 at 2:03
I feel like I'm crazy for saying this, but it is still not working! I have incorporated all of your suggestions, but still TheMethodToCall does not get called (breakpoint not hit inside of it). Could it be that i'm missing the AJAX library? Or that @Url.Action is the wrong method to be using? For the 2nd parameter in Url.Action, if I had a controller named HouseController, would I put House or HouseController as this method's 2nd parameter? — aBlaze
– aBlaze, Commented Mar 16, 2018 at 2:51

ash · Accepted Answer · 2018-03-16 00:38:10Z

1

Your .change listener is using the wrong ID. The dropdown list has ID of mydropdownid but in your jQuery you have $('#SelectFromDropdownList').change. Change it to $('#mydropdownid').change
The way you're using the result in the AJAX response isn't correct. You're trying to use server-side Razor/C# (which executes when the page initially loads) to handle a response that occurs long after the page has loaded. You need to use JavaScript only in the response function.

answered Mar 16, 2018 at 0:38

ash

5424 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aBlaze Over a year ago

Thank you for your response. I'm very new to JS/AJAX, so can you please edit the code to use JavaScript only in the response function?

ash Over a year ago

It depend what you want to do with the response. One example could be to just show a popup/alert with whatever the response says: function (result){ alert(result); });

Collectives™ on Stack Overflow

AJAX call in ASP.NET MVC application not calling Action method

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related