这样</p> <p><a href="https://i.stack.imgur.com/ah3OH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ah3OH.png" alt="enter image description here"></a></p> <p>了填充每一行的复选框前和发送使用JSON和jQuery

Question

检查/非检查的值和ID我想设计网页，以我现在这样的创建。我想知道绑定复选框前面的每一行和使用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检查/未选中的值使用json

我试图把填充一个复选框与012列表中的每个结果'<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表，如果我想填充复选框与每个搜索结果排我需要保持布尔该表中的字段也是??我想要在AB_Product_Property表中没有维护列的那个布尔字段

Answer 1

您可以为复选框创建新列而不是附加复选框到名称列。

比你可以设置类到该复选框，并使用jquery获取选中或未选中复选框的值。

Answer 2

创建视图模型以表示要显示/编辑的内容。

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性质

然后在视图

@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) { 
    .... 
    }); 
}) 

和在控制器方法

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