将 ViewBag 与 @Html.CheckBoxFor 一起使用，而不是“plain”<input type="checkbox">

Question

已经在View 中使用了@Html.CheckBoxFor，我计划在同一个View 中将Tag Helper 与ViewBag 一起使用，以规避一些错误（例如变量定义）：

型号

   public class test
    {
      public int ItemID { get; set; }
      public string ItemName { get; set; }
      public bool IsAvailable { get; set; }
    }

控制器

List<test> ItemList = new List<test>();
         ItemList.Add(new test {ItemID=1, ItemName="apple", IsAvailable = false});
         ItemList.Add(new test {ItemID=2, ItemName="mango", IsAvailable = false});
         ItemList.Add(new test {ItemID=3, ItemName="stuck", IsAvailable = false});
         ItemList.Add(new test {ItemID=4, ItemName="blocked", IsAvailable = false});
         ItemList.Add(new test {ItemID=5, ItemName="help:(", IsAvailable = false});
         ViewBag.ItemList = ItemList;

查看

<table>
      @foreach (var item in ViewBag.ItemList)
           {
            <tr><td>
           <input type= "checkbox" id = "Check_@item.ItemID" checked="@item.IsAvailable" 
           onclick="CheckOnlyOneCheckBox(this);"/>
           <label for="Check_@item.ItemID">@item.ItemName</label>
           </tr>
           }
 </table>

遇到了2个主要问题：

(a) 无法使用 submit button 检索到 selected box 的值

   foreach (var item in ViewBag.ItemList)
         {
           if (item.IsCheck)
              {
                var zz = item.ItemName;
               }                     
          }     

(b) 使用<input type= "checkbox"> 显示的ItemName 的格式看起来与使用@Html.CheckBoxFor 从先前的checkbox list 获得的格式略有不同（例如粗体）。

因此，在使用 @Html.CheckBoxFor 和 ViewBag 方面的任何帮助将不胜感激。

编辑

@Md Farid Uddin Kiron

主要问题在于 checkbox 列表已经通过以下方式定义（在同一个 View 中）：

List<test> chk = new List<test>();
          chk.Add(new test() {ReferalTypeId=1, ReferalTypeName = "box1",
IsReferalCheck=false});
          chk.Add(new test() {ReferalTypeId=2, ReferalTypeName = 
"box2", IsReferalCheck=false});
          chk.Add(new test() {ReferalTypeId=3, ReferalTypeName = 
"Other", IsReferalCheck=false});

 CtrList chklist = new CtrList(); // Ctrl being a public class defined 
                                 // in MODEL
 chklist.reflist = chk;  
 return View(chklist);

根据经验，我最终遇到了一种情况，我无法在 public IActionResult Index() 中定义另一个 checkbox 列表返回除 chklist 以外的其他内容，因为在循环时不会定义变量（例如 list）它来自View。

因此，我不得不使用：ViewBag，使我能够毫无问题地将变量从Model 传递到View。如果没有 binding 它，这种有效的解决方法会引发另一个问题，我正在调查的最后解决方案包括：

(a)looping 通过checkbox；

(b) 通过ViewBag 识别所选值；

(c) 然后找到一种方法将选定的变量从View 传递给Controller。但是，我不得不承认，后一种方法看起来并不理想。

最好的

Answer 1

我对您的方案进行了很多研究。您计划的方式无法很好地执行，因为我们无法在CheckBoxFor 上设置htmlAttributes，因此我们无法从CheckBoxFor 中检索值，因为您可能知道要从提交的项目中获取值，我们需要设置htmlAttributes就像id class 或name 一样在上面

因此，考虑到您的情况，我为您建立的最简单的解决方案如下：

您的预定义模型：

public class CheckBoxTestModel
    {
        public int ItemID { get; set; }
        public string ItemName { get; set; }
        public bool IsAvailable { get; set; }
    }

查看模型以引导查看查看：

 public class CheckBoxFromViewBagModel
    {
        public List<CheckBoxTestModel> CheckBoxes { get; set; }
        
    }

控制器加载：

 public IActionResult CheckboxforFromViewBag()
        {
            var checkBoxList = new List<CheckBoxTestModel>()
            {
                new CheckBoxTestModel() { ItemID=1,ItemName="apple", IsAvailable = false },
                new CheckBoxTestModel() { ItemID=2,ItemName="mango", IsAvailable = false },
                new CheckBoxTestModel() { ItemID=3,ItemName="stuck", IsAvailable = false },
                new CheckBoxTestModel() { ItemID=4,ItemName="blocked", IsAvailable = false },
                new CheckBoxTestModel() { ItemID=5,ItemName="help:(", IsAvailable = false },


            };

            var model = new CheckBoxFromViewBagModel();
            model.CheckBoxes = checkBoxList;
            return View(model);
        }

加载复选框时查看：

@model CheckBoxFromViewBagModel
@{
    ViewData["Title"] = "CheckboxforFromViewBag";
}
<h4>Load CheckBox From ViewModel & Submit value to Controller wtih Selected Value</h4>

<hr />
<style>
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }

    td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }
</style>
@using (Html.BeginForm("SubmitValueFromCheckBoxList", "UserLog"))
{
    <table class="table-bordered">
        <tr>
            <th>Item Name</th>
            <th>Is Checked</th>

        </tr>

        @for (int i = 0; i < Model.CheckBoxes.Count; i++)
        {
            <tr>

                <td> @Model.CheckBoxes[i].ItemName</td>
                <td> @Html.CheckBoxFor(r => Model.CheckBoxes[i].IsAvailable)</td>
                @Html.HiddenFor(h => @Model.CheckBoxes[i].ItemID)
                @Html.HiddenFor(h => @Model.CheckBoxes[i].ItemName)

            </tr>

        }
    </table>
    <br />
    <input id="Button" type="submit" value="Submit To Controller" class="btn btn-primary" />
}

控制器提交值时：

        [HttpPost]
        public IActionResult SubmitValueFromCheckBoxList(CheckBoxFromViewBagModel checkBoxViewModel)
        {
            var checkBoxValueFromView = checkBoxViewModel;
            return Ok(checkBoxValueFromView);
        }

输出：

注意：根据您的情况，我认为这是处理此问题的优雅方式。除了周围的任何工作给我们带来另一个 挑战。在我的解决方案中，您可以忽略 CSS 部分。这里重要和棘手的部分是@Html.HiddenFor(h => @Model.CheckBoxes[i].ItemID) @Html.HiddenFor(h => @Model.CheckBoxes[i].ItemName) 为我们设置了htmlAttributes。

希望对你有帮助。