Статьи

Использование сетки MVC в MVC

Сентябрь 30, 2017

В этом посте мы увидим, как мы можем разработать сетку MVC в нашем приложении MVC . Здесь мы собираемся использовать сетку с именем MVC grid, которая использует bootstrap и jQuery . Сначала мы создадим некоторые динамические данные, используя список, и как только это будет сделано, мы отправим эти данные в сетку MVC. 

Скачать исходный код

Загрузите исходный код здесь: MVC_GRID_IN_MVC.rar

Фон

Я давно работаю с элементами управления Grid. До сих пор я работал с jQX Grid, jQ Grid, jQuery Datatables, сводными таблицами, KO grid и другими. Всегда интересно работать с некоторыми элементами управления. Недавно я работал с сеткой MVC, поэтому я решил поделиться этим опытом.

Создать приложение MVC

Сначала мы начнем с создания приложения MVC. Откройте Visual Studio, затем нажмите Файл-> Создать-> Проект. Назовите свой проект.

Установить MVC Grid

Следующий шаг, который мы собираемся сделать, это установка сетки MVC в наш проект. Для установки щелкните правой кнопкой мыши свое решение и выберите Управление пакетами NuGet.

Название изображения

Выберите пакет NuGet

Теперь вы можете увидеть новое окно. Найдите сетку MVC в окне поиска. И затем нажмите Установить.

Название изображения

Install_MVC_Grid_To_Project

После установки вы увидите, что был добавлен новый справочный файл (GridMVC), и вы также заметили, что созданы два представления (_Grig.cshtml, _GridPager.cshtml) и один файл CSS и несколько сценариев. Теперь мы перейдем к следующему шагу.

зависимости

Как я уже говорил, сетка MVC использует Bootstrap для дизайна. Далее нам нужно установить Bootstrap в наш проект. Для этого снова зайдите в пакеты NuGet и найдите Bootstrap.

Название изображения

Install_Bootstrap_To_Project

Вы можете видеть, что некоторые новые CSS-файлы и скрипты были добавлены в наш проект. Итак, настройка завершена, и теперь нам нужно перейти к кодированию.

Создать контроллер

Теперь мы можем создать новый контроллер, в моем случае я создал контроллер «HomeController». В моем контроллере я собираюсь вызвать действие модели, которое будет возвращать некоторые динамические данные. Смотрите код ниже.

public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            Test t = new Test();
            var myList= t.GetData();
            return View(myList);
        }

    }

Как видите, я создаю экземпляр моей модели Test. Теперь мы создадим наш модельный класс. 

Создать модель

Я создал модельный класс с именем Test. Здесь я создаю некоторые данные динамически с помощью цикла for и присваиваю эти значения списку. Смотрите код ниже.

namespace AsyncActions.Models
{
    public class Test
    {
        public List<Customer> GetData()
        {
            try
            {
                List<Customer> cst = new List<Customer>();
                for (int i = 0; i < 100; i++)
                {
                    Customer c = new Customer();
                    c.CustomerID = i;
                    c.CustomerCode = "CST" + i;
                    cst.Add(c);
                }
                return cst;
            }
            catch (Exception)
            {
                throw new NotImplementedException();
            }

        }
    }
    public class Customer
    {
        public int CustomerID { get; set; }
        public string CustomerCode { get; set; }
    }
}

Как видите, я создаю список типа Customer. Что дальше? Да, вид.

Создать строго типизированное представление

Теперь мы собираемся создать строго типизированное представление.

Название изображения

Create_Strongly_Typed_View

Наше представление готово, поэтому теперь мы можем сделать некоторое кодирование в нашем представлении, чтобы заполнить нашу сетку. Вы готовы? Прежде всего, нужно включить необходимые ссылки на наше представление, что вы можете сделать в файле с именем Layout.cshtml. Здесь я собираюсь добавить эти ссылки непосредственно к представлению.

<link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<link href="~/Content/Gridmvc.css" rel="stylesheet" />
<script src="~/Scripts/gridmvc.min.js"></script>

Добавьте пространство имен сетки

Вы можете добавить пространство имен сетки следующим образом.


@using GridMvc.Html

Чтобы добавить сетку MVC как наше требование, вам нужно добавить коды, как показано ниже:

@Html.Grid(Model).Columns(columns =>
           {
               columns.Add(foo => foo.CustomerID).Titled("Customer ID").SetWidth(50).Sortable(true).Filterable(true);
               columns.Add(foo => foo.CustomerCode).Titled("Customer Code").SetWidth(50).Sortable(true).Filterable(true);
           }).WithPaging(20)

Как видите, мы используем столбцы Customer.CustomerID и Customer.CustomerCode.

Вывод

Название изображения

MVC_Grid_With_Dynamic_Data

Добавить больше функций сетки

Для настройки подкачки мы можем использовать опцию WithPaging (20) .
Чтобы добавить заголовок мы можем использовать свойство Titled .
Чтобы установить ширину, мы можем использовать свойство SetWidth .
Для установки сортировки мы можем использовать свойство Sortable .
Чтобы установить фильтр, мы можем использовать свойство Filterable .

Вы всегда можете увидеть дополнительные опции здесь .

31
Share: