How to dynamic bind html.DropDownList() in MVC

Question

I have a dropdownlist and a textbox in my page,I want to change the dropdownlist with the textbox change. I use JQuery post like this:

$("#txtBuildId").change(function() { var builddate = $("#txtBuildId").val(); $.post("/UTOverview/Index?builddate=" + builddate); });

and my Index function is:

public ActionResult Index()
    {
        string buildDate = Request.Params.Get("builddate");
        DataTable tbBuildid = DatabaseService.getBuilidByDate(buildDate);
        List<SelectListItem> list = new List<SelectListItem>();
        foreach (DataRow bd in tbBuildid.Rows as IEnumerable)
        {
            list.Add(new SelectListItem { Text = bd["buildid"].ToString(), Value = bd["buildid"].ToString() });
        }
        ViewData["tbbuildid"] = list;
        return View();
    }

But I found that the dropdownlist didn't change with the DataView["tbbuildid"] change? Why ?

I try to do this via full postback way like: window.location = "/UTOverview/Index?builddate=" + builddate; It works. ViewData["tbbuildid"] changed every time I post the new builddate to the method index.But how can I do this by Ajax way?

Shyju · Accepted Answer · 2012-04-09 12:35:38Z

1

In your Action method, you are returning a View, But do you have a view for this ? In this case, I would simply return Json from the action method.

Just return Json from your Action method and use that to populate your dropdow. Since you are making an Http Post call, It will hit your HTTPPost Action method

[HttpPost]
public ActionResult Index()
{
        string buildDate = Request.Params.Get("builddate");
        DataTable tbBuildid = DatabaseService.getBuilidByDate(buildDate);
        List<SelectListItem> list = new List<SelectListItem>();
        foreach (DataRow bd in tbBuildid.Rows as IEnumerable)
        {
            list.Add(new SelectListItem { Text = bd["buildid"].ToString(), Value = bd["buildid"].ToString() });
        }
        return Json(list);
}

And in your script,

    $("#txtBuildId").change(function () {
        var builddate = $("#txtBuildId").val();
        $.post("@Url.Action("Index","UTOverview")", {builddate:builddate},function(data){
          $.each(data, function() {
                $("#select1").append($("<option />").val(this.Value).text(this.Text));
         });
        }); 
     });

It is always a good practice to use Url.Action HTML helper to get the path to the Action method as MVC will take care of returning the correct path to the action method. You dont need to worry about how many ../ to use.

The above code is tested and it will work fine.

answered Apr 9, 2012 at 12:35

Shyju

220k106 gold badges420 silver badges499 bronze badges

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

2 Comments

Jack Zhang Over a year ago

I just don't know how to change html.dropdownlist() in an ajax way.My dropdownlist has binded the data from ViewData["tbbuildid"], this will have new value with the textbox value change, but I don't know how to refresh the dropdownlist data?

sergiol Over a year ago

Did you really test this? I copied your code, and had to fix some things. this is not iterating the data variable in the $.each cycles. Changed it to something like $.each(data, function(index, element) and $("#select1").append($("<option />").val(element.Value).text(element.Text)); . Or may be I have an older version of jQuery which does not see this as the iterating element?

Yasser Shaikh · Accepted Answer · 2012-04-09 11:50:21Z

0

Did you try debugging your cs code and adding alerts in your javascript code.

Try doing these you should get closer to the actual problem also post these findings in your question.

answered Apr 9, 2012 at 11:50

Yasser Shaikh

47.9k50 gold badges208 silver badges289 bronze badges

Comments

ngm · Accepted Answer · 2012-04-09 12:07:40Z

0

The jquery .post() is actually an asynchronous call to the server. It returns some data which you then need to do something with.

If you simply want to refresh your page via a full postback, you could do

window.location = "/UTOverview/Index?builddate=" + builddate;

If you want to alter the state of your dropdown dynamically, without a page refresh, you will need to pass a callback to .post() which updates your drop down box based on the returned data. In which case, you don't want to have it call your index action, but a specific action for retrieving updated data. Something such as:

$.post("/UTOverview/BuildSelect?builddate=" + builddate, function(data) {
  $('#buildDropDown').html(data);
});

See jQuery.post() for more info. Or rather than constructing the HTML in the controller action, which is a bit of a no-no, return a Json result and bind your drop down to this.

In both cases, be aware that listening for the onchange event will only fire when the textbox loses focus.

edited Apr 9, 2012 at 12:07

answered Apr 9, 2012 at 11:56

ngm

7,5371 gold badge56 silver badges64 bronze badges

2 Comments

Jack Zhang Over a year ago

I know Jquery.post() mean, I just don't know how to change html.dropdownlist() in an ajax way.My dropdownlist has binded the data from ViewData["tbbuildid"], this will have new value with the textbox value change, but I don't know how to refresh the dropdownlist data?

ngm Over a year ago

@JackZhang Shyju's answer shows you a way to refresh the drop down list, I would recommend using that.

Collectives™ on Stack Overflow

How to dynamic bind html.DropDownList() in MVC

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related