将数据从json绑定到在MVC中选择了jquery的Dropdownlist

Question

我尝试使用选定的Jquery将数据绑定到Dropdownlist，但不成功。任何人都可以帮助我进行检查。我是新手。谢谢

public class City_Model
{
    [Display(Name = "Select City")]
    public string City { get; set; }
}

public class City_Opption
{
    public string Id { get; set; }
    public string CityName { get; set; }

}

在控制器中：

    //Return json list of cities  
    [HttpGet]
    public JsonResult CityList()
    {
        // datatable get data from SQL server
        DataTable dt = Data.Factory_query("");
        ///////////////
        List<City_Opption> lstRows = new List<City_Opption>();
        City_Opption dictRow = null;
        City_Opption dictRow1 = new City_Opption();


        foreach (DataRow dr in dt.Rows)
        {
            dictRow = new City_Opption();

            dictRow.Id = dr[0].ToString();
            dictRow.CityName = dr[0].ToString();

            lstRows.Add(dictRow);
        }
        return Json(lstRows, JsonRequestBehavior.AllowGet);

   }

在index.cshtml中

    @model BasicMVC.Models.City_Model
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap4-chosen.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.3.1.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/chosen.jquery.min.js"></script>
    @using (Html.BeginForm())
    {
        @Html.DropDownListFor(model => model.City, Enumerable.Empty<SelectListItem>(), new { @id = "City", @class = "chosen-select" })
    }

    <script type="text/javascript">
    $(document).ready(function () {  
       $.ajax({  
          type: "GET",  
          url: "/Dammio/CityList",  
          data: "{}",  
          success: function (data) {  
           $("#City").empty().append('<option Value=0>' + "All" + '</option>');
            // Insert each other element
            $.each(data, function (i) {
                $("#City").append('<option Value="' + data[i].Id + '">' + data[i].Id + '</option>');
           });
         } 
       });  
    });  
    </script>
    <script type="text/javascript">
       var config = {
       '.chosen-select': {},
       '.chosen-select-deselect': { allow_single_deselect: true },
       '.chosen-select-no-single': { disable_search_threshold: 10 },
       '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
       '.chosen-select-width': { width: "95%" }
       }
       for (var selector in config) {
       $(selector).chosen(config[selector]);
       }
    </script>

导致它在下拉列表中不显示任何项目。在我检查html并在块选择中看到结果后，没有任何结果，尽管我看到块选择中有数据。请帮我。谢谢。

enter image description here

Answer 1

因为您将style="display:none;"标签设置为select。

您需要删除它或设置style="display:inline;"或块