添加选中的复选框以在ViewModel中列出

时间:2014-02-19 08:40:23

标签: c# asp.net-mvc model-view-controller checkbox

我正在开发一个C#应用程序,用户可以在其中发布笑话。 这些笑话可以有多个类别,如单线或夹头诺里斯。 因此,在我创建一个笑话的视图中,我有多个类别的复选框。

目前,当我创建一个笑话时,我必须提供一个列表参数,其中包含所有类别。

查看:

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)

<fieldset>
    <legend>CreateJokeViewModel</legend>

    <div class="editor-field">
        @Html.EditorFor(model => model.UserId)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.JokeTitle)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.JokeTitle)
        @Html.ValidationMessageFor(model => model.JokeTitle)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.JokeText)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.JokeText)
        @Html.ValidationMessageFor(model => model.JokeText)
    </div>


    <div class="editor-label">
        @Html.LabelFor(model => model.categories)
    </div>
    <div class="editor-field">
        <table>
    @using (var db = new Witze.Context())
    {

        foreach (Witze.Categorie categorie in db.Categories)
        {
            <tr>
                <td>@Html.CheckBox(categorie.Name)</td>
                <td>@Html.Label(categorie.Name)</td>
            </tr>
        }
    }

        </table>
    </div>
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>

}

视图模型:

[HiddenInput(DisplayValue = false)]
public int UserId { get; set; }

[Required]
public string JokeTitle { get; set; }

[Required]
public string JokeText { get; set; }

[Required]
public HashSet<Categorie> categories { get; set; }

控制器:

public ActionResult Create(CreateJokeViewModel viewModel)
{
    List<string> list = new List<string> { "ThisIsACategorie" };
    var user = db.User.Single(u => u.UserId == viewModel.UserId);
    if (ModelState.IsValid)
    {
        Logik.CreateJoke(viewModel.JokeTitle, viewModel.JokeText, user.UserId, list);
        db.SaveChanges();
        return RedirectToAction("witze", "user", new { userid = viewModel.UserId });
    }
    return View(viewModel);
}

所以我希望所有选中的类别都在列表中。 我对MVC很新,我似乎找不到答案...

由于

2 个答案:

答案 0 :(得分:3)

  

所以我希望所有选中的类别都在列表中。

ViewModel几乎没有变化,您可以在提交时获取选中的值,如下所示 -

让你的模型像这样 -

public class CheckboxlistViewModel
{
    public int UserId { get; set; }
    public string JokeTitle { get; set; }
    public string JokeText { get; set; }
    public List<Categorie> categories { get; set; }
}

public class Categorie
{
    public string Category { get; set; }
    public bool IsSelected { get; set; }
}

观察到有一个属性IsSelected与Categorie ViewModel相关联。此属性可帮助我们在提交表单时保留复选框选择。

现在呈现表单的操作如下 -

    public ActionResult Index()
    {
        CheckboxlistViewModel model = new CheckboxlistViewModel();
        model.categories = new List<Categorie>();
        model.categories.Add(new Categorie() { Category = "Chuck Norris", IsSelected = false });
        model.categories.Add(new Categorie() { Category = "One Liner", IsSelected = false });
        return View(model);
    }

表格如下所示 -

    @model MVC.Controllers.CheckboxlistViewModel

    @{
        ViewBag.Title = "Index";
    }

    <h2>Index</h2>

    <div>
    @using (Html.BeginForm("Submit", "Checkboxlist",FormMethod.Post))
    {
        for (int i = 0; i < Model.categories.Count; i++)
        {
            @Html.HiddenFor(m => m.categories[i].Category)
            @Html.CheckBoxFor(m => m.categories[i].IsSelected) @Html.Label(Model.categories[i].Category)
        }
        <input type="submit" value="Submit"/>
    }
    </div>

现在当我们点击提交按钮时,它会点击动作 -

    public ActionResult Submit(CheckboxlistViewModel model)
    {
        return null;
    }

如果我们检查返回的模型,我们将选中的复选框作为布尔值,如下所示。 enter image description here

注意:如果要保留Checkbox文本,请在for循环中为Category字段添加hiddenfield。

答案 1 :(得分:1)

我在这个月前工作过,我想要你想要的东西,我找到了解决方案。去这个网站它有完美的解决方案  http://www.overpie.com/jquery/articles/jquery-get-selected-checkboxes

如果有效,我的答案是:)