How to get data with jquery ajax in mvc?

Question

I try to get names of city with jquery ajax in mvc project. But get this error for me.

"NetworkError: 404 Not Found - http://localhost:1411/HomeController/GetCity/"

[HttpPost]

public ActionResult GetCity(int idCountry)
{

    TravelEnterAdminTemplate.Models.LG.MyJsonResult myresult = new Models.LG.MyJsonResult();
    try
    {
        var citystable = db.Cities.Where(p => p.CountryId == idCountry).ToList();
        if (citystable != null)
        {
            myresult.Result = true;
            myresult.obj = citystable;

        }
        else
        {
            myresult.Result = false;
            myresult.message = "داده ای یافت نشد";
        }

    }
    catch (Exception e)
    {

        errorlog.Error("DeleteShopping", "157", e.Source.ToString(), e.Message);
        myresult.Result = false;
        myresult.message = "خطا در بارگذاری اطلاعات";

    }
    return Json(myresult, JsonRequestBehavior.AllowGet);

}

The names of controller and method is true.

$(document).ready(function () {
    country = $('#CountryId');
    country.change(function() {
        var id = country.val();
        getCity(id);
    }); //End country.change

    function getCity(id) {
        $.ajax({
            type: "POST",
            url: "/HomeController/GetCity/",    
            data: "{'idCountry':'" + id + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                alert('hello');
                var delay = function () {
                    AjaxSucceededSearch(result);
                };
                setTimeout(delay, 300); //remove this
            },
            error: AjaxFailedSearch()
        });
    } //End getCity

    function AjaxSucceededSearch(result) {
        $('#loading').remove();
        if (result.d != null) {
            for (var i = 0; i <= result.d.length; i++) {}
        } else
            if (result.d == false) {
                alert("data is not  found!!!");
            }
    }

    function AjaxFailedSearch(jqXhr, textStates, errorThrown) {
        alert(errorThrown + ' ' + textStates);
    }
}); // End document  ready

How can I fix this?

Please write only Home not HomeController and it's better if you use @Url.Action() for generating the url — Varun Vasishtha
– Varun Vasishtha, Commented Mar 9, 2016 at 11:18
You should only use Home, not HomeController in the path: "/Home/GetCity/". Better yet use @Url.Action("GetCity", "Home") and also it's better to pass an object to data instead of hacking together a string. — Rory McCrossan
– Rory McCrossan, Commented Mar 9, 2016 at 11:18
just remove controller word from url: "/HomeController/GetCity/", — shu
– shu, Commented Mar 9, 2016 at 11:18
I tried this and it was working url:'@Url.Action("HomeController", "GetCity")' .My url was localhost:10741/Home/GetCity". Home is the name of cshtml page. — Rosebud
– Rosebud, Commented Mar 9, 2016 at 11:37

Rory McCrossan · Accepted Answer · 2016-03-09 11:21:27Z

5

You should only use Home, not HomeController in the path: "/Home/GetCity/". Better yet use @Url.Action("GetCity", "Home") and also it's better to pass an object to data instead of hacking together a string. Finally you should pass the reference of AjaxFailedSearch() to the error handler. Your current code is executing AjaxFailedSearch immediately and assigning the result to the error handler.

Try this:

function getCity(id) {
    $.ajax({
        type: 'POST',
        url: '@Url.Action("GetCity", "Home")',    
        data: { idCountry: id },
        dataType: 'json',
        success: function (result) {
            setTimeout(function () {
                AjaxSucceededSearch(result);
            }, 300);
        },
        error: AjaxFailedSearch // note the removal of ()
    });
}

Is there a reason you're delaying the AjaxSucceededSearch() call by 300ms? It seems a little redundant.

answered Mar 9, 2016 at 11:21

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

6 Comments

hmahdavi Over a year ago

Get me this error : "NetworkError: 404 Not Found - localhost:1411/ArtPlaces/…"

Rory McCrossan Over a year ago

From that full url (http://localhost:1411/ArtPlaces/@Url.Action(%22GetCity%22,%20%22Home%22)%22) it appears your razor code is not being interpreted properly. If you're running this in a JS file then you can't use Razor directly. Try url: '/Home/GetCity/'

hmahdavi Over a year ago

I use url: '/Home/GetCity/' and get this error in console : "NetworkError: 500 Internal Server Error - localhost:1411/Home/GetCity"

Rory McCrossan Over a year ago

Well that's progress :) A 500 means your C# code is throwing an error. You can debug it by setting a breakpoint and stepping through. If you find out what the specific error is in C# and are still stuck you would be best to start a new question.

hmahdavi Over a year ago

I put return Json(myresult, JsonRequestBehavior.AllowGet); in try catch and add breakpoint but when I debug this line has no any error

|

ddb · Accepted Answer · 2016-12-01 10:36:29Z

0

you can try this

function getCity(id) {
    $.ajax({
        type: 'POST',
        url: '/Home/GetCity',    
        data: { idCountry: id },
        dataType: 'json',
        success: function (result) {
            setTimeout(function () {
                AjaxSucceededSearch(result);
            }, 300);
        },
        error: function (xhr, status, error) {
        }
    });
}

edited Dec 1, 2016 at 10:36

ddb

2,4317 gold badges31 silver badges39 bronze badges

answered Dec 1, 2016 at 9:26

JRA

4876 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to get data with jquery ajax in mvc?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related