Checkboxlist MVC Partial

时间:2017-10-02 20:43:19

标签: c# asp.net-mvc asp.net-mvc-4 asp.net-mvc-partialview

我有以下视图模型代码:

public class TestCheckboxlistParentModel
{
    public TestCheckboxlistParentModel()
    {
        CBL = new TestCheckboxlistModel();
    }
    public TestCheckboxlistModel CBL { get; set; }
}

public class TestCheckboxlistModel
{
    public string TextField { get; set; }
    public IList<string> SelectedFruits { get; set; }
    public IList<SelectListItem> AvailableFruits { get; set; }

    public TestCheckboxlistModel()
    {
        SelectedFruits = new List<string>();
        AvailableFruits = new List<SelectListItem>();
    }
}

控制器:

    public ActionResult TestCheckboxlist()
    {
        var model = new TestCheckboxlistParentModel
        {
            CBL = new TestCheckboxlistModel()
            {
                AvailableFruits = GetFruits()
            }
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult TestCheckboxlist(TestCheckboxlistParentModel model)
    {
        if (ModelState.IsValid)
        {
            // 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 = "1"},
        new SelectListItem {Text = "Pear", Value = "2"},
        new SelectListItem {Text = "Banana", Value = "3"},
        new SelectListItem {Text = "Orange", Value = "4"},
        };
    }

局部视图:

@model Web.ViewModels.TestCheckboxlistModel

<div class="form-group">
    @Html.LabelFor(model => model.TextField)
    <div class="col-md-10">
        @Html.EditorFor(model => model.TextField)
    </div>
</div>

    @foreach (var item in Model.AvailableFruits)
    {
<div class="checkbox">
    <label>
        <input type="checkbox"
               name="@Html.IdFor(p=>p.SelectedFruits)"
               value="@item.Value" /> @item.Text
        </label>
    </div>
    }

视图:

@model Web.ViewModels.TestCheckboxlistParentModel

@{
    ViewBag.Title = "TestCheckboxlist";
    Layout = "~/Views/Shared/_LayoutApplicationDriver.cshtml";
}

@using (Html.BeginForm())
{

    @Html.Partial("TestPartialCheckboxlist", Model.CBL, new ViewDataDictionary { TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "CBL" } })
    <div class="form-group text-center">
        <input type="submit" class="btn btn-primary" value="Submit" />
    </div>
}

问题是SelectedFruits在post方法中始终没有任何元素。如果我不使用嵌套的部分视图,相同的代码可以正常工作。属性TextField适用于Partial

PS。它不是How to make Check Box List in ASP.Net MVC问题的公告。这个问题是我答案的基础。就我而言,我需要在局部视图中使用checkboxlist,它不起作用!

1 个答案:

答案 0 :(得分:2)

您使用name="@Html.IdFor(p => p.SelectedFruits)"生成name="CBL_SelectedFruits",但为了绑定到您的模型,您需要name="CBL.SelectedFruits"(请注意.点,而不是{{1}你可以使用

生成的下划线
_

但是您的代码还存在其他问题。您没有强烈绑定到您的模型,您没有得到验证,当您不需要它时,您为name="@Html.NameFor(p => p.SelectedFruits)" 属性生成IList<SelectListItem>(它可能只是AvailableFruits,最重要的是,如果您返回视图,则用户选中的所有复选框都将丢失(所有复选框都将取消选中)。

更改您的视图模型,以便您可以强烈绑定到您的属性

IList<string> AvailableFruits

和GET方法

public class FruitVM
{
    public string Name { get; set; }
    public bool IsSelected { get; set; }
}
public class ParentVM
{
    public string TextField { get; set; }
    public List<FruitVM> Fruits { get; set; }
}

并在ParentVM model = new ParentVM { Fruits = new List<FruitVM>{ new FruitVM{ Name = "Apple" }, new FruitVM{ Name = "Pear" }, .... } }; return View(model);

中为EditorTemplate创建FruitVM
/Views/Shared/EditorTemplates/FruitVM.cshtml

并在视图中

@model FruitVM
@Html.CheckBoxFor(m => m.IsSelected)
@Html.LabelFor(m => m.IsSelected, Model.Name)

@Html.ParentVM .... @using (Html.BeginForm()) { @Html.LabelFor(m => m.TextField) @Html.EditorFor(m => m.TextField) @Html.EditorFor(m => m.Fruits) <input type="Submit" value="Save" /> } 方法会为集合中的每个项目生成正确的html。

然后在POST方法中,您可以使用

获取所选项目
EditorFor()