在mvc 5中显示当前添加数据下拉列表而不刷新整个页面

Question

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

Answer 1

在单击按钮时触发 jQuery onclick 事件，这将从 mvc 调用控制器，并且 return 您在 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 在 html <div> 中呈现我们的下拉列表具有该 ID。