My mvc app is using bootstrap table.
My model is my database table tSSTCodes which is accessed using Entity Framework
@ModelType IEnumerable(Of SupportDiary.tSSTCode)
I have used the same method for other tables and they all work (the table is generated) but this view returns an error:
A circular reference was detected while serializing an object of type 'System.Data.Entity.DynamicProxies.tSSTCode_8DE9547CF85FA0D8C54E713F4E2A7A2104EC7CB828A4B0F29604CE8AE871F8A3'.
The line at which it breaks is....
var tdata = @Html.Raw(Json.Encode(Model));
Model is a simple table. This is the sql to create it;
CREATE TABLE [dbo].[tSSTCodes](
[sstID] [int] IDENTITY(1,1) NOT NULL,
[sRU] [nvarchar](10) NOT NULL,
[sProjectCode] [nvarchar](10) NOT NULL,
[sProjectName] [nvarchar](50) NOT NULL,
[sTaskNo] [nvarchar](10) NOT NULL,
[sTaskName] [nvarchar](50) NOT NULL,
[sRedundant] [bit] NOT NULL CONSTRAINT [DF_tSSTCodes_sRedundant] DEFAULT ((0)),
CONSTRAINT [PK_tSSTCodes] PRIMARY KEY CLUSTERED
(
[sstID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
My Bootstrap Table code is
<table id="table"
data-classes="table table-hover table-condensed"
data-striped="true"
data-toolbar="#toolbar"
data-pagination="true"
data-click-to-select="true"
data-search="true"
data-show-export="true"
data-show-pagination-switch="true"
data-show-toggle="true"
data-show-columns="true" >
<thead>
<tr>
<th data-field="sstID" data-formatter="btnViewFormatter">ID</th>
<th data-field="sRU" >R/U</th>
<th data-field="sProjectCode" >Project Code</th>
<th data-field="sProjectName" >Project Name</th>
<th data-field="sTaskNo" >Task No</th>
<th data-field="sTaskName" >Task Name</th>
<th data-field="sRedundant" data-formatter="trueFalseFormatter" >Redundant</th>
</tr>
</thead>
</table>
And the associated scripts are:
<script type="text/javascript">
var tdata = @Html.Raw(Json.Encode(Model));
console.log(tdata);
var $table = $('#table');
function btnViewFormatter(value) {
return '<a class="btn btn-default btn-sm" href="@Url.Content("~/SSTCodes/Edit?id=")' + value + '" >' + value + '</a>';
}
function trueFalseFormatter(value) {
if (value == true){
return '<span class="glyphicon glyphicon-check"></span>';
} else {
return '<span class="glyphicon glyphicon-unchecked"></span>';
}
}
function getSelectedRow() {
var index = $table.find('tr.success').data('index');
return $table.bootstrapTable('getData')[index];
}
$(function () {
$table.bootstrapTable({
data: tdata,
fixedColumns: true,
fixedNumber: 1,
exportDataType:"all",
exportTypes:['csv', 'txt', 'excel']
});
$table.on('click-row.bs.table', function (e, row, $element) {
$('.success').removeClass('success');
$($element).addClass('success');
});
$table.on('dbl-click-row.bs.table', function (e, row, $element) {
var url = '@Url.Content("~/SSTCodes/Edit?id=")' + getSelectedRow().sstID;
window.navigate(url);
})
});
I cannot figure out what is causing the circular reference... In trying to debug I tried console.log(tdata); placed after the offending line but of course it does not get that far... so I tried console.log(@Html.Raw(Json.Encode(Model))); and got the same error at the console.log line.
UPDATE Links to a possible duplicate of another question are no help. My code was based on generating a new MVC controller using the ADO Entity Frameworks wizard template. This scaffolded a series of CRUD views. All I did then was replace the html table a for each item code with a bootstrap table helper. I have done this with several controllers and they all work.
Any help appreciated.
