Asp.net MVC 下拉列表和 Html 助手

Question

我对很多关于使用 html 助手生成下拉列表的文章和教程感到非常困惑。我的目标是在第一个下拉菜单中有 2 个下拉菜单，我需要一个国家列表，然后在选择一个国家/地区后，下一个下拉菜单显示该国家/地区可用的旅游。但我被困在第一个下拉菜单中。

我创建了一个这样的模型

public class test
{
    public List<Country> Countries { get; set; }   
}

在我的控制器中我有这个

   {
        var country = db.Countries.ToList();
        var vn = new test { Countries = country.ToList() };
        return View(vn);
    }

在视图中 foreach 循环工作正常，它显示国家列表，但我的下拉列表有错误，我真的很困惑如何修复它。

@model vidiaweb_com.Models.test
<div class="container" id="ttitle">

<nav class="">
    <ul class="resetpadmar">
        @foreach (var t in Model.Countries)
        {
            <li class="">
                <div class="col-md-2 col-sm-2">

                   @t.CountryName

                </div>


            </li>
        }
    </ul>
</nav>

<div class="form-group">
    @Html.LabelFor(model => model.Id, "Id", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownList("Id", null, htmlAttributes: new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.Id, "", new { @class = "text-danger" })
    </div>
</div>

感谢任何帮助

Answer 1

你需要的是mvc中的级联下拉列表

您的代码应该使用 JQuery 在客户端完成，类似这样

 $(function() {
   $('#CountryId').change(function() {
     var countrySelected = $('#CountryId:selected').val();
     countrySelected = countrySelected == "" ? 0 : countrySelected;
     //When select 'optionLabel' we need to reset it to default as well. So not need 
     //travel back to server.
     if (countrySelected == "") {
       $('#TourId').empty();
       $('#TourId').append('<option value="">--Select a Tour--</option>');
       return;
     }
     // call the method on the server to get all related trips
     $.ajax({
       type: "POST",
       url: '@Url.Action("YourActionName","ControllerName")',
       data: {
         'countryId': countrySelected
       },
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function(result) {
         var tourControl = $('#TourId');
         if (result != null) {

           tourControl.empty();
           $.each(result.tours, function(index, data) {
             // Here assuming that the value of tour is "Id" and display name is "Name"
             tourControl.append('<option value="' + data.Id + '">' + data.Name + '</option>');
           });
         }
       }
     });

   });
 });

并在您的控制器中

[HttpPost]
public ActionResult YourActionName(int countryId)
{
     var details = db.Tours.Where(t=>t.CountryId ==countryId);
     return Json(new {tours = details});
}

here 带有可下载示例的完整解释

希望对您有所帮助

Answer 2

如果您没有看到加载的数据，那是因为您没有提供任何数据。您应该如下更改下拉列表：

@Html.DropDownList("Id", 
    Model.Countries.Select(m => new SelectListItem
    {
        Value = m.Id.ToString(),
        Text = m.Name
    }), 
    new { @class = "form-control" })

或者更好，使用强类型版本 DropDownListFor:

@Html.DropDownListFor(m => m.Id, 
    Model.Countries.Select(m => new SelectListItem
    {
        Value = m.Id.ToString(),
        Text = m.Name
    }), 
    new { @class = "form-control" })

注意： Text = m.Name 应更改以匹配您的型号。

Asp.net MVC 下拉列表和 Html 助手

Asp.net MVC Drop-Down List with Html Helper

asp.net-mvc

html-helper

dropdown