선택 태그 헬퍼를 사용하여 SELECT 요소 렌더링
GET 조치에서보기 모델의 오브젝트를 작성하고 EmployeeList콜렉션 특성을 로드 한 후이를보기로 보내십시오.
public IActionResult Create()
{
var vm = new MyViewModel();
vm.EmployeesList = new List<Employee>
{
new Employee { Id = 1, FullName = "Shyju" },
new Employee { Id = 2, FullName = "Bryan" }
};
return View(vm);
}
작성보기 SelectList에서 EmployeeList특성 에서 새 오브젝트를 작성 하고 특성의 값으로 전달하십시오 asp-items.
@model MyViewModel
<form asp-controller="Home" asp-action="Create">
<select asp-for="EmployeeId"
asp-items="@(new SelectList(Model.EmployeesList,"Id","FullName"))">
<option>Please select one</option>
</select>
<input type="submit"/>
</form>
제출 된 양식 데이터를 수락하는 HttpPost 작업 방법.
[HttpPost]
public IActionResult Create(MyViewModel model)
{
// check model.EmployeeId
// to do : Save and redirect
}
또는
뷰 모델에 List<SelectListItem>드롭 다운 항목의 속성 이있는 경우
public class MyViewModel
{
public int EmployeeId { get; set; }
public string Comments { get; set; }
public List<SelectListItem> Employees { set; get; }
}
그리고 당신의 행동에
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "1"},
new SelectListItem {Text = "Sean", Value = "2"}
};
return View(vm);
}
그리고보기에서의 Employees속성을 직접 사용할 수 있습니다 asp-items.
@model MyViewModel
<form asp-controller="Home" asp-action="Create">
<label>Comments</label>
<input type="text" asp-for="Comments"/>
<label>Lucky Employee</label>
<select asp-for="EmployeeId" asp-items="@Model.Employees" >
<option>Please select one</option>
</select>
<input type="submit"/>
</form>
클래스 SelectListItem는 Microsoft.AspNet.Mvc.Rendering네임 스페이스에 속합니다 .
select 요소에 명시적인 닫는 태그를 사용하고 있는지 확인하십시오. 자체 닫기 태그 접근 방식을 사용하면 태그 도우미가 빈 SELECT 요소를 렌더링합니다!
아래 접근 방식 이 작동하지 않습니다
<select asp-for="EmployeeId" asp-items="@Model.Employees" />
그러나 이것은 효과가 있습니다.
<select asp-for="EmployeeId" asp-items="@Model.Employees"></select>
엔티티 프레임 워크를 사용하여 데이터베이스 테이블에서 데이터 가져 오기
위의 예제는 옵션으로 하드 코딩 된 항목을 사용하고 있습니다. 그래서 많은 사람들이 그것을 사용하면서 Entity 프레임 워크를 사용하여 데이터를 가져 오는 샘플 코드를 추가 할 것이라고 생각했습니다.
DbContext 객체 에 엔터티 클래스에 다음 과 같은 속성 이있는 Employees유형 의 속성이 있다고 가정 해 봅시다.DbSet<Employee>EmployeeIdName
public class Employee
{
public int Id { set; get; }
public string Name { set; get; }
}
LINQ 쿼리를 사용하여 직원을 얻고 LINQ 식에서 Select 메서드를 사용하여 SelectListItem각 직원에 대한 개체 목록을 만들 수 있습니다 .
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = context.Employees
.Select(a => new SelectListItem() {
Value = a.Id.ToString(),
Text = a.Name
})
.ToList();
return View(vm);
}
가정 context은 DB 컨텍스트 객체입니다. 뷰 코드는 위와 같습니다.
SelectList 사용
어떤 사람들은 SelectList클래스 를 사용 하여 옵션을 렌더링하는 데 필요한 항목을 보유하는 것을 선호합니다 .
public class MyViewModel
{
public int EmployeeId { get; set; }
public SelectList Employees { set; get; }
}
이제 GET 조치에서 SelectList생성자를 사용 Employees하여 뷰 모델 의 특성 을 채울 수 있습니다. dataValueField및 dataTextField매개 변수를 지정했는지 확인하십시오 .
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new SelectList(GetEmployees(),"Id","FirstName");
return View(vm);
}
public IEnumerable<Employee> GetEmployees()
{
// hard coded list for demo.
// You may replace with real data from database to create Employee objects
return new List<Employee>
{
new Employee { Id = 1, FirstName = "Shyju" },
new Employee { Id = 2, FirstName = "Bryan" }
};
}
여기에 내가 호출하고 GetEmployees방법은, 각 직원 객체의 목록을 얻을 수 있습니다 Id및 FirstName속성을 난으로 그 속성을 사용 DataValueField하고 DataTextField의 SelectList우리가 만든 객체입니다. 하드 코드 된 목록을 데이터베이스 테이블에서 데이터를 읽는 코드로 변경할 수 있습니다.
뷰 코드는 동일합니다.
<select asp-for="EmployeeId" asp-items="@Model.Employees" >
<option>Please select one</option>
</select>
문자열 목록에서 SELECT 요소를 렌더링하십시오.
때로는 문자열 목록에서 선택 요소를 렌더링하려고 할 수 있습니다. 이 경우에는 SelectList생성자 만 사용할 수 있습니다.IEnumerable<T>
var vm = new MyViewModel();
var items = new List<string> {"Monday", "Tuesday", "Wednesday"};
vm.Employees = new SelectList(items);
return View(vm);
뷰 코드는 동일합니다.
선택된 옵션 설정
경우에 따라 SELECT 요소에서 하나의 옵션을 기본 옵션으로 설정할 수 있습니다 (예 : 편집 화면에서 이전에 저장된 옵션 값을로드하려고 함). 그렇게하려면 EmployeeId속성 값을 선택하려는 옵션의 값으로 설정하면 됩니다.
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "11"},
new SelectListItem {Text = "Tom", Value = "12"},
new SelectListItem {Text = "Jerry", Value = "13"}
};
vm.EmployeeId = 12; // Here you set the value
return View(vm);
}
페이지가 렌더링 될 때 select 요소에서 Tom 옵션이 선택됩니다.
다중 선택 드롭 다운
다중 선택 드롭 다운을 렌더링하려면 뷰의 asp-for속성에 사용하는 뷰 모델 속성을 배열 유형으로 변경하면됩니다.
public class MyViewModel
{
public int[] EmployeeIds { get; set; }
public List<SelectListItem> Employees { set; get; }
}
그러면 multiple사용자가 여러 옵션을 선택할 수있는 속성이 있는 select 요소의 HTML 마크 업이 렌더링 됩니다.
@model MyViewModel
<select id="EmployeeIds" multiple="multiple" name="EmployeeIds">
<option>Please select one</option>
<option value="1">Shyju</option>
<option value="2">Sean</option>
</select>
다중 선택에서 선택된 옵션 설정
단일 선택과 마찬가지로 EmployeeIds속성 값을 원하는 값의 배열로 설정하십시오.
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "11"},
new SelectListItem {Text = "Tom", Value = "12"},
new SelectListItem {Text = "Jerry", Value = "13"}
};
vm.EmployeeIds= new int[] { 12,13} ;
return View(vm);
}
페이지가 렌더링 될 때 다중 선택 요소에서 Tom 및 Jerry 옵션이 선택됩니다.
ViewBag를 사용하여 항목 목록 전송
옵션 목록을보기에 전달하기 위해 컬렉션 유형 속성을 유지하지 않으려면 동적 ViewBag를 사용하십시오. ( viewbag가 동적이고 코드가 캐치되지 않기 때문에 개인적으로 권장되는 방법은 아닙니다 오타 오류 )
public IActionResult Create()
{
ViewBag.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "1"},
new SelectListItem {Text = "Sean", Value = "2"}
};
return View(new MyViewModel());
}
그리고보기에서
<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
<option>Please select one</option>
</select>
ViewBag를 사용하여 항목 목록 전송 및 선택한 옵션 설정
위와 같습니다. 드롭 다운을 바인딩 할 속성 값을 선택하려는 옵션의 값으로 설정하기 만하면됩니다.
public IActionResult Create()
{
ViewBag.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "1"},
new SelectListItem {Text = "Bryan", Value = "2"},
new SelectListItem {Text = "Sean", Value = "3"}
};
vm.EmployeeId = 2; // This will set Bryan as selected
return View(new MyViewModel());
}
그리고보기에서
<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
<option>Please select one</option>
</select>
항목 그룹화
선택 태그 도우미 방법은 드롭 다운에서 그룹화 옵션을 지원합니다. 액션 메소드에서 Group각각 의 속성 값을 지정 SelectListItem하기 만하면됩니다.
public IActionResult Create()
{
var vm = new MyViewModel();
var group1 = new SelectListGroup { Name = "Dev Team" };
var group2 = new SelectListGroup { Name = "QA Team" };
var employeeList = new List<SelectListItem>()
{
new SelectListItem() { Value = "1", Text = "Shyju", Group = group1 },
new SelectListItem() { Value = "2", Text = "Bryan", Group = group1 },
new SelectListItem() { Value = "3", Text = "Kevin", Group = group2 },
new SelectListItem() { Value = "4", Text = "Alex", Group = group2 }
};
vm.Employees = employeeList;
return View(vm);
}
뷰 코드에는 변화가 없습니다. 선택 태그 헬퍼는 이제 2 개의 optgroup 항목 안에 옵션을 렌더링합니다 .