SlickGrid ASP.NET, MVC und JSPN Datenzugriff

SlickGrid ist eine erweiterte JavaScript-Netz / GridView oder Tabellenkalkulationskomponente. Wie in dem Beitragsview dargestellt, kann man damit nette "Echtzeit" rasterdarstellungen in einer ASP.NET Webseite erstellen. Hier wird kurs beschrieben, wie mit Visual Studio 2013 und json der Datenzugriff gealisiert wird.

Zu finden ist das Framework auf:

https://github.com/mleibman/SlickGrid/wiki

Leider habe ich lange experimentieren müssen, bis das auch mit JSAON aus dem MVC Controller funktioniert hat. jsonGet() hat nicht so funktioniert, wie es soll. Ich bin inzwischen auf ein anderes Grid umgestiegen, wollte aber den Code für andere veröffentlichen.

Includes in der cshtml Seite: 

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="/~/Content/themes/base/all.css" rel="stylesheet" />
<link href="/~/Content/slick.grid.css" rel="stylesheet" type="text/css" />
<link href="/~/Content/themes/smoothness/jquery-ui.smoothness.css" rel="stylesheet" />
<script src="/~/Scripts/jquery-1.10.2.js"></script>
<script src="/~/Scripts/jquery-ui-1.11.3.js"></script>
<script src="/~/Scripts/jquery.event.drag.js"></script>
<script src="/~/Scripts/SlickGrid/slick.core.js"></script>
<script src="/~/Scripts/SlickGrid/slick.remotemodel.js"></script>
<script src="/~/Scripts/SlickGrid/slick.grid.js"></script>
<script src="/~/Scripts/SlickGrid/slick.formatters.js"></script>
<script src="/~/Scripts/SlickGrid/slick.editors.js"></script>
@{
    var item = Model.FirstOrDefault(i => i.ID == 1);
}

 Im nächsten Schritt das Skript für SlickGrid und die CSS Anpassung

<style>
.slick-header-column.ui-state-default {
    background:none ;
    background-color: #505050 ;
    color: #eeeeee;  
    border: none;  
    padding: 0;
}
</style>



@*#############################################################*@
@*#  Erster funktionierender Grid!       *@
@*#############################################################*@

<script>

    $(".slick-row").click(function () {
        $(this).css("background-color", "#FBB");
    });

    var grid;
    var columns = [
      { id: "id", name: "ID", field: "id", width: 5, resizable: false },
      { id: "farmName", name: "FarmName", field: "farmName" },
      { id: "farmType", name: "FarmType", field: "farmType" }
    ];

    var options = {
        enableCellNavigation: true,
        enableColumnReorder: false,
        forceFitColumns: true
    };

    $(function () {
        var slickdata = [];
        var actionUrl = Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!("GetFarm", "Pro")';

        $.ajax({
            url: actionUrl,
            global: false,
            type: "POST",
            data: "{}",
            contentType: "application/json",
            dataType: "json",
            async: false,
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    slickdata[i] =
                    {
                        id: data[i].ID,
                        farmName: data[i].FarmName,
                        farmType: data[i].FarmTypeID
                    };
                }
            },
            error: function (msg) {
                var errorText = eval('(' + msg.responseText + ')');
                alert('Error : \n--------\n' + errorText.Message);
            }
        });
        grid = new Slick.Grid("#myGrid", slickdata, columns, options);
    });
</script>

Die Integration in die Webseite:

<div id="myGrid" style="width:600px;height:500px;"></div>

 Und abschließend die Funktion im Controller:

        public JsonResult GetFarm()
        {
            int id = 1;
            var dbResult = db.FirstOrDefault(p => p.ID == id).Farms.ToList();
            var resultfarms = (from farms in dbResult select new { farms.ID, farms.FarmName, farms.FarmTypeID });
            return Json(resultfarms, JsonRequestBehavior.AllowGet);
        }