Question

如何将值从查询控制器传递到html视图下拉列表。我只想使用查询从下拉列表中查看值，而从查询中获得ID列，并且该ID将在下拉列表中隐藏，并且名称仅可见，因为我的目标可能需要唯一的ID进行更新。

目前，这里是我的用于读取控制器的伪代码：

<html>
    <select id="names" onclick="getNames()" style="width:200px; height:35px; margin-left:700px">
        <option value="" disabled selected>Names</option>
    </select>
</html>

<script>
    function getNames() {
        //alert("here");
        $.ajax({
            url: '/Home/showData',
            type: 'GET',

            dataType: 'json',
            success: function (data) {
                var row = '';
                $.each(data, function (i, item) {
                    row += '<option style="display:none;" value=' + item.id + '> ' + item.id + '</option>';
                        + '<option value=' + item.name + '> ' + item.name + '</option>';

                });
                $('#names').html(row); // override previous results
            },

            error: function (jqXhr, textStatus, errorThrown) {
                console.log(errorThrown.toString());
            }
        });
    }
</script>

我已经对返回json的控制器建立了查询：

public ActionResult showData()
    {
        //Load mgr list table from MySql
        List<Details> listItems = new List<Details>();
        string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
        using (MySqlConnection con = new MySqlConnection(constr))
        {
            string query = "SELECT id, concat(f_name,', ',l_name) as names FROM tblInfo";
            using (MySqlCommand cmd = new MySqlCommand(query))
            {
                cmd.Connection = con;
                con.Open();
                using (MySqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        try
                        {
                            listItems.Add(new empDetails
                            {            
                                id = Convert.ToInt32(sdr["id"]),                        
                                name = sdr["names"].ToString(),                                   
                            });
                        }
                        catch (Exception e)
                        {
                            Console.WriteLine("An error occurred: '{0}'", e);
                        }
                    }
                }
                con.Close();
            }
        }
        return Json(listItems, JsonRequestBehavior.AllowGet);
    }

Answer 1

您在AJAX调用中遇到几个问题：

1）<select>选择器使用类名称代替元素名称（在原始版本时）。请改用$('#names')。

2）您正在分别为id和name创建选项列表。您可以将value属性设置为id，并将文本设置为name。

因此，用于填充<select>元素的AJAX回调应如下所示：

$.ajax({
    url: '/Home/showData',
    type: 'GET',
    dataType: 'json',
    success: function (data) {
        var ddl = $('#names');
        ddl.empty(); // clear existing values
        $.each(data, function (i, item) {
            ddl.append($('<option>', {
               value: item.id,
               text: item.name
            }, '</option>'))
        });
    },
    error: function (jqXhr, textStatus, errorThrown) {
        console.log(errorThrown.toString());
    }
});

但是，如果应该从页面加载中填充下拉列表（即，从控制器端调用return View()之后），则应使用List<SelectListItem>作为选项列表，并使用DropDownListFor创建{{1 }}元素，然后将选项列表传递给<select>或ViewBag viewmodel属性：

控制器操作

List<SelectListItem>

查看

ViewBag.ListItems = listItems.Select(x => new SelectListItem { Text = x.name, Value = x.id }).ToList();

将值传递到html下拉列表

1 个答案: