I create an application using asp mvc razor + mvc grid. My problem is : i have one view that contain multiple action that return partial view, in each partial view there is a grid that display the data. I am using mvc contrib grid which support paging and sorting.
My view (index.cshtml) :
<div class="row-fluid">
<div id="formations" class="control-group">
@Html.Action("Formations")
</div>
<div id="pools" class="control-group">
@Html.Action("Pools")
</div>
<div id="zones" class="control-group">
@Html.Action("Zones")
</div>
Formations action :
public ActionResult Formations(GridSortOptions sort, int? page, string filter = "all")
{
IPagination<StratUnitVo> pagination = ....
return PartialView("_Formations", pagination);
}
Partial View _Formations :
@Html.Grid(Model).Sort(ViewData["sort"] as GridSortOptions).Columns(col =>
{
col.For(p => Html.ActionLink(p.LongName, "EditFormation", "Stratigraphy", new { id = p.Id }, null).ToHtmlString()).Encode(false).Named(Locale.Name).SortColumnName("LongName");
col.For(p => p.FormCode).Named(Locale.Code);
col.For(p => p.ReferenceStratUnit.LongName).Named(Locale.ReferenceFormation);
}).Attributes(@class => "table table-condensed table-striped table-hover")
@if (Model.Count() > 0)
{
@Html.Raw(@Html.Pager(Model)));
}
Other action and view is most like sample above (just difference in the model data). My problem is :
How can i fix that ?
Thanks!
Well, I just solved my problem like this :
For paging : add new parameter for each action called 'type' and validate based on the parameter.
public ActionResult Formations(GridSortOptions sort, int? page, string type, string filter = "all")
{
if (type != null && !type.Equals("Formation")) page = 1;
IPagination<StratUnitVo> pagination = ......
return PartialView("_Formations", pagination);
}
For sorting : use ajax sort for mvc grid :
$(function () {
ajaxSort('pools', 'Stratigraphy', 'Pools');
ajaxSort('formations', 'Stratigraphy', 'Formations');
ajaxSort('zones', 'Stratigraphy', 'Zones');
});
function ajaxSort(tableId, controllerName, actionName) {
$(document).on('click', '#' + tableId + ' > table > thead > tr > th > a', (function () {
// store the href attribute, will get the column and direction parameter
var href = $(this).attr('href');
// mvc grid sort url is : 'http\\controllerName\\actionName?Column=columnname&Direction=[Ascending|Descending]
var temp = href.split('&');
// retrieve the column name
var column = temp[0].split('=')[1];
// retrieve sort direction
var direction = temp[1].split('=')[1];
// retrieve column header
var columnHeader = $(this).text();
// remove the href attribute, prevent postback
$(this).removeAttr('href');
// use ajax to sort
$.ajax({
url: '/' + controllerName + '/' + actionName,
data: { 'Column': column, 'Direction': direction },
dataType: 'html',
success: function (data) {
$('#' + tableId).html(data);
columnHeader = columnHeader.replace('\u25B2', '').replace('\u25BC', '');
// show up down arrow
// \u25B2 and \u+25BC is the unicode character for up/down triangle (arrow) to display in HTML
var column = $('#' + tableId + ' > table > thead > tr > th > a:contains(' + columnHeader + ')');
if(direction == 'Ascending')
column.text(columnHeader + "\u25B2");
else {
column.text(columnHeader + "\u25BC");
}
},
});
}));
}