在mvc 5中显示当前的添加数据Dropdownlist，而无需刷新整个页面

Question

我想绑定Dropdownlist，其中添加了当前数据，而无需重新整理整个页面 例如 ： 一个文本框和一个按钮以及一个下拉列表。 在文本框中输入文本，然后点击按钮，该值将显示在下拉列表中，而无需重新加载整个页面。

Answer 1

在单击按钮时触发jQuery onclick事件，该事件将从mvc调用控制器，并在jQuery函数中作为响应返回给您列表。获得响应后，使用for循环呈现您的下拉列表。在这里放置我能够完成的代码。

function AddPlayer()
{
    //debugger;
    $.ajax({
        type: "post",
        url: "/Home/GetPlayers",
        data: { tid: $('#ddlState').val() },
        datatype: "json",
        traditional: true,
        success: function (res) {
            var player = "<select id='ddlPlayer' class='form-control' 
            onchange='DuplicatePlayer()'>";
            player = player + '<option value="">--Select--</option>';
            for (var i = 0; i < res.length; i++)
             {
                player = player + '<option value=' + res[i].Value + '>' + res[i].Text 
                + '</option>';
             }
            player = player + '</select>';
            $('#PlayerID').html(player);
        }
    });

}

在var player中，我们将HTML代码编写为带有循环的字符串，最后将其分配给|。 id，它会在具有该ID的html <div>中呈现我们的下拉列表。