Grid.MVC konfiguracja oraz użycie

Posted on

Grid.MVC

Nadszedł czas, by wyświetlić naszych użytkowników systemu. Jako, że jesteśmy leniwi nie chce nam się pisać od podstaw całego zarządzania wyświetlaniem danych, a nie ma wbudowanej ciekawej kontrolki grida w MVC, pobierzemy sobie gotową kontrolkę. Jako, że jej używałem, wiem jakie ma możliwości i przyspieszy moje dzisiejsze zmagania z kodem i to znacznie. Do tego będę miał wbudowane sortowanie użytkowników w JavaScripcie. Nie ma co kombinować, trzeba użyć.

Otwieramy więc managera pakietów NuGet i wpisujemy Grid. Pojawia nam się w polu „Przeglądaj” Grid.MVC, instalujemy go więc dla projektu. Ja używałem Visual Studio 2017, dlatego zaznaczam kwadracik z nazwą mojego projektu i instaluje. Po poprawnej instalacji, przechodzimy na stronę producenta lub znajdujemy tutorial, jak używać kontrolki.

Następnie do głównego widoku _Layout dodajemy JavaScript z kontrolką

<script src="@Url.Content("~/Scripts/gridmvc.min.js")"></script>

oraz using w widoku, by aktywować helper

@using GridMvc.Html

Sprawdzamy działanie grida, wklejając go do widoku

@Html.Grid(Model).Columns(columns =>
 {
 columns.Add(c => c.UserId).Titled("Client ID");
 columns.Add(c => c.Email).Titled("Email");
 }).WithPaging(3).Sortable(true)

Teraz należy podkreślić sukces słynnym „U mnie działa” ;). Trochę szokuje mnie, że nie musiałem zmieniać wysyłanego formatu z kontrolera z Array na Listę.
Czas nadszedł na poprawki wizualne, dodanie kolejnych kolumn, myślę jednak, że każdy sam przygotuje potrzebne mu kolumny. Tym bardziej, że w Razor możemy kliknąć delegat, w tym przypadku c. (następnie kropka) i mamy podpowiedzi, które kolumny chcemy wstawiać w naszego grida.
Miłej zabawy, ja idę w tej chwili, po zakończeniu pewnego etapu, dość ważnego, na obiad.

Poniżej cały kod widoku

@model RTV.Models.Registration[]
@using GridMvc.Html

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<div>
    <h4>Registration</h4>
    <hr />
    <div class="gridContainer">
        @Html.Grid(Model).Columns(columns =>
  {
      columns.Add(c => c.UserId).Titled("Client ID");
      columns.Add(c => c.Email).Titled("Email");
  }).WithPaging(3).Sortable(true)

    </div>
</div>

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *