将 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;

VIEW

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

输出：

Note: As per your scenario I think this would the eligant way to handle this. Other than either of the work around bring us another chanllenge. In my solution you can ignore the CSS part. Here the important and tricky part is @Html.HiddenFor(h => @Model.CheckBoxes[i].ItemID) @Html.HiddenFor(h => @Model.CheckBoxes[i].ItemName) sets htmlAttributes for us.

希望对你有所帮助

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

Using ViewBag with @Html.CheckBoxFor rather than "plain" <input type= "checkbox">

c#

asp.net-mvc

asp.net-core

razor-pages

html-helper