AppV_1200x600.jpg
Unser App-V
Buch

- App-V Infrastruktur
- App-V Client
- App-V Sequenzierung
- Tools & Troubelshooting
- PowerShell mit App-V

Image is not available
RZ
Image is not available
Image is not available
Image is not available
Image is not available
Image is not available

Hochwertige Lösungen mit bestem Kundenservice

Terminalserver- und Desktop Umgebungen mit der besten Usability

Schulungen und Workshops

Intuitive individuelle Lösungen

AppXMSIX_1920x600.jpg
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

silder_Simon_a_1920_600.jpg
AppV_mob.jpg
Innovation
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
Samstag, 08. Mai 2021

Sicherheitscode (Captcha)

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

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.