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
– ssimeonov, Commented Aug 11, 2015 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
– codeg, Commented Aug 11, 2015 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 <select> — Ju66ernaut
– Ju66ernaut, Commented Aug 11, 2015 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
– Thomas Stringer, Commented Aug 11, 2015 at 16:31

Community · Accepted Answer · 2017-05-23 12:22:00Z

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, 2017 at 12:22

CommunityBot

11 silver badge

answered Aug 11, 2015 at 16:28

Ju66ernaut

2,7013 gold badges29 silver badges36 bronze badges

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

1 Comment

codeg Over a year ago

It makes sense to have the client do the work. Thanks for this answer.

Collectives™ on Stack Overflow

Refresh MVC Dropdownlist

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related