如何在ASP.Net MVC中制作复选框列表
如何在ASP.Net MVC中制作复选框列表
提问于 2016-06-13 03:53:53
我有一个带有复选框列表的表单。用户可以选择所有值、没有值或介于两者之间的任何值。示例：
我想将结果以逗号分隔列表的形式写入数据库。在上面的例子中，"Apple，Banana“。我有点困惑，如何为此创建模型，以及如何将结果从View到Controller转换为逗号分隔的列表？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-06-13 05:04:18
这里有一个如何做到这一点的例子。
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"},
};
}
}Index.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>这将导致Post操作中出现以下结果：
Stack Overflow用户
发布于 2018-09-25 00:29:55
您还可以使用jquery.No来更改任何控制器，或者action.It会简单地将数据库表的列中的选定复选框值作为coma separated.Just添加到View Page中。
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37778489
复制相关文章
相似问题
腾讯云开发者
