【发布时间】：2017-04-13 00:30:00
【问题描述】：
我在 http://www.c-sharpcorner.com/uploadfile/rahul4_saxena/asp-net-mvc4-showing-data-in-nested-grid-view-using-jquery/ 之后的项目中使用了嵌套网格视图。直到第 2 级它运行良好，但问题是当我添加另一个级别时它给了我一个错误“必须先绑定数据源才能执行此操作。”请帮助我，谢谢
模型视图
public class PackagesVM
{
public Packages packages { get; set; }
public List<Lot> lots { get; set; }
}
地块模型
[Table("Lots")]
public partial class Lot
{
public int id { set; get; }
public string lot_number { set; get; }
public decimal? contracted_amount { set; get; }
public int? pack_id {set;get;}
public DateTime? created_at { set; get; }
public List<Projects> projects { get; set; }
}
控制器
// GET: /Project/
public ActionResult GetPackagesLot()
{
List<PackagesVM> PackagesLotsProjectsVM = new List<PackagesVM>();
using (db)
{
var packs = db.Packages1.OrderBy(a => a.id).ToList();
foreach (var pack in packs)
{
var lo = db.Lots.Where(a => a.pack_id == pack.id).ToList();
foreach (var lot in lo)
{
var proj = db.Projects1.Where(p => p.lot_id == lot.id).ToList();
// PackagesLotsProjectsVM.Add(new PackagesVM { projects = proj });
}
PackagesLotsProjectsVM.Add(new PackagesVM { packages = pack, lots = lo});
}
}
查看
@model IEnumerable<CMIS.Models.PackagesVM>
<div id="main" style="padding: 25px; background-color: white;">
@grid.GetHtml(
htmlAttributes: new { id = "gridT", width = "100%" },
columns: grid.Columns(
//grid.Column("Id", "Pack ID"),
//grid.Column("Name", "Package Name"),
grid.Column("packages.id", "Id"),
grid.Column("packages.name", "Package Name"),
grid.Column("packages.province_id", "ProvinceID"),
grid.Column(header: "Created_at", format: (item) => string.Format("{0:dd-MM-yyyy}", item.packages.created_at)),
grid.Column(format: (item) =>
{
WebGrid subGrid1 = new WebGrid(source: item.Lots);
return subGrid1.GetHtml(
htmlAttributes: new { id = "subT1", width = "100%" },
columns: subGrid1.Columns(
subGrid1.Column("ID", "Id"),
subGrid1.Column("contracted_amount", "contracted_amount"),
//subGrid1.Column("id", "id"),
//subGrid1.Column("lot_number", "lot_number"),
//subGrid1.Column("contracted_amount", "contracted_amount"),
//subGrid1.Column("pack_id", "pack_id"),
//subGrid1.Column("created_at", "created_at"),
subGrid1.Column(format: (subitem) =>
{
WebGrid subGrid2 = new WebGrid(source: subitem.projects);
return subGrid2.GetHtml(
htmlAttributes: new { id = "subT2" },
columns: subGrid2.Columns(
subGrid2.Column("id", "Id"),
subGrid2.Column("db_number", "db_number")
)
);
})
)
);
})
)
)
</div>
脚本
<script>
$(document).ready(function () {
var size = $("#main #gridT > thead > tr >th").size(); // get total column
$("#main #gridT > thead > tr >th").last().remove(); // remove last column
$("#main #gridT > thead > tr").prepend("<th></th>"); // add one column at first for collapsible column
$("#main #gridT > tbody > tr").each(function (i, el) {
$(this).prepend(
$("<td></td>")
.addClass("cc")
.addClass("hoverEff")
.attr('title', "click for show/hide")
);
//Now get sub table from last column and add this to the next new added row
var table = $("table", this).parent().html();
//add new row with this subtable
$(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='" + (size - 1) + "'>" + table + "</td></tr>");
$("table", this).parent().remove();
// ADD CLICK EVENT FOR MAKE COLLAPSIBLE
$(".hoverEff", this).on("click", function () {
$(this).parent().closest("tr").next().slideToggle(100);
$(this).toggleClass("dd cc");
});
});
//by default make all subgrid in collapse mode
$("#main #gridT > tbody > tr td.cc").each(function (i, el) {
$(this).toggleClass("dd cc");
$(this).parent().closest("tr").next().slideToggle(100);
});
var size = $("#main #subT1 > thead > tr >th").size(); // get total column
$("#main #subT1 > thead > tr >th").last().remove(); // remove last column
$("#main #subT1 > thead > tr").prepend("<th></th>"); // add one column at first for collapsible column
$("#main #subT1 > tbody > tr").each(function (i, el) {
$(this).prepend(
$("<td></td>")
.addClass("cc")
// .addClass("ee")
.addClass("hoverEff")
.attr('title', "click for show/hide")
);
//Now get sub table from last column and add this to the next new added row
var table = $("table", this).parent().html();
//add new row with this subtable
$(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='" + (size - 1) + "'>" + table + "</td></tr>");
$("table", this).parent().remove();
// ADD CLICK EVENT FOR MAKE COLLAPSIBLE
$(".hoverEff", this).on("click", function () {
$(this).parent().closest("tr").next().slideToggle(100);
$(this).toggleClass("ddd cc");
});
});
//by default make all subgrid in collapse mode
$("#main #subT1 > tbody > tr td.cc").each(function (i, el) {
$(this).toggleClass("ddd cc");
$(this).parent().closest("tr").next().slideToggle(100);
});
});
</script>
请帮助我。谢谢
【问题讨论】：
-
我找到了解决办法，
标签： c# asp.net-mvc-4 gridview