MVCGrid.Net
A grid for ASP.NET MVC and Bootstrap with ajax paging and sorting. Also has filtering support, export to csv, back button support, and graceful degradation.
The primary goal of this project is to provide the core grid functionality, along with a very simple and easy-to-use client-side API to allow you to easily add the additional front-end interaction you need. You can add it to your project very easily and get it running with minimal effort, but it also has the extensibility to customize when needed.
You configure your grids on app start, and provide a function callback to actually query your data. The library will handle the ajax requests. It will parse and validate the requested options and then pass the QueryOptions to your function to retrieve the data.
public static class MVCGridConfig
{
public static void RegisterGrids()
{
MVCGridDefinitionTable.Add("Filtering", new MVCGridBuilder<Solicitud>()
.WithAuthorizationType(AuthorizationType.AllowAnonymous)
.AddColumns(cols => {
cols.Add("ViewLink").WithSorting(false)
.WithHeaderText("Ver")
.WithHtmlEncoding(false)
.WithValueExpression((p, c)
=> c.UrlHelper.Action("Solicitud", "Home", new { id = p.Id }))
.WithValueTemplate("<a href='{Value}'
><span class='glyphicon
glyphicon-folder-open'></span></a>");
cols.Add("Id").WithHeaderText("Id").WithSorting(true).WithFiltering(true)
.WithValueExpression(p =>
p.Id.ToString());
cols.Add("Titulo").WithHeaderText("Título").WithValueExpression(p =>
p.Titulo)
.WithFiltering(true).WithSorting(true);
cols.Add("FCreacion").WithHeaderText("Fecha de creación").WithValueExpression(p =>
p.FechaCreacion.ToShortDateString())
.WithFiltering(true);
cols.Add("Hit").WithHeaderText("Vistas").WithValueExpression(p =>
p.Hit.ToString())
.WithFiltering(false).WithSorting(false);
cols.Add("Ir").WithSorting(false)
.WithHeaderText("Link")
.WithHtmlEncoding(false)
.WithValueExpression((p, c)
=> p.UrlContenido)
.WithValueTemplate("<a href='{Value}' target='_blank' ><span class='glyphicon
glyphicon-send'></span></a>");
})
.WithSorting(true, "Id")
.WithPaging(true, 10, true, 10)
.WithFiltering(true)
.WithRetrieveDataMethod((context)
=> {
var options = context.QueryOptions;
Solicitud solicitudObj = new Solicitud();
List<Solicitud>
ListSolicitud = new List<Solicitud>();
ListSolicitud =
solicitudObj.Get(Convert.ToInt32(System.Configuration.ConfigurationManager.AppSettings["RowsPerPage"]),
Convert.ToInt32(((options.PageIndex == null) | (options.PageIndex == 0)) ? 1 :
(options.PageIndex + 1)),
(options.SortDirection ==
SortDirection.Unspecified ? "DESC" : options.SortDirection.ToString().Contains("A") ? "ASC" : "DESC"),
options.SortColumnName,
(options.Filters.Count == 0 ? "" : options.Filters.First().Value),
(options.Filters.Count == 0 ? "" : options.Filters.First().Key));
return new QueryResult<Solicitud>()
{
Items = ListSolicitud,
TotalRecords =
ListSolicitud.Count == 0 ? 0 : ListSolicitud.First().TotalVirtual
};
})
);
}
}
----------------------------------------------------------------------
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/MVCGridHandler.axd/script.js"></script>
<script src="~/Scripts/jquery.cookie.js"></script>
<script src="~/Scripts/jquery.masked-input.min.js"></script>
<style type="text/css">
* {
font-family: Arial;
}
.well {
background: #E6E6E6;
}
table {
background: white;
}
</style>
<script type="text/javascript">
function Main() {
$("#MVCGrid_Loading_Filtering").html('<img
src="Images/loading.gif" />');
$(".col-xs-6").each(function () {
if ($(this).text().match('Showing')) {
$(this).text($(this).text().replace("to", "a"));
$(this).text($(this).text().replace("of", "de"));
$(this).text($(this).text().replace("Showing", "Mostrando"));
$(this).text($(this).text().replace("entries", " registros"));
}
});
$("span").each(function () {
if ($(this).text().match('Previous')) {
$(this).text($(this).text().replace("« Previous", "<<"));
} else
if ($(this).text().match('Next »')) {
$(this).text($(this).text().replace("Next »", ">>"));
}
});
$("th").each(function () {
if ($(this).text().match('Ver')) {
$(this).css("width", "10px");
} else if ($(this).text().match('Id')) {
//$(this).css("width",
"50px");
}
});
}
$().ready(function () {
Main();
$(document).ajaxComplete(function () {
Main();
});
});
</script>
