Ajax request to controller to get data for DropDownList in asp.net?

Question

I'd appreciate if someone could advise on the following: I invoke my controller ActionResult passing some string and then I get the data. How can I use this data to populate my DropDownList and show it to user?

   $.ajax({
      type: "POST",                            
       url: '@Url.Action("Action","Controller")', 
      data: { passedString: "Industrial"},           
      success: function(data){
           //pass data to ViewBag??
      }
});

my view:

@Html.DropDownListFor(model => model.TraumaCode, (SelectList)ViewBag.TraumaList)

my controller action:

    public ActionResult GetTraumaType(string passedString)
    {
        if (passedString == "Industrial")
        { 
        ViewBag.TraumaList = some Value...
        }
        else
        {
         ViewBag.TraumaList = another Value...
        }
    }

I understand I cannot change the ViewBag info, because the page is loaded once, is there another way to pass data to DropDownList?

Darin Dimitrov · Accepted Answer · 2013-09-03 11:10:25Z

1

You could return it as a JSON result:

public ActionResult GetTraumaType(string passedString)
{
    if (passedString == "Industrial")
    { 
        return Json(some_value, JsonRequestBehavior.AllowGet);
    }
    else
    {
        return Json(some_other_value, JsonRequestBehavior.AllowGet);
    }
}

and then:

$.ajax({
    type: "POST",                            
    url: '@Url.Action("Action", "Controller")', 
    data: { passedString: "Industrial"},           
    success: function(data) {
        // here you could rebind the ddl:
        var ddl = $('#TraumaCode'); // verify the id of your ddl
        ddl.empty();
        $.each(result, function() {
            ddl.append(
                $('<option/>', {
                    value: this.value,
                    html: this.text
                })
            );
        })
    }
});

Now of course your controller action should return as JSON an array that has the value and text properties. For example:

return Json(new[]
{
    new { value = "1", text = "item 1" },
    new { value = "2", text = "item 2" },
    new { value = "3", text = "item 3" },
    new { value = "4", text = "item 4" },
}, JsonRequestBehavior.AllowGet);

answered Sep 3, 2013 at 11:10

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

2 Comments

Gyuzal Over a year ago

Thank you! My DDL is still empty, seems the result was not appended. And if I have @Html.DropDownList(model=>model.TraumaCode,...new{id = "TraumaCode"}) will ddl.append( $('<option/>'{}) work or should there be <select> tag only? Thanks a lot!

Darin Dimitrov Over a year ago

Maybe there are some javascript errors or the service didn't return the correct object. Look in FireBug what response did the operation returned and how does the JSON look like.

Roy Dictus · Accepted Answer · 2013-09-03 11:14:07Z

0

Why are you using HTTP POST to get the data from the controller method?

You can change the POST to GET or decorate your controller method with

[HttpPost]

which tells ASP.NET MVC to accept POST requests for that method.

And of course your method must return an ActionResult (a JsonResult if you want to return JSON data) that the AJAX success function can then process.

answered Sep 3, 2013 at 11:14

Roy Dictus

33.3k9 gold badges64 silver badges77 bronze badges

Collectives™ on Stack Overflow

Ajax request to controller to get data for DropDownList in asp.net?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related