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});
}
здесь полное объяснение с загружаемым образцом
Надеюсь, что это поможет вам