ajax postback method for refreshing dropdown list

Question

Scoop...

I have a drop down list that might not display a particular option you're looking for. I added a button with pop up modal to type in a field you want to add to the drop down list. It functions perfectly, but I need to add an ajax postback method to refresh the list after the user hits enter. I don't want to refresh the whole page, just the list. any help?

Controller :

        public ActionResult AddLeadSource()
    {
        return View();
    }

    [HttpPost]
    public ActionResult AddLeadSource(string name)
    {
        LeadSource ls = new LeadSource();
        ls.Name = name;
        db.LeadSources.Add(ls);
        db.SaveChanges();
        return Json(new { success = true });
    }

JS

<script>
$("#AddNew").change(function () {
    var name = $("#Name").val();
    // var order = $("#DisplayOrder").val();

    $.ajax({
        type: 'POST',
        dataType: 'json',
        cache: false,
        url: '/Admin/LeadSource/AddLeadSource',
        data: { name: name },
        success: function (response) {
            //alert("Success " + response.success);
            $('#FollowUpNotes').kendoWindow('destroy');
            // Refresh the DropDown <-- Heres where I need some help!


        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('Error - ' + errorThrown);
        }
    });
});

Answer 1

I highly recommend looking at jQuery UI's autocomplete widget. That said,

 $('#YourDropDownID option').remove(); //this will remove all option elements inside the <select id="YourDropDownID">

Then you just need to build new ones based on the response data,

        for (var o in data) {
            if (data[o].Value != undefined) {
                $('#YourDropDownID').append('<option value="' + data[o].Value + '">' + ("" + data[o].Display) + '</option>');
            }
        }

I do this inside the .done() callback of my AJAX:

    .done(function (data) {
        //above code
    }

Depending on the nature of the data you are sending back you may need to loop through it differently. Mine is an array of objects with a Value and Display properties (in my case, account numbers and account names).

//server side controller
    var query = @"
    Select
        SubString([mn_no], 0, 6) As Value,
        RTRIM([acct_desc]) As Display
    From [some_table]";
            return con.Query(query, new { AccountNumber = accounts.Select(x =>
            {
                return new { Value = x.Value, Display = x.Display };
            });

Answer 2

In your success function of your Ajax call add this:

$("IdOfDropDownList").data("kendoDropDownList").dataSource.read();

In this way your dropdownlist will call the read function and reload all data. I assumed that your dropdownlist is binding throught read call.