FSLogix Training
Image is not available
FSLogix Training
Profil- und Office Container
Application Masking
App-V Storage, Terminalserver, Best Practice
Praxisteil mit Terminalservern
15.6.2021 - 16.6.2021
Standartanwendungen
App-V SaS über 20 Standardanwendungen

Alle wichtigen Browser

Wichtige Standardanwendungen

Wöchentlich aktuallisiert

Mit Support

Individuelle Anpassungen sind möglich

Schnell auf Sicherheitslücken reagieren

Bonus: Einige MSIX Pakete für WVD

FSLogix Schulung
FSLogix Training
15.6. - 16.6.2021
App-V Buch
Services
Innovative IT-Lösungen
previous arrow
next arrow
2 minutes reading time (418 words)

SlickGrid ASP.NET, MVC und JSPN Datenzugriff

SlickGrid180x180SlickGrid 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);
        }

 

 

 

Links
Teil 3: Konfiguration von AppDna für ein automatis...
 

Kommentare

Derzeit gibt es keine Kommentare. Schreibe den ersten Kommentar!
Bereits registriert? Hier einloggen
Gäste
Sonntag, 01. August 2021

Sicherheitscode (Captcha)

By accepting you will be accessing a service provided by a third-party external to https://www.nick-it.de/

Nick Informationstechnik GmbH
Dribusch 2
30539 Hannover

+49 (0) 511 165 810 190
+49 (0) 511 165 810 199

infonick-it.de

Newsletter

Anmeldung zum deutschen M.A.D. Newsletter mit Informationen zur Anwendungsvirtualisierung!

@nickinformation Tweets

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.