mvc3 datatabels and ajax-beginform
- by MIkCode
im trying to send and ajax request and returning the result into a new table
i debugged the req and i can confirm that evry thing is good except the VIEW
the end result is an empty table instead of one row
one more weird thing is if i page source i can see all the table result(more than the one that suppose to)
this is the view:
@model Fnx.Esb.ServiceMonitor.ViewModel.MainModels
@{
ViewBag.Title = "MainSearch";
}
@Html.EditorForModel()
@{
AjaxOptions ajaxOpts = new AjaxOptions
{
UpdateTargetId = "MainTable",
InsertionMode = InsertionMode.Replace,
Url = Url.Action("queryData", "MainSearch"),
};
}
@using (Ajax.BeginForm(ajaxOpts))
{
<div class="container">
<form action="#" method="post">
<div id="mainSearch">
@Html.EditorFor(x => x.MainSearchModel)
</div>
<br />
<br />
<br />
<br />
<div id="advancedSearch">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Advanced Search </a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
@Html.EditorFor(x => x.AdvanceSearchContainerModel)
</div>
</div>
</div>
</div>
</div>
<br />
<br />
<button type="submit" class="btn">
<i class="icon-search"></i> Search
</button>
<button type="reset" class="btn">
<i class="icon-trash"></i> clear
</button>
</form>
<br />
<br />
<br />
<br />
<br />
<br />
<table id="MainTable" cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
<thead>
<tr>
<th>
serviceDuration
</th>
<th>
status
</th>
<th>
ESBLatency
</th>
<th>
serviceName
</th>
<th>
serviceId
</th>
<th>
startTime
</th>
<th>
endTime
</th>
<th>
instanceID
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.MainTableModel)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.serviceDuration)
</td>
<td>
@Html.DisplayFor(modelItem => item.status)
</td>
<td>
@Html.DisplayFor(modelItem => item.ESBLatency)
</td>
<td>
@Html.DisplayFor(modelItem => item.serviceName)
</td>
<td>
@Html.DisplayFor(modelItem => item.serviceId)
</td>
<td>
@Html.DisplayFor(modelItem => item.startTime)
</td>
<td>
@Html.DisplayFor(modelItem => item.endTime)
</td>
<td>
@Html.DisplayFor(modelItem => item.instanceID)
</td>
</tr>
}
</tbody>
</table>
</div>
}
the datatables: javascript options
$('#MainTable').dataTable({
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"bDestroy": true
});
thanks
miki
