Asp.net MVC Выпадающий список с Html Helper

Я полностью сбит с толку множеством статей и учебных пособий об использовании html helper для создания выпадающего списка. моя цель состоит в том, чтобы у меня было 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>

ценю любую помощь

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 следует изменить в соответствии с вашей моделью.

То, что вам нужно, называется выпадающим списком в 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});
}

здесь полное объяснение с загружаемым образцом

Надеюсь, что это поможет вам

Другие вопросы по тегам