如何在ASP.Net MVC中制作复选框列表

Question

如何在ASP.Net MVC中制作复选框列表

Pix*_*aul 43 c# asp.net asp.net-mvc

我有一个带有复选框列表的表单.用户可以选择所有值,没有值或其间的任何值.例:

目标的截图

我想以逗号分隔列表的形式将结果写入数据库.在上面的例子中,"Apple,Banana".我有点困惑如何为此创建模型以及如何将View到Controller的结果转换为以逗号分隔的列表？

Answer 1

Win*_*Win 83

这是一个如何做到这一点的例子.

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>();
    }
}

Run Code Online (Sandbox Code Playgroud)

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"},
        };
    }
}

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

哪个应该在Post Action中产生以下结果:

发布行动

非常好的答案,它只是缺少"选中/检查"处理 (3认同)
此外,每当`ModelState.IsValid`为'false`时,在重新保护索引视图时,`SelectedFruits` /复选框将不会恢复. (3认同)
@Guillaume 您可以使用此代码进行检查处理`<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>` (3认同)
@AlexandreRibeiro我们可以使用`var selectedFruits = Request.Form.GetValues（“ SelectedFruits”）;`来获得那些复选框。 (2认同)

归档时间：	9 年，2 月前
查看次数：	69414 次
最近记录：	6 年，3 月前