Refresh MVC Dropdownlist

Question

I'd like to refresh an MVC Dropdownlist from a JsonResult method.

Here's the public method that returns the result:

    [HttpPost]
    [ValidateAntiForgeryToken]
    [CustomAuthorize]
    public JsonResult GetHtmlApplicationSelectionList()
    {
        try
        {
            List<SelectListItem> applicationList = new List<SelectListItem>();
            SelectListItem defaultApplicationValue = new SelectListItem();

            defaultApplicationValue.Value = "0";
            defaultApplicationValue.Text = "-- Select Application --";
            defaultApplicationValue.Selected = true;

            applicationList.Add(defaultApplicationValue);

            foreach (var app in businessLogic.GetApplications().Select(x => new SelectListItem { Value = x.ID.ToString(), Text = x.Name }))
            {
                applicationList.Add(app);
            }

            return Json(new { result = "success", list = applicationList }, JsonRequestBehavior.AllowGet);
        }
        catch(Exception ex)
        {
            return Json(new { result = "failure", message=ex.Message}, JsonRequestBehavior.AllowGet);
        }
    }

And here's the jQuery function that calls the POST method to get the updated list of applications:

function UpdateApplicationList() {
    $.ajax({
        url: 'Global/GetHtmlApplicationSelectionList',
        type: 'POST',
        dataType: 'json',
        success: function (data) {

            $('.applicationSelector').html('');

            $('.applicationSelector').html(data);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.responseText);
        }
    });
}

How can I force the $(.applicationSelector') dropdownlist to contain the new list without having to loop through the list retured as JSON? Is it possible to return the html of the list( applicationList) and just refresh the html using $('.applicationSelector').html(data); ?

What is the problem to loop through the list? You can return HTML from your Action but in this way you will increase the traffic between the client and server. — ssimeonov, Aug 11 '15 at 16:26
No problem looping through the list. I think it would be easier to return it as html for ease of use as opposed to doing a client side(jQuery) loop to recreate the list each time. — codeg, Aug 11 '15 at 16:29
Then the question becomes, which has better performance: a client side loop (js or jquery) or trying to render some html string on the server and pass it to my — Ju66ernaut, Aug 11 '15 at 16:31
It's trivial to use JavaScript/jQuery to loop through them on the client side. Transfer the JSON data across the wire, and let the client do the front end work. — Thomas Stringer, Aug 11 '15 at 16:31

score 3 · Accepted Answer · edited May 23 '17 at 12:22

3

You need to append an <option> for each item. This is the answer taken from this post which provides a pretty simple and straight forward example.

$.each(selectValues, function(key, value) {   
 $('#mySelect')
      .append($('<option>', { value : key })
      .text(value)); 
});

Where var selectValues is your JSON list

edited May 23 '17 at 12:22

Community

1
1

answered Aug 11 '15 at 16:28

Ju66ernaut

2,592
3
23
36

It makes sense to have the client do the work. Thanks for this answer. – codeg Aug 11 '15 at 16:38

Refresh MVC Dropdownlist

1 Answers1