반응형
ASP.Net MVC에서 확인란 목록을 만드는 방법
확인란 목록이 있는 양식이 있습니다.사용자는 모든 값을 선택하거나, 값을 선택하지 않거나, 그 사이의 값을 선택할 수 있습니다.예:
저는 데이터베이스에 쉼표로 구분된 목록으로 결과를 작성하고 싶습니다.위의 예에서는 "사과, 바나나"입니다.이에 대한 모델을 만드는 방법과 View에서 Controller로 결과를 쉼표로 구분된 목록으로 가져오는 방법이 조금 헷갈립니다.
여기 그것을 하는 방법의 예가 있습니다.
HomeModel.cs
public class HomeModel
{
public IList<string> SelectedFruits { get; set; }
public IList<SelectListItem> AvailableFruits { get; set; }
public HomeModel()
{
SelectedFruits = new List<string>();
AvailableFruits = new List<SelectListItem>();
}
}
HomeController.cs
public class HomeController : Controller
{
public ActionResult Index()
{
var model = new HomeModel
{
AvailableFruits = GetFruits()
};
return View(model);
}
[HttpPost]
public ActionResult Index(HomeModel model)
{
if (ModelState.IsValid)
{
var fruits = string.Join(",", model.SelectedFruits);
// Save data to database, and redirect to Success page.
return RedirectToAction("Success");
}
model.AvailableFruits = GetFruits();
return View(model);
}
public ActionResult Success()
{
return View();
}
private IList<SelectListItem> GetFruits()
{
return new List<SelectListItem>
{
new SelectListItem {Text = "Apple", Value = "Apple"},
new SelectListItem {Text = "Pear", Value = "Pear"},
new SelectListItem {Text = "Banana", Value = "Banana"},
new SelectListItem {Text = "Orange", Value = "Orange"},
};
}
}
인덱스.cshtml
@model DemoMvc.Models.HomeModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
@using (Html.BeginForm("Index", "Home"))
{
foreach (var item in Model.AvailableFruits)
{
<div class="checkbox">
<label>
<input type="checkbox"
name="SelectedFruits"
value="@item.Value"
@if(Model.SelectedFruits.Contains(item.Value))
{
<text> checked </text>
}
/> @item.Text
</label>
</div>
}
<div class="form-group text-center">
<input type="submit" class="btn btn-primary" value="Submit" />
</div>
}
</div>
</body>
</html>
이는 사후 조치 내에서 다음과 같은 결과를 초래합니다.
jquery 사용도 할 수 있습니다.컨트롤러나 작업을 변경할 필요가 없습니다.그러면 데이터베이스 테이블의 열에 선택한 확인란 값이 코마로 구분되어 추가됩니다.보기 페이지에 코드를 추가하기만 하면 됩니다.
<div class="editor-field">
@Html.HiddenFor(model => model.hobbies, new { htmlAttributes = new { id = "hobbies" } })
Hobbies :
<input type="checkbox" id="r" onchange="getSelected()" value="Reading" />
Reading
<input id="w" type="checkbox" value="Writing" onchange="getSelected()" />
Writing
<script>
function getSelected() {
var sList = "";
$('input[type=checkbox]').each(function () {
if (this.checked) {
sList += this.value + ",";
}
});
$("#hobbies").val(sList);
}
</script>
@Html.ValidationMessageFor(model => model.hobbies)
</div>
언급URL : https://stackoverflow.com/questions/37778489/how-to-make-check-box-list-in-asp-net-mvc
반응형
'bestsource' 카테고리의 다른 글
| 각 그룹에 대한 상위 결과 가져오기(Oracle) (0) | 2023.06.28 |
|---|---|
| 새로운 마이그레이션의 중복된 변경 사항 (0) | 2023.06.23 |
| 기본 쿼리 및 하위 쿼리에 동일한 별칭 사용 (0) | 2023.06.23 |
| Oracle: ORDER BY 절과 함께 ROWNUM을 사용하여 테이블 열 업데이트 (0) | 2023.06.23 |
| .firebase/hosting의 목적은 무엇입니까?ALFANUM.캐시 (0) | 2023.06.23 |