ASP.NET MVC Ajax function keep failing?

Question

I would like to know why the function called by AJAX keeps fail in this scenario? The FillObj() is supposed to be called when a dropdownlist selection changes.

    <div class="form-group">
        @Html.LabelFor(model => model.Module, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.Module, new SelectList(Model.ModuleList, "Value", "Text"),
     "- Please select a Module -", new { @onchange = "FillObj()", @class = "form-control" })
        </div>
    </div>

As you can see I already have the @onchange set to FillObj() in the Dropdownlist code. However, when the selection changes, it keep goes to alert('A error') instead of success. The following is the AJAX function:

function FillObj() {
    var moduleID = $('#Module').val();
    $.ajax({
        url: '/Questions/FillObjectives',
        type: "GET",
        dataType: "JSON",
        data: { module: moduleID },
        success: function (objectives) {
            $("#objective").html(""); // clear before appending new list
            $.each(objectives, function (i, Obj) {
                $("#objective").append(
                    $('<option></option>').val(Obj.ObjectiveId).html(Obj.objective));
            });
        },
        error: function () {
            alert('A error');
        }

    });
}

Controller:

public ActionResult FillObjectives(int module)
{
    var objectives = db.Objectives.Where(o => o.ModuleId == module);
    return Json(objectives, JsonRequestBehavior.AllowGet);
}

EDIT 1:

Ok, I did some debugging and found out that this error message occured whenever the function is called:

Anyways to fix this?

does the controller action gets called, check using breakpoint using debugger? — Ehsan Sajjad
– Ehsan Sajjad, Commented Dec 18, 2016 at 19:51
and use Url.Action for urls like: url: '@Url.Action("FillObjectives","Questions")' — Ehsan Sajjad
– Ehsan Sajjad, Commented Dec 18, 2016 at 19:52
The controller parameter expects an integer. Try changing it to string: FillObjectives(string module) — user6244995
– user6244995, Commented Dec 18, 2016 at 19:52
What errors are you getting in the browser. The code you have shown works fine. Best guess is that the code in your controller throws an exception - debug it! — user3559349
– user3559349, Commented Dec 18, 2016 at 21:59

CodingYoshi · Accepted Answer · 2016-12-19 05:47:16Z

1

Please see edit below in EDIT 1

If you are calling your action using GET, then you cannot send data in the body. You cannot do this:

data: { module: moduleID },

You can append it to the end of the url as a querystring.

url: '/Questions/FillObjectives?module=' + moduleID,

Or you can change the call to POST but make sure your action does not have HttpGet attribute applied to it.

EDIT 1

Thanks to the comments by Stephen Muecke, above I said that for a GET operation data { module: moduleID } should not be done. That is half true. And since this answer was upvoted a few times, I am sharing this so other people, who are under the same impression, will know that is is not true. It will not work if whatever being posted is already a string. If it is not a string, jQuery will convert it to a string and append it to the URL. This is from jQuery docs:

Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests.

In the question posted, it is not already a string so jQuery will convert the data to a string and append it to the url.

Therefore, in conclusion, the code posted in this question will work but the reason it is going to error is because the code in the controller is erroring out. If you do this in the controller, it will go to success on the client side:

public ActionResult FillObjectives(int module)
{
     var data = new[]{ new { ObjectiveId = 1, objective = "Option 1" }, new { ObjectiveId = 2, objective = "Option 2" } };
     return Json(data, JsonRequestBehavior.AllowGet);
}

So the issue most likely is with this line of code:

var objectives = db.Objectives.Where(o => o.ModuleId == module);

edited Dec 19, 2016 at 5:47

answered Dec 18, 2016 at 19:58

CodingYoshi

27.3k7 gold badges68 silver badges75 bronze badges

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

6 Comments

user3559349 Over a year ago

Of course data: { module: moduleID }, works for a GET

CodingYoshi Over a year ago

I don't think so. See here and here. Why do you say it works-i would like to know.

user3559349 Over a year ago

Your should try it first :) And refer this DotNetFiddle to prove it

user3559349 Over a year ago

Also form the docs Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests .....

CodingYoshi Over a year ago

Hey @StephenMuecke, Thank you very much for that. I honestly was not aware of this little detail that jQuery will append it to the url. Anyways, I really appreciate you pointing this out. I edited my answer instead of simply deleting it since there are other people who are under the same impression and can hopefully benefit from it.

|

Collectives™ on Stack Overflow

ASP.NET MVC Ajax function keep failing?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related