How to use ajax request to get data from controller in asp.net mvc

Question

i am sort of new to ajax .

i am trying to get data from my a method in my controller, i have written the ajax code but does not seem to do the job(not pulling data from controller) maybe i am missing something either in the controller of the ajax request.

i have two dropdowns, i am trying to populate a dropdown box based on the selection of another dropdown, I am trying to correct data from a method in my controller which I don't know how to.

i would really appreciate some guidance or help on this matter

thank you

 public ActionResult ptdrFilter(int id)
    {
        //IUnitOfWork uow = DataAccess.GetUnitOfWork();
        using (ManageProductTemplate ptLogic = new ManageProductTemplate(ref uow))
        {
            List<ProductTemplate> currentpt = ptLogic.GetBy(x => x.ProductTemplateID == id);

            List<string> pt = new List<string>();
            foreach (var item in currentpt)
            {
                pt.Add(item.DistributionRule.Name);

            }
            return Json(new {

                pt


            } , JsonRequestBehavior.AllowGet);
        }
    }

 function drFilter() {

    $.ajax({
        type: "json",
        data: {id: 1},
        url:"/ptdrFilter/",
success: function(result) {
    drFilter(result);
}
    });
        var dataInJSONForm = JSON.stringify(sampleData);
        var datainJSObjectForm = JSON.parse(dataInJSONForm);

        $('#dd1').on('change', function (e) {
            var valueChosenInddl2 = $(this).val();
            var options = datainJSObjectForm[valueChosenInddl2];



            var $subselect = $('#subselect');
            $subselect.children().detach();
            for (var property in options) {
                $subselect.append($('<option>', { value: property, text: options[property] }));

}

Answer 1

There are a couple of clear problems here:

1)

function drFilter() {

  $.ajax({
    type: "json",
    data: {id: 1},
    url:"/ptdrFilter/",
    success: function(result) {
     drFilter(result);
    }
 });
...

is going to produce an infinite loop. When the ajax call completes (successfully), it calls drFilter() again, which will immediately make the ajax call again, and so on forever.

2) I think it's failing because the URL is wrong. In the comments you mention a 404 Not Found error - this means it reached the wrong URL. MVC uses URL routing, so it's best to let MVC generate URLs for you. You can do this using a HTML helper, like this:

url: @Url.Action("ptdrFilter")

Your browser also reported the the "sampleData" variable was not defined. There's nowhere in your posted code that shows this variable being defined or populated before you try to pass it to the JSON.stringify() method. I'm guessing maybe this is testing code that you haven't removed yet.