web-dev-qa-db-de.com

Erstellen einer Kontrollkästchenliste in ASP.Net-MVC

Ich habe ein Formular mit einer Liste von Kontrollkästchen. Ein Benutzer kann alle Werte auswählen, keine Werte oder dazwischen. Beispiel:

screenshot of Goal

Ich möchte das Ergebnis als durch Kommas getrennte Liste in die Datenbank schreiben. Im obigen Beispiel "Apple, Banana". Ich bin etwas verwirrt, wie man das Modell dafür erstellt und wie man die Ergebnisse von der Ansicht zum Controller in eine durch Kommas getrennte Liste bringt.

31
PixelPaul

Hier ist ein Beispiel, wie das geht.

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" /> @item.Text
                        </label>
                    </div>
            }
            <div class="form-group text-center">
                <input type="submit" class="btn btn-primary" value="Submit" />
            </div>
        }
    </div>
</body>
</html>

Was sollte in der Post-Aktion zu Folgendem führen:

Post Action

61
Win

Sie können auch jquery verwenden. Es ist nicht erforderlich, Controller oder Aktionen zu ändern. Es wird einfach der ausgewählte Kontrollkästchenwert in der Spalte der Datenbanktabelle als ein durch Komma getrenntes Element eingefügt.

 <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>
1
rinku Choudhary