javascript - 填充每行前面的复选框，并使用 json 和 jquery 发送选中/未选中的值和 ID

Question

我想要这样的设计页面

到目前为止我已经这样创建了。我想知道绑定(bind)每行前面的复选框，并使用 json 和 jquery 发送带有 ID 的选中/未选中值

该页面的最后一个代码片段

<div style="width:50%; float:left;text-align:left"><button id="resetborchure" type="button" class="btn btn-warning submit">Reset Brochure</button> </div>
<div style="width:50%; float:left;text-align:right"><button id="createborchure" type="button" class="btn btn-danger submit">Create Brochure</button> </div>

    <script type="text/javascript">

    </script>

    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/bundles/jqueryui")




        <script type="text/javascript">

            var url = '@Url.Action("FetchProductProperties")';
            var editUrl = '@Url.Action("Edit")';

            var type = $('#Type');
            var category = $('#Category');
            var country = $('#Country');
            var product = $('#Product');


            var template = $('#template');
            var table = $('#table');
            $('#search').click(function () {
                table.empty();
                $.getJSON(url, { type: type.val(), category: category.val(), country: country.val(), product: product.val() }, function (data) {
                    $.each(data, function (index, item) {
                        var clone = template.clone();
                        var cells = clone.find('td');
                        cells.eq(0).text(item.ID);
                        cells.eq(1).text(item.Name);
                        table.append(clone.find('tr'));
                    });
                });
            });

            $('#resetborchure').click(function () {
                table.empty();
            });

        </script>


    }

此外，我想要，一旦我检查并单击创建小册子按钮，我想使用 json 发送那些带有 ID 的检查/未检查值

我尝试用每个列出的结果填充复选框 '<td><input type="checkbox" /></td>'里面cells.eq(1).text(item.Name);

如cells.eq(1).text('<td><input type="checkbox" /></td>'+item.Name);但这不起作用

一旦我点击“选择信息”按钮，它就会列出来自 AB_Product_Property 的数据。表，如果我想用每个搜索结果行填充复选框，我还需要在该表中维护 bool 字段吗？我想在不维护 AB_Product_Property 中该 bool 字段的列的情况下执行此操作表

Answer 1

创建一个 View 模型来表示您想要显示/编辑的内容。

public class OptionsVM
{
  public int ID { get; set; }
  public string Name { get; set; }
  public bool IsSelected { get; set; }
}

public class SearchVM
{
  public int Asset { get; set; }
  public SelectList AssetList { get; set; }
  public int Category{ get; set; }
  public SelectList CategoryList { get; set; }
  .... // other properties and SelectLists for the dropdownlists
  public List<OptionsVM> Options { get; set; }
}

并在 GET 方法中，使用 ID 和 Name 属性填充选项

然后在 View 中

@model SearchVM
....
<form>
  @Html.DropDownListFor(m => m.Asset, Model.AssetList)
  ....
  @for(int i = 0; i < Model.Options.Count; i++)
  {
    @Html.HiddenFor(m => m.Options[i].ID)
    @Html.CheckBoxFor(m => m.Options[i].IsSelected)
    @Html.LabelFor(m => m.Options[i].IsSelected, Model.Options[i].Name)
  }
<button type="button" id="createbrochure">Create Brochure</button>

在脚本中

$('#createbrochure').click(function () {
  $.getJSON(url, $('form').serialize(), function (data) {
    ....
  });
})

在 Controller 方法中

public ActionResult CreateBrochure(SearchVM model)
{
  // To get the ID's of all selected options
  IEnumerable<int> selectedOptions = model.Options.Where(o => o.IsSelected).Select(o => o.ID);
  ....
}