{"id":1298,"date":"2024-05-24T16:49:30","date_gmt":"2024-05-24T16:49:30","guid":{"rendered":"https:\/\/dijix.com.ua\/blog\/?p=1298"},"modified":"2024-05-27T13:22:23","modified_gmt":"2024-05-27T13:22:23","slug":"crud-operaczii-v-blazor-server-side","status":"publish","type":"post","link":"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/","title":{"rendered":"Crud \u041e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 Blazor Server Side (SSR )"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">\u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435, \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 <\/span><b>CRUD<\/b><span style=\"font-weight: 400;\"> \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0435\u0439 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 <\/span><b>Blazor Server<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0431\u0430\u0437\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445 <\/span><b>AnimalsDb<\/b><span style=\"font-weight: 400;\">, \u0430 \u0435\u0433\u043e \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0432\u044b\u0448\u0435.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u00ab<\/span><b>Scaffolding Tools<\/b><span style=\"font-weight: 400;\">\u00bb.<\/span><\/p>\n<p><b>Scaffolding Tools<\/b><span style=\"font-weight: 400;\"> &#8212; \u043c\u043e\u0449\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 \u0434\u043b\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u043b\u0438 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0434\u0430\u043d\u043d\u044b\u0445. \u041e\u043d\u0438 \u0443\u043f\u0440\u043e\u0449\u0430\u044e\u0442 \u0438 \u0443\u0441\u043a\u043e\u0440\u044f\u044e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 CRUD (Create, Read, Update, Delete) \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u043c\u0438.<\/span><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_53 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\r\n<div class=\"ez-toc-title-container\">\r\n<p class=\"ez-toc-title \" >\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/p>\r\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\" role=\"button\"><label for=\"item-69dd27a8ee2ef\" ><span class=\"\"><span style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input aria-label=\"Toggle\" aria-label=\"item-69dd27a8ee2ef\"  type=\"checkbox\" id=\"item-69dd27a8ee2ef\"><\/a><\/span><\/div>\r\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/#%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B8_%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B0\" title=\"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/#%D0%9C%D0%BE%D0%B4%D0%B5%D0%BB%D1%8C_%D0%B8_%D0%A0%D0%B5%D0%BF%D0%BE%D0%B7%D0%B8%D1%82%D0%BE%D1%80%D0%B8%D0%B9\" title=\"\u041c\u043e\u0434\u0435\u043b\u044c \u0438 \u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439\">\u041c\u043e\u0434\u0435\u043b\u044c \u0438 \u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/#%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B1%D0%B0%D0%B7%D1%8B_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85\" title=\"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/#%D0%92%D0%B0%D0%BB%D0%B8%D0%B4%D0%B0%D1%86%D0%B8%D1%8F_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85\" title=\"\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445\">\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/#%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0_%D0%BE%D0%BF%D0%BE%D0%B2%D0%B5%D1%89%D0%B5%D0%BD%D0%B8%D1%8F\" title=\"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u043f\u043e\u0432\u0435\u0449\u0435\u043d\u0438\u044f\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u043f\u043e\u0432\u0435\u0449\u0435\u043d\u0438\u044f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/#%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0_%D0%B4%D0%BB%D1%8F_%D0%BD%D0%B0%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F_%D1%82%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D1%8B%D0%BC%D0%B8_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%BC%D0%B8\" title=\"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u043d\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u043d\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/#%D0%9F%D0%B0%D0%B3%D0%B8%D0%BD%D0%B0%D1%86%D0%B8%D1%8F_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0_QuickGrid\" title=\"\u041f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 QuickGrid\">\u041f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 QuickGrid<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/#%D0%A1%D0%BE%D1%80%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%BA%D0%B0_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0_QuickGrid\" title=\"\u0421\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 QuickGrid\">\u0421\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 QuickGrid<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/#%D0%A4%D0%B8%D0%BB%D1%8C%D1%82%D1%80%D0%B0%D1%86%D0%B8%D1%8F_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0_QuickGrid\" title=\"\u0424\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 QuickGrid\">\u0424\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 QuickGrid<\/a><ul class='ez-toc-list-level-4'><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/#%D0%92%D1%8B_%D1%85%D0%BE%D1%82%D0%B8%D1%82%D0%B5_%D0%BD%D0%B0%D1%83%D1%87%D0%B8%D1%82%D1%81%D1%8F_%D0%BF%D0%B8%D1%81%D0%B0%D1%82%D1%8C_%D0%BA%D0%BE%D0%B4_%D0%BD%D0%B0_%D1%8F%D0%B7%D1%8B%D0%BA%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F_C\" title=\"\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043d\u0430\u0443\u0447\u0438\u0442\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f C#?\">\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043d\u0430\u0443\u0447\u0438\u0442\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f C#?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\r\n\n<h3 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B8_%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0_%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B0\"><\/span><b>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">\u0427\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 <\/span><b>Animals<\/b><span style=\"font-weight: 400;\">, \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 Visual Studio \u0438 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0432 \u043c\u0435\u043d\u044e <\/span><b>File<\/b><span style=\"font-weight: 400;\"> (\u0424\u0430\u0439\u043b) &#8212; <\/span><b>New Project<\/b><span style=\"font-weight: 400;\"> (\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u041f\u0440\u043e\u0435\u043a\u0442). \u0423\u043a\u0430\u0436\u0438\u0442\u0435 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0430 <\/span><b>Blazor Web App<\/b><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0412\u0432\u0435\u0434\u0438\u0442\u0435 <\/span><b>Animals,<\/b><span style=\"font-weight: 400;\"> \u0432 \u043f\u043e\u043b\u0435 <\/span><b>Name<\/b><span style=\"font-weight: 400;\">, \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0443\u043a\u0430\u0436\u0438\u0442\u0435 <\/span><b>.Net 8.0<\/b><span style=\"font-weight: 400;\">, <\/span><b>Intractive render mode<\/b><span style=\"font-weight: 400;\">: <\/span><b>Server<\/b><span style=\"font-weight: 400;\">, \u043e\u0442\u043c\u0435\u0442\u0438\u043c checkbox \u0434\u043b\u044f \u043f\u0443\u043d\u043a\u0442\u0430 \u2013 <\/span><b>Include sample pages<\/b><span style=\"font-weight: 400;\">. \u041d\u0430\u0436\u043c\u0438\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 <\/span><b>Create<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1299 size-full\" src=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1.jpg\" alt=\" Crud \u041e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 Blazor Server Side\" width=\"766\" height=\"488\" srcset=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1.jpg 766w, https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-300x191.jpg 300w\" sizes=\"auto, (max-width: 766px) 100vw, 766px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442 (Crtl + F5), \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0432\u0441\u0435 \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1300\" src=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-1.jpg\" alt=\"blazor ss\" width=\"766\" height=\"392\" srcset=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-1.jpg 766w, https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-1-300x154.jpg 300w\" sizes=\"auto, (max-width: 766px) 100vw, 766px\" \/><\/p>\n<h3 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"%D0%9C%D0%BE%D0%B4%D0%B5%D0%BB%D1%8C_%D0%B8_%D0%A0%D0%B5%D0%BF%D0%BE%D0%B7%D0%B8%D1%82%D0%BE%D1%80%D0%B8%D0%B9\"><\/span><b>\u041c\u043e\u0434\u0435\u043b\u044c \u0438 \u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">\u041c\u043e\u0434\u0435\u043b\u044c \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f <\/span><b>Animals<\/b><span style=\"font-weight: 400;\"> \u0431\u0443\u0434\u0435\u0442 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u0441\u043f\u0438\u0441\u043a\u0435 \u0444\u0438\u043b\u044c\u043c\u043e\u0432. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043a\u043b\u0430\u0441\u0441 <\/span><b>Animals<\/b><span style=\"font-weight: 400;\">. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043b\u0430\u0441\u0441 \u0441 Entity Framework Core (EF Core) \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0431\u0430\u0437\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445. EF Core &#8212; \u044d\u0442\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u0440\u0435\u043b\u044f\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f (ORM), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043a\u043e\u0434 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0434\u0430\u043d\u043d\u044b\u043c. \u041a\u043b\u0430\u0441\u0441\u044b \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u043d\u0435 \u0438\u043c\u0435\u044e\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 EF Core. \u041e\u043d\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0432 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043f\u0430\u043f\u043a\u0443 <\/span><b>Models<\/b><span style=\"font-weight: 400;\"> \u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432 \u043d\u0435\u0435 \u0444\u0430\u0439\u043b \u043a\u043b\u0430\u0441\u0441\u0430 \u043f\u043e \u0438\u043c\u0435\u043d\u0438 <\/span><b>Animal.cs<\/b><span style=\"font-weight: 400;\"> \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/span><\/p>\n<pre class=\"lang:default decode:true\">public class Animal\r\n{\r\n    public int Id { get; set; }\r\n    public string Name { get; set; }\r\n    public string Gender { get; set; }\r\n    public double Weight { get; set; }\r\n    public AnimalType AnimalType { get; set; }\r\n    public DateTime CreatedAt { get; set; } = DateTime.Now;\r\n }\r\n\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">\u0417\u0430\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043a\u043b\u0430\u0441\u0441 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <\/span><b>AnimalType.cs,<\/b><span style=\"font-weight: 400;\"> \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435:<\/span><\/p>\n<pre class=\"lang:default decode:true \">public enum AnimalType\r\n{\r\n    Mammals,\r\n    Reptiles,\r\n    Amphibians,\r\n    Birds,\r\n    Insects,\r\n    Fish\r\n}\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">\u041f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f scaffolding.\u00a0 \u041d\u0430\u0436\u043c\u0435\u043c \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043b\u0430\u0432\u0438\u0448\u0435\u0439 \u043f\u043e \u043f\u0430\u043f\u043a\u0435 <\/span><b>Components<\/b><span style=\"font-weight: 400;\"> \/ <\/span><b>Pages <\/b><span style=\"font-weight: 400;\">\u0438 \u043d\u0430\u0436\u043c\u0435\u043c \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043b\u0430\u0432\u0438\u0448\u0435\u0439 \u043c\u044b\u0448\u043a\u0438 <\/span><b>Add<\/b><span style=\"font-weight: 400;\"> \u2013 <\/span><b>New Scaffoldet Item<\/b><span style=\"font-weight: 400;\"> \u2013 <\/span><b>Razor Components using Entity Framework (CRUD)<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1302\" src=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-2.jpg\" alt=\"blazor with ef core crud\" width=\"777\" height=\"212\" srcset=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-2.jpg 777w, https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-2-300x82.jpg 300w, https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-2-768x210.jpg 768w\" sizes=\"auto, (max-width: 777px) 100vw, 777px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043e\u043a\u043d\u0435, \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0443\u043d\u043a\u0442\u044b:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1303\" src=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-3.jpg\" alt=\"blazor component with crud\" width=\"776\" height=\"300\" srcset=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-3.jpg 776w, https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-3-300x116.jpg 300w, https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-3-768x297.jpg 768w\" sizes=\"auto, (max-width: 776px) 100vw, 776px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0434\u0430\u043d\u043d\u0430\u044f \u043e\u043f\u0446\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 <\/span><b>Visual Studio preview 17.9<\/b><span style=\"font-weight: 400;\">. \u041d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab<\/span><b>Add<\/b><span style=\"font-weight: 400;\">\u00bb.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0415\u0441\u043b\u0438 \u0432 \u0445\u043e\u0434\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430, \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/span><\/p>\n<p><i><span style=\"font-weight: 400;\">\u00abinstall the package microsoft.visualstudio.web.codegeneration.design and try again\u00bb<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">\u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 <\/span><b>Dependencies<\/b><span style=\"font-weight: 400;\"> \u2013 <\/span><b>Manage NuGet Packages<\/b><span style=\"font-weight: 400;\"> \u2013 <\/span><b>Browse<\/b><span style=\"font-weight: 400;\"> \u0438 \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u0432 \u043f\u043e\u0438\u0441\u043a\u0435:<\/span><\/p>\n<p><b>Install-Package Microsoft.VisualStudio.Web.CodeGeneration.Design<\/b><\/p>\n<p><span style=\"font-weight: 400;\">\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0434\u0430\u043d\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443. <\/span><b>\u0412\u0410\u0416\u041d\u041e!<\/b><span style=\"font-weight: 400;\"> \u0415\u0441\u043b\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0443\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430 \u0438 \u043e\u0448\u0438\u0431\u043a\u0430 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0438\u043b\u0438 \u0436\u0435 \u043f\u0435\u0440\u0435\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432\u0440\u0443\u0447\u043d\u0443\u044e.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 scaffolding. \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 CRUD (create, read, update, and delete) \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e \u043a\u0430\u043a scaffolding.<\/span><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0421\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Razor \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u043f\u0430\u043f\u043a\u0443 <\/span><b>Pages<\/b><span style=\"font-weight: 400;\"> \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043f\u0430\u043f\u043a\u0443, \u043d\u0430\u0437\u0432\u0430\u043d\u043d\u0443\u044e \u043f\u043e \u0438\u043c\u0435\u043d\u0438 \u043a\u043b\u0430\u0441\u0441\u0430 \u043c\u043e\u0434\u0435\u043b\u0438. \u0421\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Index \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 <\/span><b>QuickGrid<\/b><span style=\"font-weight: 400;\"> \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u043e \u043d\u0435\u043c \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0436\u0435.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0432 \u043f\u0430\u043f\u043a\u0435 <\/span><b>Pages<\/b><span style=\"font-weight: 400;\">, \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043f\u0430\u043f\u043a\u0430 <\/span><b>AnimalPages<\/b><span style=\"font-weight: 400;\">, \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0434\u043b\u044f CRUD \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1304\" src=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-4.jpg\" alt=\"\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 blazor\" width=\"268\" height=\"181\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u0412 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u043f\u043a\u0443 <\/span><b>Data<\/b><span style=\"font-weight: 400;\">, \u0441\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043a\u043b\u0430\u0441\u0441\u043e\u043c <\/span><b>ApplicationContext<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre class=\"lang:default decode:true \">public class ApplicationContext : DbContext\r\n{\r\n    public ApplicationContext (DbContextOptions&lt;ApplicationContext&gt; options)\r\n        : base(options)\r\n    {\r\n    }\r\n\r\n\r\n    public DbSet&lt;Animals.Models.Animal&gt; Animal { get; set; } = default!;\r\n}\r\n<\/pre>\n<p><b>ApplicationContext<\/b><span style=\"font-weight: 400;\"> \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0438\u0440\u0443\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c EF Core (Create, Read, Update, Delete \u0438 \u0442.\u0434.) \u0434\u043b\u044f \u043c\u043e\u0434\u0435\u043b\u0438 <\/span><b>Animal<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">ASP.NET Core \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0438\u043d\u044a\u0435\u043a\u0446\u0438\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 (DI). \u0421\u043b\u0443\u0436\u0431\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0411\u0414 EF Core) \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e DI \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u044d\u0442\u0438 \u0441\u043b\u0443\u0436\u0431\u044b, \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0438\u0445 \u0447\u0435\u0440\u0435\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430:<\/span><\/p>\n<pre class=\"lang:default decode:true \">builder.Services.AddDbContext&lt;ApplicationContext&gt;(options =&gt;\r\n    options.UseSqlServer(builder.Configuration.GetConnectionString(\"ApplicationContext\") ?? throw new InvalidOperationException(\"Connection string 'ApplicationContext' not found.\")));\r\n\r\n\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">\u0418\u043c\u044f \u0441\u0442\u0440\u043e\u043a\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043f\u0443\u0442\u0435\u043c \u0432\u044b\u0437\u043e\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 DbContextOptions. \u0414\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 ASP.NET Core \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 <\/span><b>appsettings.json<\/b><span style=\"font-weight: 400;\">, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0436\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d \u0441 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c, \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0432 \u0444\u0430\u0439\u043b \u0438 \u0438\u0437\u043c\u0435\u043d\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 <\/span><b>AnimalDb<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre class=\"lang:default decode:true \">\"ConnectionStrings\": {\r\n    \"ApplicationContext\": \"Server=(localdb)\\\\mssqllocaldb;Database=AnimalDb;Trusted_Connection=True;MultipleActiveResultSets=true\"\r\n  }\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">\u0422\u0430\u043a \u0436\u0435, \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 <\/span><b>Program<\/b><span style=\"font-weight: 400;\">, \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/span><\/p>\n<pre class=\"lang:default decode:true\">builder.Services.AddQuickGridEntityFrameworkAdapter();<\/pre>\n<p><span style=\"font-weight: 400;\">\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <\/span><b>QuickGrid<\/b><span style=\"font-weight: 400;\"> &#8212; \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Razor \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u0435. QuickGrid \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0435\u0442\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0435\u0442\u043a\u0438 \u0438 \u0441\u043b\u0443\u0436\u0438\u0442 \u044d\u0442\u0430\u043b\u043e\u043d\u043d\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043e\u0439 \u0438 \u0431\u0430\u0437\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u0435\u0442\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445. QuickGrid \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u0441\u043e\u043a\u043e\u0439 \u0441\u0442\u0435\u043f\u0435\u043d\u044c\u044e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u043e\u0432\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u041e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445, \u0433\u0434\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0434\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <\/span><b>Index.razor<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre class=\"lang:default decode:true\">@page \"\/animals\"\r\n@using Microsoft.AspNetCore.Components.QuickGrid\r\n@inject Animals.Data.ApplicationContext DB\r\n@using Animals.Models\r\n\r\n\r\n&lt;PageTitle&gt;Index&lt;\/PageTitle&gt;\r\n\r\n\r\n&lt;h1&gt;Index&lt;\/h1&gt;\r\n\r\n\r\n&lt;p&gt;\r\n    &lt;a href=\"animals\/create\"&gt;Create New&lt;\/a&gt;\r\n&lt;\/p&gt;\r\n\r\n\r\n&lt;QuickGrid Class=\"table\" Items=\"DB.Animal\"&gt;\r\n    &lt;PropertyColumn Property=\"animal =&gt; animal.Name\" \/&gt;\r\n    &lt;PropertyColumn Property=\"animal =&gt; animal.Gender\" \/&gt;\r\n    &lt;PropertyColumn Property=\"animal =&gt; animal.Weight\" \/&gt;\r\n    &lt;PropertyColumn Property=\"animal =&gt; animal.AnimalType\" \/&gt;\r\n    &lt;PropertyColumn Property=\"animal =&gt; animal.CreatedAt\" \/&gt;\r\n\r\n\r\n    &lt;TemplateColumn Context=\"animal\"&gt;\r\n        &lt;a href=\"@($\"animals\/edit?id={animal.Id}\")\"&gt;Edit&lt;\/a&gt; |\r\n        &lt;a href=\"@($\"animals\/details?id={animal.Id}\")\"&gt;Details&lt;\/a&gt; |\r\n        &lt;a href=\"@($\"animals\/delete?id={animal.Id}\")\"&gt;Delete&lt;\/a&gt;\r\n    &lt;\/TemplateColumn&gt;\r\n&lt;\/QuickGrid&gt;\r\n\r\n<\/pre>\n<p><b>EF Core&#8217;s ApplicationContext<\/b><span style=\"font-weight: 400;\"> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <\/span><b>DbSet&lt;TEntity&gt;<\/b><span style=\"font-weight: 400;\"> \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0432 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445. \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043d\u0443\u0436\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0435 <\/span><b>Items<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f DbSet&lt;TEntity&gt; (\u0442\u0430\u0431\u043b\u0438\u0446\u0430) <\/span><b>Animal<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre class=\"lang:default decode:true \">&lt;QuickGrid Class=\"table\" Items=\"DB.Animal\"&gt;<\/pre>\n<p><span style=\"font-weight: 400;\">\u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 LINQ, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0439 EF, \u0434\u043b\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u0434 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435\u0439 \u0438\u0445 \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 Items.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u0432\u0438\u0434 \u0440\u044b\u0431:<\/span><\/p>\n<pre class=\"lang:default decode:true \">&lt;QuickGrid Class=\"table\" Items=\"DB.Animal.Where(e=&gt;e.AnimalType == AnimalType.Fish)\"&gt;<\/pre>\n<p><b>QuickGrid<\/b><span style=\"font-weight: 400;\"> \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0435\u0442 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u044b <\/span><b>IQueryable<\/b><span style=\"font-weight: 400;\">, \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0435 EF, \u0438 \u0443\u043c\u0435\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0423\u0447\u0438\u0442\u044b\u0432\u0430\u0439\u0442\u0435, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043a\u0430\u0444\u0444\u043e\u043b\u0434\u0435\u0440\u0430, \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 (SSR), \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d\u0438 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 WebAssembly.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435, \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 <\/span><b>Create.razor<\/b><span style=\"font-weight: 400;\"> \u0438 <\/span><b>Edit.razor<\/b><span style=\"font-weight: 400;\">, \u0431\u0443\u0434\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0430, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0430\u044f \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435\u043c <\/span><b>AnimalType<\/b><span style=\"font-weight: 400;\">, \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043c \u0435\u0435, \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <\/span><b>InputText<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre class=\"lang:default decode:true \">&lt;InputText id=\"animaltype\" @bind-Value=\"Animal.AnimalType\" class=\"form-control\" \/&gt;\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">\u041d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <\/span><b>InputSelect<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre class=\"lang:default decode:true \">&lt;InputSelect id=\"animaltype\" @bind-Value=\"Animal.AnimalType\" class=\"form-control\"&gt;\r\n    @foreach (var value in Enum.GetValues&lt;AnimalType&gt;())\r\n    {\r\n        &lt;option value=\"@value\"&gt;@value&lt;\/option&gt;\r\n    }\r\n&lt;\/InputSelect&gt;<\/pre>\n<p><span style=\"font-weight: 400;\">\u0422\u0430\u043a \u0436\u0435, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u043c \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044e, \u0443\u043a\u0430\u0437\u0430\u0432 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <\/span><b>Index.razor<\/b><span style=\"font-weight: 400;\">, \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 <\/span><b>NavMenu.razor<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre class=\"lang:default decode:true \">&lt;div class=\"nav-item px-3\"&gt;\r\n    &lt;NavLink class=\"nav-link\" href=\"animals\"&gt;\r\n        &lt;span class=\"bi bi-plus-square-fill-nav-menu\" aria-hidden=\"true\"&gt;&lt;\/span&gt; Animals\r\n    &lt;\/NavLink&gt;\r\n&lt;\/div&gt;<\/pre>\n<h3 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B1%D0%B0%D0%B7%D1%8B_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85\"><\/span><b>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <\/span><b>EF Core Migrations<\/b><span style=\"font-weight: 400;\">. \u041c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u043d\u0430\u0448\u0435\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0441\u0445\u0435\u043c\u0443 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <\/span><b>Tools<\/b><span style=\"font-weight: 400;\"> -&gt; <\/span><b>NuGet Package Manager<\/b><span style=\"font-weight: 400;\"> &gt; <\/span><b>Package Manager Console<\/b><span style=\"font-weight: 400;\"> (PMC) \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0432 PMC:<\/span><\/p>\n<p><b>PM&gt; Add-Migration Initial<\/b><\/p>\n<p><span style=\"font-weight: 400;\">\u041a\u043e\u043c\u0430\u043d\u0434\u0430 <\/span><b>Add-Migration<\/b><span style=\"font-weight: 400;\"> \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043a\u043e\u0434 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0445\u0435\u043c\u044b \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u043c\u043e\u0434\u0435\u043b\u0438, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0439 \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 <\/span><b>TvShowsContext<\/b><span style=\"font-weight: 400;\">. \u0410\u0440\u0433\u0443\u043c\u0435\u043d\u0442 <\/span><b>Initial<\/b><span style=\"font-weight: 400;\"> &#8212; \u044d\u0442\u043e \u0438\u043c\u044f \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u0438\u043c\u044f.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u041f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0432 \u043f\u0430\u043f\u043a\u0435 <\/span><b>Migrations<\/b><span style=\"font-weight: 400;\"> \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u0444\u0430\u0439\u043b \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1305\" src=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-5.jpg\" alt=\"blazor migrations\" width=\"812\" height=\"628\" srcset=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-5.jpg 812w, https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-5-300x232.jpg 300w, https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-5-768x594.jpg 768w\" sizes=\"auto, (max-width: 812px) 100vw, 812px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0448\u0430\u0433\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0432 <\/span><b>Package Manager Console<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<p><b>PM&gt; Update-Database<\/b><\/p>\n<p><span style=\"font-weight: 400;\">\u041a\u043e\u043c\u0430\u043d\u0434\u0430 <\/span><b>Update-Database<\/b><span style=\"font-weight: 400;\"> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 Up \u0432 \u0444\u0430\u0439\u043b\u0435 Migrations\/{time-stamp}_InitialCreate.cs, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u041f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0430, \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u0443:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1306\" src=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-6.jpg\" alt=\"blazor add component\" width=\"707\" height=\"719\" srcset=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-6.jpg 707w, https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-6-295x300.jpg 295w\" sizes=\"auto, (max-width: 707px) 100vw, 707px\" \/><\/p>\n<h3 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"%D0%92%D0%B0%D0%BB%D0%B8%D0%B4%D0%B0%D1%86%D0%B8%D1%8F_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85\"><\/span><b>\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">\u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <\/span><b>EditForm<\/b><span style=\"font-weight: 400;\"> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u043a \u0444\u043e\u0440\u043c\u0435. \u0414\u043b\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440 &#8212; \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0445. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Blazor \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0439 \u0434\u0430\u043d\u043d\u044b\u0445 &#8212; \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <\/span><b>DataAnnotationsValidator<\/b><span style=\"font-weight: 400;\">, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u044f\u0435\u0442 \u043a \u0444\u043e\u0440\u043c\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0439 \u0434\u0430\u043d\u043d\u044b\u0445. \u041a\u0430\u043a \u0438 \u0432 \u0446\u0435\u043b\u043e\u043c \u0432 .NET, \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0432\u0438\u0434\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043c\u043e\u0434\u0435\u043b\u0438.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 <\/span><b>Create.razor<\/b><span style=\"font-weight: 400;\"> \u0438 <\/span><b>Edit.razor<\/b><span style=\"font-weight: 400;\">, \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0443\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d:<\/span><\/p>\n<pre class=\"lang:default decode:true \">&lt;DataAnnotationsValidator \/&gt;<\/pre>\n<p><span style=\"font-weight: 400;\">\u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <\/span><b>ValidationSummary<\/b><span style=\"font-weight: 400;\">, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0432\u0441\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0430\u0445. \u041d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 html \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f html-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;ul&gt; \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c validation-errors:<\/span><\/p>\n<pre class=\"lang:default decode:true \">&lt;ValidationSummary class=\"text-danger\" \/&gt;<\/pre>\n<p><span style=\"font-weight: 400;\">\u0422\u0430\u043a \u0436\u0435, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <\/span><b>ValidationMessage&lt;T&gt;<\/b><span style=\"font-weight: 400;\">, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 \u0434\u043b\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043c\u043e\u0434\u0435\u043b\u0438. \u042d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 html-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;div&gt; \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c validation-message, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <\/span><b>For<\/b><span style=\"font-weight: 400;\"> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 ValidationMessage \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u0435\u043c\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043c\u043e\u0434\u0435\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u0435 \u043b\u044f\u043c\u0431\u0434\u0430-\u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0412\u0441\u0435 \u0447\u0442\u043e \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 <\/span><b>Animal<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre class=\"lang:default decode:true\">public class Animal\r\n{\r\n    public int Id { get; set; }\r\n    [Required]\r\n    public string? Name { get; set; }\r\n    [Required]\r\n    public string? Gender { get; set; }\r\n    [Required]\r\n    [Range(minimum:0.1, maximum: 300)]\r\n    public double Weight { get; set; }\r\n    public AnimalType AnimalType { get; set; }\r\n    public DateTime CreatedAt { get; set; } = DateTime.Now;\r\n}\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u0443:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1307\" src=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-7.jpg\" alt=\"blazor validation\" width=\"698\" height=\"674\" srcset=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-7.jpg 698w, https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/untitled-1-7-300x290.jpg 300w\" sizes=\"auto, (max-width: 698px) 100vw, 698px\" \/><\/p>\n<h3 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0_%D0%BE%D0%BF%D0%BE%D0%B2%D0%B5%D1%89%D0%B5%D0%BD%D0%B8%D1%8F\"><\/span><b>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u043f\u043e\u0432\u0435\u0449\u0435\u043d\u0438\u044f<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">\u041f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438, \u043a\u0430\u043a\u0438\u0445 \u043b\u0438\u0431\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u0443\u0434\u043e\u0431\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0434\u043b\u044f \u043e\u043f\u043e\u0432\u0435\u0449\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0412 \u043f\u0430\u043f\u043a\u0435 <\/span><b>Components<\/b><span style=\"font-weight: 400;\">, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0430\u043f\u043a\u0443 <\/span><b>Shared<\/b><span style=\"font-weight: 400;\">, \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <\/span><b>StatusMessage<\/b><span style=\"font-weight: 400;\">, \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/span><\/p>\n<pre class=\"lang:default decode:true \">@if (!string.IsNullOrEmpty(Message))\r\n{\r\n    var statusMessageClass = Message.StartsWith(\"Error\") ? \"danger\" : \"success\";\r\n    &lt;div class=\"alert bg-light alert-dismissible show text-@statusMessageClass\" role=\"alert\"&gt;\r\n        @((MarkupString)Message)\r\n        &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"&gt;&lt;\/button&gt;\r\n    &lt;\/div&gt;\r\n}\r\n\r\n\r\n@code {\r\n    [Parameter]\r\n    public string? Message { get; set; }\r\n}\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">\u0414\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <\/span><b>Bootstrap<\/b><span style=\"font-weight: 400;\">. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u043d \u0441\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 2-\u0443\u0445 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439: \u00ab<\/span><b>\u0423\u0441\u043f\u0435\u0448\u043d\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f<\/b><span style=\"font-weight: 400;\">\u00bb \u0438 \u00ab<\/span><b>\u041e\u0448\u0438\u0431\u043a\u0430<\/b><span style=\"font-weight: 400;\">\u00bb. \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0436\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0435\u0433\u043e \u0438 \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043a\u0430\u043a \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e.<\/span><\/p>\n<h3 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0_%D0%B4%D0%BB%D1%8F_%D0%BD%D0%B0%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F_%D1%82%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D1%8B%D0%BC%D0%B8_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%BC%D0%B8\"><\/span><b>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u043d\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">\u041d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0411\u0414 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443 <\/span><b>Components<\/b><span style=\"font-weight: 400;\"> \/ <\/span><b>Pages<\/b><span style=\"font-weight: 400;\">, \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u043f\u043a\u0443 <\/span><b>DataPages<\/b><span style=\"font-weight: 400;\">, \u0430 \u0432 \u043d\u0435\u0439 \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <\/span><b>Seed.razor<\/b><span style=\"font-weight: 400;\">, \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/span><\/p>\n<pre class=\"lang:default decode:true \">@page \"\/data\/seed\"\r\n@using Animals.Components.Shared\r\n@using Microsoft.EntityFrameworkCore\r\n@using System.ComponentModel.DataAnnotations\r\n@inject Animals.Data.ApplicationContext DB\r\n\r\n\r\n&lt;PageTitle&gt;Seed&lt;\/PageTitle&gt;\r\n\r\n\r\n&lt;h3&gt;Seed&lt;\/h3&gt;\r\n&lt;hr \/&gt;\r\n&lt;div class=\"row\"&gt;\r\n\r\n\r\n    &lt;StatusMessage Message=\"@message\"&gt;&lt;\/StatusMessage&gt;\r\n\r\n\r\n    &lt;p&gt;Specify the number of rows to be filled in.&lt;\/p&gt;\r\n    &lt;div class=\"col-md-4\"&gt;\r\n        &lt;EditForm method=\"post\" Model=\"SeedModel\" OnValidSubmit=\"CreateSeedData\" FormName=\"createSeedData\" Enhance&gt;\r\n            &lt;DataAnnotationsValidator \/&gt;\r\n            &lt;ValidationSummary class=\"text-danger\" \/&gt;\r\n\r\n\r\n            &lt;div class=\"mb-3\"&gt;\r\n                &lt;label for=\"count\" class=\"form-label\"&gt;Count:&lt;\/label&gt;\r\n                &lt;InputNumber id=\"count\" @bind-Value=\"SeedModel.Count\" class=\"form-control\" \/&gt;\r\n                &lt;ValidationMessage For=\"() =&gt; SeedModel.Count\" class=\"text-danger\" \/&gt;\r\n            &lt;\/div&gt;\r\n\r\n\r\n            &lt;button type=\"submit\" class=\"btn btn-primary\"&gt;Fill&lt;\/button&gt;\r\n        &lt;\/EditForm&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n\r\n@code {\r\n    private string? message;\r\n\r\n\r\n    [SupplyParameterFromForm]\r\n    public SeedViewModel SeedModel{ get; set; } = new();\r\n\r\n\r\n    private void CreateSeedData()\r\n    {\r\n        ClearData();\r\n        if (SeedModel.Count &gt; 0)\r\n        {\r\n            DB.Database.SetCommandTimeout(TimeSpan.FromMinutes(10));\r\n            DB.Database.ExecuteSqlRaw(\"DROP PROCEDURE IF EXISTS CreateSeedData\");\r\n            DB.Database.ExecuteSqlRaw($@\"\r\n            CREATE PROCEDURE CreateSeedData\r\n            @RowCount decimal\r\n            AS\r\n            BEGIN\r\n            SET NOCOUNT ON\r\n            DECLARE @i INT = 0;\r\n            DECLARE @Gender NVARCHAR(10);\r\n\r\n\r\n            BEGIN TRANSACTION\r\n            WHILE @i &lt;= @RowCount\r\n            BEGIN\r\n\r\n\r\n            IF(ROUND((RAND() * 1.0 ), 0) = 1)\r\n            SET @Gender = 'Male';\r\n            ELSE\r\n            SET @Gender = 'Female';\r\n\r\n\r\n            INSERT INTO Animal (Name,Gender,Weight,AnimalType,CreatedAt)\r\n            VALUES (CONCAT('Name',' - ',@i), @Gender, ROUND(RAND() * (150-5+15),2), ROUND((RAND() * 5.0), 0), DATEADD(DAY, -(ABS(CHECKSUM(NEWID()) % 3600 )), getdate()))\r\n\r\n\r\n            SET @i = @i + 1\r\n            END\r\n            COMMIT\r\n\r\n\r\n            END\r\n            \");\r\n            DB.Database.BeginTransaction();\r\n            DB.Database.ExecuteSqlRaw($\"EXEC CreateSeedData @RowCount = {SeedModel.Count}\");\r\n            DB.Database.CommitTransaction();\r\n        }\r\n\r\n\r\n        message = $\"The table has been successfully populated with {SeedModel.Count} items.\";\r\n    }\r\n\r\n\r\n    private void ClearData()\r\n    {\r\n        DB.Database.SetCommandTimeout(TimeSpan.FromMinutes(10));\r\n        DB.Database.BeginTransaction();\r\n        DB.Database.ExecuteSqlRaw(\"DELETE FROM Animal\");\r\n        DB.Database.CommitTransaction();\r\n    }\r\n\r\n\r\n    public class SeedViewModel\r\n    {\r\n        [Required]\r\n        [Range(minimum:1, maximum:1_000_00)]\r\n        public int? Count { get; set; }\r\n    }\r\n}\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 <\/span><b>EntityFrameworkCore<\/b><span style=\"font-weight: 400;\"> \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c <\/span><b>StatusMessage<\/b><span style=\"font-weight: 400;\">, \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0438\u043c\u0435\u043d:<\/span><\/p>\n<pre class=\"lang:default decode:true\">@using Animals.Components.Shared\r\n@using Microsoft.EntityFrameworkCore\r\n@using System.ComponentModel.DataAnnotations\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">\u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043c\u0435\u043d\u044e.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, Blazor \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u043a\u043e\u043d\u043e\u043a \u043e\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <\/span><b>Bootstrap Icons<\/b><span style=\"font-weight: 400;\">. \u0418\u0445 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 \u0444\u0430\u0439\u043b\u0435 <\/span><b>NavMenu.razor.css<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre class=\"lang:default decode:true\">.bi {\r\n    display: inline-block;\r\n    position: relative;\r\n    width: 1.25rem;\r\n    height: 1.25rem;\r\n    margin-right: 0.75rem;\r\n    top: -1px;\r\n    background-size: cover;\r\n}\r\n\r\n\r\n.bi-house-door-fill-nav-menu {\r\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'\/%3E%3C\/svg%3E\");\r\n}\r\n\r\n\r\n.bi-plus-square-fill-nav-menu {\r\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'\/%3E%3C\/svg%3E\");\r\n}\r\n\r\n\r\n.bi-list-nested-nav-menu {\r\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'\/%3E%3C\/svg%3E\");\r\n}\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">\u041f\u043e\u0434\u043e\u0431\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0438\u0445 \u0438\u043a\u043e\u043d\u043e\u043a. \u0412 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0443\u0431\u0435\u0440\u0451\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u0440\u044b\u0445 \u0438\u043a\u043e\u043d\u043e\u043a \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043a\u043b\u0430\u0441\u0441 <\/span><b>.bi<\/b><span style=\"font-weight: 400;\">, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/span><\/p>\n<pre class=\"lang:default decode:true \">.bi {\r\n    display: inline-block;\r\n    position: relative;\r\n    width: 1.25rem;\r\n    height: 1rem;\r\n    margin-right: 0.75rem;\r\n    top: -15px;\r\n}\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">\u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0438\u0445 \u0438\u043a\u043e\u043d\u043a\u0438, \u0442\u043e \u0432 \u0444\u0430\u0439\u043b\u0435 <\/span><b>App.razor<\/b><span style=\"font-weight: 400;\">, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0438\u0445 \u043f\u043e \u043f\u0440\u044f\u043c\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0435 \u0438\u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0432 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442:<\/span><\/p>\n<pre class=\"lang:default decode:true \">&lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/font\/bootstrap-icons.min.css\"&gt;<\/pre>\n<p><span style=\"font-weight: 400;\">\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0432 <\/span><b>Components \/ Layout \/ NavMenu.razor<\/b><span style=\"font-weight: 400;\"> \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/span><\/p>\n<pre class=\"lang:default decode:true \">&lt;div class=\"top-row ps-3 navbar navbar-dark\"&gt;\r\n    &lt;div class=\"container-fluid\"&gt;\r\n        &lt;a class=\"navbar-brand\" href=\"\"&gt;Animals&lt;\/a&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n\r\n&lt;input type=\"checkbox\" title=\"Navigation menu\" class=\"navbar-toggler\" \/&gt;\r\n\r\n\r\n&lt;div class=\"nav-scrollable\" onclick=\"document.querySelector('.navbar-toggler').click()\"&gt;\r\n    &lt;nav class=\"flex-column\"&gt;\r\n        &lt;div class=\"nav-item px-3\"&gt;\r\n            &lt;NavLink class=\"nav-link\" href=\"\" Match=\"NavLinkMatch.All\"&gt;\r\n                &lt;span class=\"bi bi-house-door-fill\" aria-hidden=\"true\"&gt;&lt;\/span&gt; Home\r\n            &lt;\/NavLink&gt;\r\n        &lt;\/div&gt;\r\n\r\n\r\n        &lt;div class=\"nav-item px-3\"&gt;\r\n            &lt;NavLink class=\"nav-link\" href=\"counter\"&gt;\r\n                &lt;span class=\"bi bi-plus-square-fill\" aria-hidden=\"true\"&gt;&lt;\/span&gt; Counter\r\n            &lt;\/NavLink&gt;\r\n        &lt;\/div&gt;\r\n\r\n\r\n        &lt;div class=\"nav-item px-3\"&gt;\r\n            &lt;NavLink class=\"nav-link\" href=\"weather\"&gt;\r\n                &lt;span class=\"bi bi-list-nested\" aria-hidden=\"true\"&gt;&lt;\/span&gt; Weather\r\n            &lt;\/NavLink&gt;\r\n        &lt;\/div&gt;\r\n\r\n\r\n        &lt;div class=\"nav-item px-3\"&gt;\r\n            &lt;NavLink class=\"nav-link\" href=\"animals\"&gt;\r\n                &lt;span class=\"bi bi-gitlab\" aria-hidden=\"true\"&gt;&lt;\/span&gt; Animals\r\n            &lt;\/NavLink&gt;\r\n        &lt;\/div&gt;\r\n\r\n\r\n        &lt;div class=\"nav-item px-3\"&gt;\r\n            &lt;NavLink class=\"nav-link\" href=\"data\/seed\"&gt;\r\n                &lt;span class=\"bi bi-cloud-arrow-down-fill\" aria-hidden=\"true\"&gt;&lt;\/span&gt; Seed\r\n            &lt;\/NavLink&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/nav&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u044f \u0443\u0431\u0440\u0430\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 <\/span><b>-nav-menu<\/b><span style=\"font-weight: 400;\">, \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0441\u044b\u043b\u043e\u043a \u0438 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0438\u043a\u043e\u043d\u043e\u043a, \u0443\u043a\u0430\u0437\u0430\u043b \u043d\u0443\u0436\u043d\u044b\u0435 \u043c\u043d\u0435 \u0438\u0437 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u0443:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1308\" src=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/snimok-ekrana-2024-05-24-193909.png\" alt=\"server alert message\" width=\"695\" height=\"507\" srcset=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/snimok-ekrana-2024-05-24-193909.png 695w, https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/snimok-ekrana-2024-05-24-193909-300x219.png 300w\" sizes=\"auto, (max-width: 695px) 100vw, 695px\" \/><\/p>\n<h3 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"%D0%9F%D0%B0%D0%B3%D0%B8%D0%BD%D0%B0%D1%86%D0%B8%D1%8F_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0_QuickGrid\"><\/span><b>\u041f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 QuickGrid<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <\/span><b>Seed<\/b><span style=\"font-weight: 400;\">, \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u043d\u0430 <\/span><b>10_000<\/b><span style=\"font-weight: 400;\"> \u0440\u044f\u0434\u043a\u043e\u0432, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <\/span><b>Animals<\/b><span style=\"font-weight: 400;\">. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u043e\u043d\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u0438\u043d\u0438\u043c\u0443\u043c 5 \u0441\u0435\u043a\u0443\u043d\u0434 \u0438 \u0432 \u044d\u0442\u043e\u043c \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0438\u0434\u0438\u0442 \u043f\u0443\u0441\u0442\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443 (\u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u043f\u0440\u043e\u0441\u0442\u0443 \u043d\u0435\u0442).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u041f\u0435\u0440\u0432\u043e\u0435 \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0442\u043e \u043a\u0430\u043a-\u0442\u043e \u0443\u0432\u0435\u0434\u043e\u043c\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e, \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <\/span><b>Index.razor<\/b><span style=\"font-weight: 400;\">, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:\u00a0<\/span><\/p>\n<pre class=\"lang:default decode:true \">@page \"\/animals\"\r\n@attribute [StreamRendering]\r\n@using Microsoft.AspNetCore.Components.QuickGrid\r\n@inject Animals.Data.ApplicationContext DB\r\n@using Animals.Models\r\n@using Microsoft.EntityFrameworkCore\r\n\r\n\r\n&lt;PageTitle&gt;Index&lt;\/PageTitle&gt;\r\n\r\n\r\n&lt;h1&gt;Index&lt;\/h1&gt;\r\n\r\n\r\n&lt;p&gt;\r\n    &lt;a href=\"animals\/create\"&gt;Create New&lt;\/a&gt;\r\n&lt;\/p&gt;\r\n\r\n\r\n@if (animals == null)\r\n{\r\n    &lt;p&gt;Loading...&lt;\/p&gt;\r\n}\r\nelse\r\n{\r\n    &lt;QuickGrid Class=\"table\" Items=\"animals\"&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.Name\" \/&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.Gender\" \/&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.Weight\" \/&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.AnimalType\" \/&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.CreatedAt\" \/&gt;\r\n\r\n\r\n        &lt;TemplateColumn Context=\"animal\"&gt;\r\n            &lt;a href=\"@($\"animals\/edit?id={animal.Id}\")\"&gt;Edit&lt;\/a&gt; |\r\n            &lt;a href=\"@($\"animals\/details?id={animal.Id}\")\"&gt;Details&lt;\/a&gt; |\r\n            &lt;a href=\"@($\"animals\/delete?id={animal.Id}\")\"&gt;Delete&lt;\/a&gt;\r\n        &lt;\/TemplateColumn&gt;\r\n    &lt;\/QuickGrid&gt;\r\n}\r\n\r\n\r\n@code {\r\n    private IQueryable&lt;Animal&gt; animals;\r\n\r\n\r\n    protected override async Task OnInitializedAsync()\r\n    {\r\n        animals = (await DB.Animal.ToListAsync()).AsQueryable();\r\n    }\r\n}\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">\u0412\u0432\u0435\u0440\u0445\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0431\u044b\u043b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <\/span><b>StreamRendering<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre class=\"lang:default decode:true \">@attribute [StreamRendering]<\/pre>\n<p><span style=\"font-weight: 400;\">\u042d\u0442\u043e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0440\u0435\u043d\u0434\u0435\u0440\u0435, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0435\u043c \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 HTML \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438\u0437 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 Razor Component).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u041f\u043e\u0442\u043e\u043a\u043e\u0432\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043f\u043e \u043c\u0435\u0440\u0435 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438, \u0430 \u043d\u0435 \u043e\u0436\u0438\u0434\u0430\u0442\u044c, \u043f\u043e\u043a\u0430 \u0432\u0435\u0441\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0433\u043e\u0442\u043e\u0432 \u043a \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043c\u043e\u0436\u0435\u0442 \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u043e\u043f\u044b\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0438\u043b\u0438 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0447\u0430\u0441\u0442\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043e\u043d \u0435\u0449\u0435 \u043d\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0418\u043c\u0435\u043d\u043d\u043e \u0437\u0430 \u0441\u0447\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430, \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u0438\u0434\u0435\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1309\" src=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/snimok-ekrana-2024-05-24-194016.png\" alt=\"blazor loading\" width=\"697\" height=\"445\" srcset=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/snimok-ekrana-2024-05-24-194016.png 697w, https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/snimok-ekrana-2024-05-24-194016-300x192.png 300w\" sizes=\"auto, (max-width: 697px) 100vw, 697px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0439 <\/span><b>animals<\/b><span style=\"font-weight: 400;\"> \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0430, \u043c\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043c \u0435\u0435 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0434\u043e\u0440\u043e\u0433\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u043c. \u0415\u0441\u043b\u0438 \u043e\u0431\u044a\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u043c, \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u0431\u043e \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044e, \u043b\u0438\u0431\u043e \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0427\u0442\u043e\u0431\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044e, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 <\/span><b>PaginationState<\/b><span style=\"font-weight: 400;\"> \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <\/span><b>Pagination<\/b><span style=\"font-weight: 400;\"> \u0433\u0440\u0438\u0434\u0430. \u0427\u0442\u043e\u0431\u044b \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <\/span><b>Paginator<\/b><span style=\"font-weight: 400;\"> \u0438\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 <\/span><b>PaginationState<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0418\u0437\u043c\u0435\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <\/span><b>Index.razor<\/b><span style=\"font-weight: 400;\">, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/span><\/p>\n<pre class=\"lang:default decode:true \">@page \"\/animals\"\r\n@attribute [StreamRendering]\r\n@using Microsoft.AspNetCore.Components.QuickGrid\r\n@inject Animals.Data.ApplicationContext DB\r\n@using Animals.Models\r\n@using Microsoft.EntityFrameworkCore\r\n@rendermode RenderMode.InteractiveServer\r\n\r\n\r\n&lt;PageTitle&gt;Index&lt;\/PageTitle&gt;\r\n\r\n\r\n&lt;h1&gt;Index&lt;\/h1&gt;\r\n\r\n\r\n&lt;p&gt;\r\n    &lt;a href=\"animals\/create\"&gt;Create New&lt;\/a&gt;\r\n&lt;\/p&gt;\r\n\r\n\r\n@if (animals == null)\r\n{\r\n    &lt;p&gt;Loading...&lt;\/p&gt;\r\n}\r\nelse\r\n{\r\n    &lt;div class=\"page-size-chooser\"&gt;\r\n        Items per page:\r\n        &lt;select @bind=\"@pagination.ItemsPerPage\"&gt;\r\n            &lt;option&gt;5&lt;\/option&gt;\r\n            &lt;option&gt;10&lt;\/option&gt;\r\n            &lt;option&gt;20&lt;\/option&gt;\r\n            &lt;option&gt;50&lt;\/option&gt;\r\n        &lt;\/select&gt;\r\n    &lt;\/div&gt;\r\n\r\n\r\n    &lt;QuickGrid Class=\"table\" Items=\"animals\" Pagination=\"@pagination\"&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.Name\" \/&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.Gender\" \/&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.Weight\" \/&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.AnimalType\" \/&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.CreatedAt\" \/&gt;\r\n\r\n\r\n        &lt;TemplateColumn Context=\"animal\"&gt;\r\n            &lt;a href=\"@($\"animals\/edit?id={animal.Id}\")\"&gt;Edit&lt;\/a&gt; |\r\n            &lt;a href=\"@($\"animals\/details?id={animal.Id}\")\"&gt;Details&lt;\/a&gt; |\r\n            &lt;a href=\"@($\"animals\/delete?id={animal.Id}\")\"&gt;Delete&lt;\/a&gt;\r\n        &lt;\/TemplateColumn&gt;\r\n    &lt;\/QuickGrid&gt;\r\n}\r\n\r\n\r\n\r\n@code {\r\n    private IQueryable&lt;Animal&gt; animals;\r\n\r\n\r\n    private PaginationState pagination = new PaginationState { ItemsPerPage = 10 };\r\n\r\n\r\n    protected override async Task OnInitializedAsync()\r\n    {\r\n        animals = (await DB.Animal.ToListAsync()).AsQueryable();\r\n    }\r\n}\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">\u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435:<\/span><\/p>\n<pre class=\"lang:default decode:true \">@rendermode RenderMode.InteractiveServer\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">\u0417\u0430\u043f\u0443\u0441\u0442\u0438d \u0441\u0435\u0440\u0432\u0435\u0440, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044e SignalR \u043c\u0435\u0436\u0434\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430, \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u043c\u0443 \u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 <\/span><b>ItemsPerPage<\/b><span style=\"font-weight: 400;\">, \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <\/span><b>pagination<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre class=\"lang:default decode:true \">&lt;div class=\"page-size-chooser\"&gt;\r\n    Items per page:\r\n    &lt;select @bind=\"@pagination.ItemsPerPage\"&gt;\r\n        &lt;option&gt;5&lt;\/option&gt;\r\n        &lt;option&gt;10&lt;\/option&gt;\r\n        &lt;option&gt;20&lt;\/option&gt;\r\n        &lt;option&gt;50&lt;\/option&gt;\r\n    &lt;\/select&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">\u041a\u0430\u043a \u044f \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u0447\u0442\u043e\u0431\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044e, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 <\/span><b>PaginationState<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre class=\"lang:default decode:true \">private PaginationState pagination = new PaginationState { ItemsPerPage = 10 };<\/pre>\n<p><span style=\"font-weight: 400;\">\u0418 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <\/span><b>Pagination<\/b><span style=\"font-weight: 400;\"> \u0433\u0440\u0438\u0434\u0430:<\/span><\/p>\n<pre class=\"lang:default decode:true \">&lt;QuickGrid Class=\"table\" Items=\"animals\" Pagination=\"@pagination\"&gt;<\/pre>\n<p><span style=\"font-weight: 400;\">\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u0443:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1310\" src=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/snimok-ekrana-2024-05-24-194209.png\" alt=\"blazor pagionation\" width=\"697\" height=\"218\" srcset=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/snimok-ekrana-2024-05-24-194209.png 697w, https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/snimok-ekrana-2024-05-24-194209-300x94.png 300w\" sizes=\"auto, (max-width: 697px) 100vw, 697px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438, \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 <\/span><b>Index.razor<\/b><span style=\"font-weight: 400;\">, \u0437\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c <\/span><b>QuickGrid<\/b><span style=\"font-weight: 400;\">, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <\/span><b>Paginator<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre class=\"lang:default decode:true \">&lt;Paginator State=\"@pagination\" \/&gt;<\/pre>\n<p><span style=\"font-weight: 400;\">\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u0443:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1311\" src=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/snimok-ekrana-2024-05-24-194310.png\" alt=\"blazor pagionation buttons\" width=\"700\" height=\"430\" srcset=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/snimok-ekrana-2024-05-24-194310.png 700w, https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/snimok-ekrana-2024-05-24-194310-300x184.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 <\/span><b>Paginator<\/b><span style=\"font-weight: 400;\">, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0432 \u0448\u0430\u0431\u043b\u043e\u043d <\/span><b>SummaryTemplate<\/b><span style=\"font-weight: 400;\">. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 PaginationState. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043c \u0432\u0441\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438:<\/span><\/p>\n<pre class=\"lang:default decode:true\">@page \"\/animals\"\r\n@attribute [StreamRendering]\r\n@using Microsoft.AspNetCore.Components.QuickGrid\r\n@inject Animals.Data.ApplicationContext DB\r\n@using Animals.Models\r\n@using Microsoft.EntityFrameworkCore\r\n@rendermode RenderMode.InteractiveServer\r\n\r\n\r\n&lt;PageTitle&gt;Index&lt;\/PageTitle&gt;\r\n\r\n\r\n&lt;h1&gt;Index&lt;\/h1&gt;\r\n\r\n\r\n&lt;p&gt;\r\n    &lt;a href=\"animals\/create\"&gt;Create New&lt;\/a&gt;\r\n&lt;\/p&gt;\r\n\r\n\r\n@if (animals == null)\r\n{\r\n    &lt;p&gt;Loading...&lt;\/p&gt;\r\n}\r\nelse\r\n{\r\n    &lt;div class=\"page-size-chooser\"&gt;\r\n        Items per page:\r\n        &lt;select @bind=\"@pagination.ItemsPerPage\"&gt;\r\n            &lt;option&gt;5&lt;\/option&gt;\r\n            &lt;option&gt;10&lt;\/option&gt;\r\n            &lt;option&gt;20&lt;\/option&gt;\r\n            &lt;option&gt;50&lt;\/option&gt;\r\n        &lt;\/select&gt;\r\n    &lt;\/div&gt;\r\n\r\n\r\n    &lt;QuickGrid Class=\"table\" Items=\"animals\" Pagination=\"@pagination\"&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.Name\" \/&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.Gender\" \/&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.Weight\" \/&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.AnimalType\" \/&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.CreatedAt\" \/&gt;\r\n\r\n\r\n        &lt;TemplateColumn Context=\"animal\"&gt;\r\n            &lt;a href=\"@($\"animals\/edit?id={animal.Id}\")\"&gt;Edit&lt;\/a&gt; |\r\n            &lt;a href=\"@($\"animals\/details?id={animal.Id}\")\"&gt;Details&lt;\/a&gt; |\r\n            &lt;a href=\"@($\"animals\/delete?id={animal.Id}\")\"&gt;Delete&lt;\/a&gt;\r\n        &lt;\/TemplateColumn&gt;\r\n    &lt;\/QuickGrid&gt;\r\n\r\n\r\n    &lt;div class=\"page-buttons\"&gt;\r\n        Page:\r\n        @if (pagination.TotalItemCount.HasValue)\r\n        {\r\n            for (var pageIndex = 0; pageIndex &lt;= pagination.LastPageIndex; pageIndex++)\r\n            {\r\n                var capturedIndex = pageIndex;\r\n                &lt;button @onclick=\"@(() =&gt; GoToPageAsync(capturedIndex))\"\r\n                        class=\"@PageButtonClass(capturedIndex)\"\r\n                        aria-current=\"@AriaCurrentValue(capturedIndex)\"\r\n                        aria-label=\"Go to page @(pageIndex + 1)\"&gt;\r\n                    @(pageIndex + 1)\r\n                &lt;\/button&gt;\r\n            }\r\n        }\r\n    &lt;\/div&gt;\r\n}\r\n\r\n\r\n@code {\r\n    private IQueryable&lt;Animal&gt; animals;\r\n\r\n\r\n    private PaginationState pagination = new PaginationState { ItemsPerPage = 10 };\r\n\r\n\r\n    protected override async Task OnInitializedAsync()\r\n    {\r\n        animals = (await DB.Animal.ToListAsync()).AsQueryable();\r\n        pagination.TotalItemCountChanged += (sender, eventArgs) =&gt; StateHasChanged();\r\n    }\r\n\r\n\r\n    private async Task GoToPageAsync(int pageIndex)\r\n    {\r\n        await pagination.SetCurrentPageIndexAsync(pageIndex);\r\n    }\r\n\r\n\r\n    private string? PageButtonClass(int pageIndex) =&gt; pagination.CurrentPageIndex == pageIndex ? \"current\" : null;\r\n\r\n\r\n    private string? AriaCurrentValue(int pageIndex) =&gt; pagination.CurrentPageIndex == pageIndex ? \"page\" : null;\r\n}\r\n<\/pre>\n<h3 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"%D0%A1%D0%BE%D1%80%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%BA%D0%B0_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0_QuickGrid\"><\/span><b>\u0421\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 QuickGrid<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">\u0421\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u043e\u0439 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u0442\u043e\u043b\u0431\u0446\u044b.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0414\u043b\u044f \u0441\u0442\u043e\u043b\u0431\u0446\u0430 <\/span><b>PropertyColumn<\/b><span style=\"font-weight: 400;\"> \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c <\/span><b>Sortable=\u00abtrue\u00bb.<\/b><span style=\"font-weight: 400;\"> \u042d\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0432\u0430\u0448 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0443 \u043f\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0414\u043b\u044f \u0441\u0442\u043e\u043b\u0431\u0446\u0430 <\/span><b>TemplateColumn<\/b><span style=\"font-weight: 400;\"> \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u0434\u0430\u0434\u0438\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <\/span><b>SortBy<\/b><span style=\"font-weight: 400;\"> \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0414\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u0430, \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043e\u0442 <\/span><b>ColumnBase<\/b><span style=\"font-weight: 400;\">, \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u0432\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 <\/span><b>Sortable=\u00abtrue\u00bb<\/b><span style=\"font-weight: 400;\"> \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u0435 <\/span><b>IsSortableByDefault<\/b><span style=\"font-weight: 400;\"> \u0438 \u0432\u0435\u0440\u043d\u0435\u0442\u0435 <\/span><b>true<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0443 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 Index, \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 <\/span><b>QuickGrid<\/b><span style=\"font-weight: 400;\">, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <\/span><b>Sortable<\/b><span style=\"font-weight: 400;\"> \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <\/span><b>true<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre class=\"lang:default decode:true \">&lt;QuickGrid Class=\"table\" Items=\"animals\" Pagination=\"@pagination\"&gt;\r\n    &lt;PropertyColumn Property=\"animal =&gt; animal.Name\" Sortable=\"true\" \/&gt;\r\n    &lt;PropertyColumn Property=\"animal =&gt; animal.Gender\" Sortable=\"true\" \/&gt;\r\n    &lt;PropertyColumn Property=\"animal =&gt; animal.Weight\" Sortable=\"true\" \/&gt;\r\n    &lt;PropertyColumn Property=\"animal =&gt; animal.AnimalType\" Sortable=\"true\" \/&gt;\r\n    &lt;PropertyColumn Property=\"animal =&gt; animal.CreatedAt\" Sortable=\"true\" \/&gt;\r\n\r\n\r\n    &lt;TemplateColumn Context=\"animal\"&gt;\r\n        &lt;a href=\"@($\"animals\/edit?id={animal.Id}\")\"&gt;Edit&lt;\/a&gt; |\r\n        &lt;a href=\"@($\"animals\/details?id={animal.Id}\")\"&gt;Details&lt;\/a&gt; |\r\n        &lt;a href=\"@($\"animals\/delete?id={animal.Id}\")\"&gt;Delete&lt;\/a&gt;\r\n    &lt;\/TemplateColumn&gt;\r\n&lt;\/QuickGrid&gt;<\/pre>\n<p><span style=\"font-weight: 400;\">\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e. \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u0443.<\/span><\/p>\n<h3 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"%D0%A4%D0%B8%D0%BB%D1%8C%D1%82%D1%80%D0%B0%D1%86%D0%B8%D1%8F_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0_QuickGrid\"><\/span><b>\u0424\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 QuickGrid<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">QuickGrid \u043d\u0435 \u043d\u0443\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u0432\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 API \u0434\u043b\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043b\u0435\u0433\u043a\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u044f\u043c\u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0438 \u0437\u0430\u0442\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u043c \u0434\u0430\u043d\u043d\u044b\u0445.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u044f\u043c\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d \u0432 \u043b\u044e\u0431\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Blazor \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <\/span><b>ColumnOptions<\/b><span style=\"font-weight: 400;\"> \u0432 <\/span><b>QuickGrid<\/b><span style=\"font-weight: 400;\">, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u043e \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0435 \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u043c.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0438\u0441\u043a\u0430 \u043f\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 <\/span><b>Name<\/b><span style=\"font-weight: 400;\">, \u0447\u0435\u0440\u0435\u0437 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <\/span><b>QuickGrid<\/b><span style=\"font-weight: 400;\">, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <\/span><b>Index.razor<\/b><span style=\"font-weight: 400;\">, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/span><\/p>\n<pre class=\"lang:default decode:true \">@page \"\/animals\"\r\n@attribute [StreamRendering]\r\n@using Microsoft.AspNetCore.Components.QuickGrid\r\n@inject Animals.Data.ApplicationContext DB\r\n@using Animals.Models\r\n@using Microsoft.EntityFrameworkCore\r\n@rendermode RenderMode.InteractiveServer\r\n\r\n\r\n&lt;PageTitle&gt;Index&lt;\/PageTitle&gt;\r\n\r\n\r\n&lt;h1&gt;Index&lt;\/h1&gt;\r\n\r\n\r\n&lt;p&gt;\r\n    &lt;a href=\"animals\/create\"&gt;Create New&lt;\/a&gt;\r\n&lt;\/p&gt;\r\n\r\n\r\n@if (animals == null)\r\n{\r\n    &lt;p&gt;Loading...&lt;\/p&gt;\r\n}\r\nelse\r\n{\r\n    &lt;div class=\"page-size-chooser\"&gt;\r\n        Items per page:\r\n        &lt;select @bind=\"@pagination.ItemsPerPage\"&gt;\r\n            &lt;option&gt;5&lt;\/option&gt;\r\n            &lt;option&gt;10&lt;\/option&gt;\r\n            &lt;option&gt;20&lt;\/option&gt;\r\n            &lt;option&gt;50&lt;\/option&gt;\r\n        &lt;\/select&gt;\r\n    &lt;\/div&gt;\r\n\r\n\r\n    &lt;QuickGrid Class=\"table\" Items=\"filteredAnimals\" Pagination=\"@pagination\"&gt;\r\n        \r\n&lt;PropertyColumn Property=\"animal =&gt; animal.Name\" Sortable=\"true\"&gt;\r\n            &lt;ColumnOptions&gt;\r\n                &lt;div class=\"search-box\"&gt;\r\n                    &lt;input type=\"search\" autofocus @bind=\"nameFilter\" @bind:event=\"oninput\" placeholder=\"Animal name...\" \/&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/ColumnOptions&gt;\r\n        &lt;\/PropertyColumn&gt;\r\n\r\n\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.Gender\" Sortable=\"true\" \/&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.Weight\" Sortable=\"true\" \/&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.AnimalType\" Sortable=\"true\" \/&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.CreatedAt\" Sortable=\"true\" \/&gt;\r\n\r\n\r\n        &lt;TemplateColumn Context=\"animal\"&gt;\r\n            &lt;a href=\"@($\"animals\/edit?id={animal.Id}\")\"&gt;Edit&lt;\/a&gt; |\r\n            &lt;a href=\"@($\"animals\/details?id={animal.Id}\")\"&gt;Details&lt;\/a&gt; |\r\n            &lt;a href=\"@($\"animals\/delete?id={animal.Id}\")\"&gt;Delete&lt;\/a&gt;\r\n        &lt;\/TemplateColumn&gt;\r\n    &lt;\/QuickGrid&gt;\r\n\r\n\r\n    &lt;Paginator State=\"@pagination\" \/&gt;\r\n}\r\n\r\n\r\n@code {\r\n    private IQueryable&lt;Animal&gt; animals;\r\n\r\n\r\n    private PaginationState pagination = new PaginationState { ItemsPerPage = 10 };\r\n\r\n\r\n    private string nameFilter;\r\n\r\n\r\n    private IQueryable&lt;Animal&gt; filteredAnimals\r\n    {\r\n        get\r\n        {\r\n            var result = animals;\r\n\r\n\r\n            if (!string.IsNullOrEmpty(nameFilter))\r\n            {\r\n                result = result.Where(c =&gt; c.Name.Contains(nameFilter, StringComparison.CurrentCultureIgnoreCase));\r\n            }\r\n            return result;\r\n        }\r\n    }\r\n\r\n\r\n    protected override async Task OnInitializedAsync()\r\n    {\r\n        animals = (await DB.Animal.ToListAsync()).AsQueryable();\r\n    }\r\n}\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">\u0412\u043d\u0430\u0447\u0430\u043b\u0435 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0435 \u043f\u043e\u043b\u0435 \u043a\u043b\u0430\u0441\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0444\u0438\u043b\u044c\u0442\u0440 \u043f\u043e \u0438\u043c\u0435\u043d\u0438 \u0434\u043b\u044f \u0436\u0438\u0432\u043e\u0442\u043d\u044b\u0445, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043b\u0430\u0441\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0436\u0438\u0432\u043e\u0442\u043d\u044b\u0445. \u041e\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 LINQ-\u0437\u0430\u043f\u0440\u043e\u0441 \u0434\u043b\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 <\/span><b>animals<\/b><span style=\"font-weight: 400;\">, \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 <\/span><b>nameFilter<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u041c\u0435\u0442\u043e\u0434 <\/span><b>filteredAnimals()<\/b><span style=\"font-weight: 400;\"> \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044e \u043a \u0441\u043f\u0438\u0441\u043a\u0443 \u0436\u0438\u0432\u043e\u0442\u043d\u044b\u0445 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f nameFilter. \u0415\u0441\u043b\u0438 <\/span><b>nameFilter<\/b><span style=\"font-weight: 400;\"> \u043d\u0435 \u043f\u0443\u0441\u0442\u043e\u0435, \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044f \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e \u0438\u043c\u0435\u043d\u0438 \u0436\u0438\u0432\u043e\u0442\u043d\u043e\u0433\u043e, \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u044f \u0440\u0435\u0433\u0438\u0441\u0442\u0440 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432. \u0424\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 filteredAnimals.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e, \u0434\u043b\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <\/span><b>Items<\/b><span style=\"font-weight: 400;\">, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <\/span><b>QuickGrid<\/b><span style=\"font-weight: 400;\">, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f <\/span><b>filteredAnimals.\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">\u0414\u043b\u044f \u043a\u043e\u043b\u043e\u043d\u043a\u0438 <\/span><b>animal.Name<\/b><span style=\"font-weight: 400;\">, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e \u0441 \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u043d\u044b\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u043e\u043b\u0435\u043c \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0442\u0435\u043a\u0441\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043e \u043a \u043f\u043e\u043b\u044e <\/span><b>nameFilter<\/b><span style=\"font-weight: 400;\">. \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u0443:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1312 size-full\" src=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/snimok-ekrana-2024-05-24-194524.png\" alt=\"blazor filtering\" width=\"703\" height=\"382\" srcset=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/snimok-ekrana-2024-05-24-194524.png 703w, https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/snimok-ekrana-2024-05-24-194524-300x163.png 300w\" sizes=\"auto, (max-width: 703px) 100vw, 703px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u041f\u043e \u0442\u0430\u043a\u043e\u043c\u0443 \u0436\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0444\u0438\u043b\u044c\u0442\u0440 \u0434\u043b\u044f \u043a\u043e\u043b\u043e\u043d\u043a\u0438 <\/span><b>Weight<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre class=\"lang:default decode:true\">@page \"\/animals\"\r\n@attribute [StreamRendering]\r\n@using Microsoft.AspNetCore.Components.QuickGrid\r\n@inject Animals.Data.ApplicationContext DB\r\n@using Animals.Models\r\n@using Microsoft.EntityFrameworkCore\r\n@rendermode RenderMode.InteractiveServer\r\n\r\n\r\n&lt;PageTitle&gt;Index&lt;\/PageTitle&gt;\r\n\r\n\r\n&lt;h1&gt;Index&lt;\/h1&gt;\r\n\r\n\r\n&lt;p&gt;\r\n    &lt;a href=\"animals\/create\"&gt;Create New&lt;\/a&gt;\r\n&lt;\/p&gt;\r\n\r\n\r\n@if (animals == null)\r\n{\r\n    &lt;p&gt;Loading...&lt;\/p&gt;\r\n}\r\nelse\r\n{\r\n    &lt;div class=\"page-size-chooser\"&gt;\r\n        Items per page:\r\n        &lt;select @bind=\"@pagination.ItemsPerPage\"&gt;\r\n            &lt;option&gt;5&lt;\/option&gt;\r\n            &lt;option&gt;10&lt;\/option&gt;\r\n            &lt;option&gt;20&lt;\/option&gt;\r\n            &lt;option&gt;50&lt;\/option&gt;\r\n        &lt;\/select&gt;\r\n    &lt;\/div&gt;\r\n\r\n\r\n    &lt;QuickGrid Class=\"table\" Items=\"filteredAnimals\" Pagination=\"@pagination\"&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.Name\" Sortable=\"true\"&gt;\r\n            &lt;ColumnOptions&gt;\r\n                &lt;div class=\"search-box\"&gt;\r\n                    &lt;input type=\"search\" autofocus @bind=\"nameFilter\" @bind:event=\"oninput\" placeholder=\"Animal name...\" \/&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/ColumnOptions&gt;\r\n        &lt;\/PropertyColumn&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.Gender\" Sortable=\"true\" \/&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.Weight\" Sortable=\"true\"&gt;\r\n            &lt;ColumnOptions&gt;\r\n                &lt;div class=\"search-box\"&gt;\r\n                    &lt;input type=\"range\" autofocus @bind=\"weightFilter\" @bind:event=\"oninput\" min=\"0\" max=\"160\" \/&gt;\r\n                    &lt;span class=\"inline-block w-10\"&gt;@weightFilter&lt;\/span&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/ColumnOptions&gt;\r\n        &lt;\/PropertyColumn&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.AnimalType\" Sortable=\"true\" \/&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.CreatedAt\" Sortable=\"true\" \/&gt;\r\n\r\n\r\n        &lt;TemplateColumn Context=\"animal\"&gt;\r\n            &lt;a href=\"@($\"animals\/edit?id={animal.Id}\")\"&gt;Edit&lt;\/a&gt; |\r\n            &lt;a href=\"@($\"animals\/details?id={animal.Id}\")\"&gt;Details&lt;\/a&gt; |\r\n            &lt;a href=\"@($\"animals\/delete?id={animal.Id}\")\"&gt;Delete&lt;\/a&gt;\r\n        &lt;\/TemplateColumn&gt;\r\n    &lt;\/QuickGrid&gt;\r\n\r\n\r\n    &lt;Paginator State=\"@pagination\" \/&gt;\r\n}\r\n\r\n\r\n@code {\r\n    private IQueryable&lt;Animal&gt; animals;\r\n\r\n\r\n    private PaginationState pagination = new PaginationState { ItemsPerPage = 10 };\r\n\r\n\r\n    private string nameFilter;\r\n    private double weightFilter;\r\n\r\n\r\n    private IQueryable&lt;Animal&gt; filteredAnimals\r\n    {\r\n        get\r\n        {\r\n            var result = animals;\r\n\r\n\r\n            if (!string.IsNullOrEmpty(nameFilter))\r\n            {\r\n                result = result.Where(c =&gt; c.Name.Contains(nameFilter, StringComparison.CurrentCultureIgnoreCase));\r\n            }\r\n            if (weightFilter &gt; 0)\r\n            {\r\n                result = result.Where(e =&gt; e.Weight &gt;= weightFilter);\r\n            }\r\n            return result;\r\n        }\r\n    }\r\n\r\n\r\n    protected override async Task OnInitializedAsync()\r\n    {\r\n        animals = (await DB.Animal.ToListAsync()).AsQueryable();\r\n    }\r\n}\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u0436\u0438\u0432\u043e\u0442\u043d\u043e\u0433\u043e, \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 <\/span><b>AnimalType<\/b><span style=\"font-weight: 400;\">, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0435\u043c\u0443 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443 <\/span><b>All<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre class=\"lang:default decode:true \">public enum AnimalType\r\n{\r\n    Mammals,\r\n    Reptiles,\r\n    Amphibians,\r\n    Birds,\r\n    Insects,\r\n    Fish,\r\n    All\r\n}\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">\u0422\u0435\u043f\u0435\u0440\u044c \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <\/span><b>Index.razor<\/b><span style=\"font-weight: 400;\">, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/span><\/p>\n<pre class=\"lang:default decode:true \">@page \"\/animals\"\r\n@attribute [StreamRendering]\r\n@using Microsoft.AspNetCore.Components.QuickGrid\r\n@inject Animals.Data.ApplicationContext DB\r\n@using Animals.Models\r\n@using Microsoft.EntityFrameworkCore\r\n@rendermode RenderMode.InteractiveServer\r\n\r\n\r\n&lt;PageTitle&gt;Index&lt;\/PageTitle&gt;\r\n\r\n\r\n&lt;h1&gt;Index&lt;\/h1&gt;\r\n\r\n\r\n&lt;p&gt;\r\n    &lt;a href=\"animals\/create\"&gt;Create New&lt;\/a&gt;\r\n&lt;\/p&gt;\r\n\r\n\r\n@if (animals == null)\r\n{\r\n    &lt;p&gt;Loading...&lt;\/p&gt;\r\n}\r\nelse\r\n{\r\n    &lt;div class=\"page-size-chooser\"&gt;\r\n        Items per page:\r\n        &lt;select @bind=\"@pagination.ItemsPerPage\"&gt;\r\n            &lt;option&gt;5&lt;\/option&gt;\r\n            &lt;option&gt;10&lt;\/option&gt;\r\n            &lt;option&gt;20&lt;\/option&gt;\r\n            &lt;option&gt;50&lt;\/option&gt;\r\n        &lt;\/select&gt;\r\n    &lt;\/div&gt;\r\n\r\n\r\n    &lt;QuickGrid Class=\"table\" Items=\"filteredAnimals\" Pagination=\"@pagination\"&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.Name\" Sortable=\"true\"&gt;\r\n            &lt;ColumnOptions&gt;\r\n                &lt;div class=\"search-box\"&gt;\r\n                    &lt;input type=\"search\" autofocus @bind=\"nameFilter\" @bind:event=\"oninput\" placeholder=\"Animal name...\" \/&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/ColumnOptions&gt;\r\n        &lt;\/PropertyColumn&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.Gender\" Sortable=\"true\" \/&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.Weight\" Sortable=\"true\"&gt;\r\n            &lt;ColumnOptions&gt;\r\n                &lt;div class=\"search-box\"&gt;\r\n                    &lt;input type=\"range\" autofocus @bind=\"weightFilter\" @bind:event=\"oninput\" min=\"0\" max=\"160\" \/&gt;\r\n                    &lt;span class=\"inline-block w-10\"&gt;@weightFilter&lt;\/span&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/ColumnOptions&gt;\r\n        &lt;\/PropertyColumn&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.AnimalType\" Sortable=\"true\"&gt;\r\n            &lt;ColumnOptions&gt;\r\n                &lt;div class=\"search-box\"&gt;\r\n                    &lt;InputSelect @bind-Value=\"animalTypeFilter\" class=\"form-control\"&gt;\r\n                        @foreach (var value in Enum.GetValues&lt;AnimalType&gt;())\r\n                        {\r\n                            &lt;option value=\"@value\"&gt;@value&lt;\/option&gt;\r\n                        }\r\n                    &lt;\/InputSelect&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/ColumnOptions&gt;\r\n            &lt;\/PropertyColumn&gt;\r\n        &lt;PropertyColumn Property=\"animal =&gt; animal.CreatedAt\" Sortable=\"true\" \/&gt;\r\n\r\n\r\n        &lt;TemplateColumn Context=\"animal\"&gt;\r\n            &lt;a href=\"@($\"animals\/edit?id={animal.Id}\")\"&gt;Edit&lt;\/a&gt; |\r\n            &lt;a href=\"@($\"animals\/details?id={animal.Id}\")\"&gt;Details&lt;\/a&gt; |\r\n            &lt;a href=\"@($\"animals\/delete?id={animal.Id}\")\"&gt;Delete&lt;\/a&gt;\r\n        &lt;\/TemplateColumn&gt;\r\n    &lt;\/QuickGrid&gt;\r\n\r\n\r\n    &lt;Paginator State=\"@pagination\" \/&gt;\r\n}\r\n\r\n\r\n@code {\r\n    private IQueryable&lt;Animal&gt; animals;\r\n\r\n\r\n    private PaginationState pagination = new PaginationState { ItemsPerPage = 10 };\r\n\r\n\r\n    private string nameFilter;\r\n    private double weightFilter;\r\n    private AnimalType animalTypeFilter = AnimalType.All;\r\n\r\n\r\n    private IQueryable&lt;Animal&gt; filteredAnimals\r\n    {\r\n        get\r\n        {\r\n            var result = animals;\r\n\r\n\r\n            if (!string.IsNullOrEmpty(nameFilter))\r\n            {\r\n                result = result.Where(c =&gt; c.Name.Contains(nameFilter, StringComparison.CurrentCultureIgnoreCase));\r\n            }\r\n            if (weightFilter &gt; 0)\r\n            {\r\n                result = result.Where(e =&gt; e.Weight &gt;= weightFilter);\r\n            }\r\n            if (animalTypeFilter != AnimalType.All)\r\n            {\r\n                result = result.Where(e =&gt; e.AnimalType == animalTypeFilter);\r\n            }\r\n            return result;\r\n        }\r\n    }\r\n\r\n\r\n    protected override async Task OnInitializedAsync()\r\n    {\r\n        animals = (await DB.Animal.ToListAsync()).AsQueryable();\r\n    }\r\n}\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u0443:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1321\" src=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/bez-imeni-1-5.jpg\" alt=\"blazor enum filter\" width=\"684\" height=\"373\" srcset=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/bez-imeni-1-5.jpg 684w, https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/bez-imeni-1-5-300x164.jpg 300w\" sizes=\"auto, (max-width: 684px) 100vw, 684px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">\u0422\u0430\u043a \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 <\/span><b>AnimalType<\/b><span style=\"font-weight: 400;\"> \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u043b\u043e \u043d\u043e\u0432\u0443\u044e \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443 <\/span><b>All<\/b><span style=\"font-weight: 400;\">, \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0435\u0435 \u0441\u043a\u0440\u044b\u0442\u044c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 <\/span><b>Create.razor<\/b><span style=\"font-weight: 400;\"> \u0438 <\/span><b>Edit.razor<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre class=\"lang:default decode:true \">&lt;InputSelect id=\"animaltype\" @bind-Value=\"Animal.AnimalType\" class=\"form-control\"&gt;\r\n    @foreach (var value in Enum.GetValues&lt;AnimalType&gt;().Where(e=&gt;e != AnimalType.All))\r\n    {\r\n        &lt;option value=\"@value\"&gt;@value&lt;\/option&gt;\r\n    }\r\n&lt;\/InputSelect&gt;\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">\u041d\u0430 \u044d\u0442\u043e\u043c \u0432\u0441\u0435, \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0432\u0430\u043c \u0432\u0441\u0435 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c. \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442, \u043e\u043d \u043d\u0430\u043c \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0442\u0435\u043c\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/span><\/p>\n<p>\u042f \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u0432\u0430\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c \u0447\u0438\u0442\u0430\u0442\u044c \u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e, \u0438 \u043e\u043d\u0430 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043b\u0435\u0433\u043a\u043e\u0439 \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f. \u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0434\u0430\u0439\u0442\u0435 \u043c\u043d\u0435 \u0437\u043d\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u043b\u0438\u0431\u043e \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0438\u043b\u0438 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0422\u0430\u043a \u0436\u0435 \u0432\u0430\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f &#8212; <a href=\"https:\/\/dijix.com.ua\/blog\/proekt-s-ispolzovaniem-razor-pages-crud-operaczii\/\">\u041f\u0440\u043e\u0435\u043a\u0442 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Razor Pages (CRUD \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438)<\/a>.<\/p>\n<hr \/>\n<h4><span class=\"ez-toc-section\" id=\"%D0%92%D1%8B_%D1%85%D0%BE%D1%82%D0%B8%D1%82%D0%B5_%D0%BD%D0%B0%D1%83%D1%87%D0%B8%D1%82%D1%81%D1%8F_%D0%BF%D0%B8%D1%81%D0%B0%D1%82%D1%8C_%D0%BA%D0%BE%D0%B4_%D0%BD%D0%B0_%D1%8F%D0%B7%D1%8B%D0%BA%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F_C\"><\/span><strong>\u0412\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043d\u0430\u0443\u0447\u0438\u0442\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f C#?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0435 \u0438\u0437 \u0441\u0430\u0439\u0442\u043e\u0432, \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432, \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c\u043c-\u0431\u043e\u0442\u043e\u0432 \u0438 \u0442.\u0434.<\/p>\n<p><a href=\"https:\/\/dijix.com.ua\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-94 size-full\" src=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2022\/08\/logog-brand.png\" alt=\"\" width=\"355\" height=\"77\" srcset=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2022\/08\/logog-brand.png 355w, https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2022\/08\/logog-brand-300x65.png 300w\" sizes=\"auto, (max-width: 355px) 100vw, 355px\" \/><\/a><\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u0435 \u043a \u043d\u0430\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 <strong><a href=\"https:\/\/dijix.com.ua\/\">Dijix<\/a>\u00a0<\/strong>\u0438 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u044c\u0442\u0435\u0441\u044c \u0441 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u043c\u0438 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f, \u043c\u044b \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u043d\u044f\u0442\u0438\u044f\u0445, \u043a\u0430\u043a \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u0432. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0437\u044f\u0442\u044c \u043a\u0430\u043a \u043e\u0434\u043d\u043e \u0437\u0430\u043d\u044f\u0442\u0438\u0435 \u0434\u043b\u044f \u043f\u0440\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0449\u0435\u0433\u043e \u0412\u0430\u0441 \u0432\u043e\u043f\u0440\u043e\u0441\u0430, \u0442\u0430\u043a \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e, \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043f\u043b\u043e\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043b\u0438\u0447\u043d\u043e\u043c\u0443 \u043a\u0430\u0431\u0438\u043d\u0435\u0442\u0443, \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u0442\u0443\u0434\u0435\u043d\u0442 \u043f\u043e\u0432\u044b\u0441\u0438\u0442 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u043e\u0435\u0433\u043e \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f, \u0432\u00a0\u0432\u0430\u0448\u0435\u043c \u0440\u0430\u0441\u043f\u043e\u0440\u044f\u0436\u0435\u043d\u0438\u0438:<\/p>\n<ul>\n<li>\u0414\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u0440\u043e\u0439\u0434\u0435\u043d\u043d\u043e\u043c\u0443 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0443<\/li>\n<li>\u0422\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0442\u0430\u0442\u044c\u0438<\/li>\n<li>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u043d\u0438\u0433<\/li>\n<li>\u041e\u043d\u043b\u0430\u0439\u043d \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/li>\n<li>\u041e\u0431\u0449\u0435\u043d\u0438\u0435 \u0432 \u0437\u0430\u043a\u0440\u044b\u0442\u044b\u0445 \u0433\u0440\u0443\u043f\u043f\u0430\u0445<\/li>\n<\/ul>\n<blockquote>\n<p style=\"text-align: right;\"><a href=\"https:\/\/dijix.com.ua\/\">https:\/\/dijix.com.ua<\/a><\/p>\n<p style=\"text-align: right;\">\u0416\u0438\u0432\u0438 \u0432 \u0441\u0432\u043e\u0435\u043c \u043c\u0438\u0440\u0435, \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u0443\u0439 \u0432 <a href=\"https:\/\/ms.dijix.com.ua\/\">\u043d\u0430\u0448\u0435\u043c<\/a>.<\/p>\n<\/blockquote>\n<hr \/>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435, \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 CRUD \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0435\u0439 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 Blazor Server. \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0431\u0430\u0437\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445 AnimalsDb, \u0430&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/\">\u0427\u0438\u0442\u0430\u0442\u044c \u0434\u0430\u043b\u044c\u0448\u0435<span class=\"screen-reader-text\">Crud \u041e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 Blazor Server Side (SSR )<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":1312,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"ru_RU","_original_post":"https:\/\/dijix.com.ua\/blog\/?p=1298","footnotes":""},"categories":[8,23],"tags":[],"class_list":["post-1298","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-asp-net-core","category-blazor-server","ru-RU","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>Crud \u041e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 Blazor Server Side (SSR ) - Dijix - \u0411\u043b\u043e\u0433<\/title>\r\n<meta name=\"description\" content=\"\u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435, \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 CRUD \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0435\u0439 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 Blazor Server.\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/\" \/>\r\n<meta property=\"og:locale\" content=\"ru_RU\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Crud \u041e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 Blazor Server Side (SSR ) - Dijix - \u0411\u043b\u043e\u0433\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Dijix - \u0411\u043b\u043e\u0433\" \/>\r\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Dijixs\" \/>\r\n<meta property=\"article:published_time\" content=\"2024-05-24T16:49:30+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2024-05-27T13:22:23+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/snimok-ekrana-2024-05-24-194524.png\" \/>\r\n\t<meta property=\"og:image:width\" content=\"703\" \/>\r\n\t<meta property=\"og:image:height\" content=\"382\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\r\n<meta name=\"author\" content=\"\u041b\u0435\u043e\u043d\u0438\u0434 \u041a\u0430\u0440\u0443\u043d\u0430\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"\u041d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0430\u0432\u0442\u043e\u0440\u043e\u043c\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u041b\u0435\u043e\u043d\u0438\u0434 \u041a\u0430\u0440\u0443\u043d\u0430\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 \u043c\u0438\u043d\u0443\u0442\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/\"},\"author\":{\"name\":\"\u041b\u0435\u043e\u043d\u0438\u0434 \u041a\u0430\u0440\u0443\u043d\u0430\",\"@id\":\"https:\/\/dijix.com.ua\/blog\/#\/schema\/person\/4ce2240cdf3db189e17ca0ff422a0c3d\"},\"headline\":\"Crud \u041e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 Blazor Server Side (SSR )\",\"datePublished\":\"2024-05-24T16:49:30+00:00\",\"dateModified\":\"2024-05-27T13:22:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/\"},\"wordCount\":2140,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/dijix.com.ua\/blog\/#organization\"},\"articleSection\":[\"Asp.Net Core\",\"Blazor Server\"],\"inLanguage\":\"ru-RU\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/\",\"url\":\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/\",\"name\":\"Crud \u041e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 Blazor Server Side (SSR ) - Dijix - \u0411\u043b\u043e\u0433\",\"isPartOf\":{\"@id\":\"https:\/\/dijix.com.ua\/blog\/#website\"},\"datePublished\":\"2024-05-24T16:49:30+00:00\",\"dateModified\":\"2024-05-27T13:22:23+00:00\",\"description\":\"\u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435, \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 CRUD \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0435\u0439 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 Blazor Server.\",\"breadcrumb\":{\"@id\":\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/#breadcrumb\"},\"inLanguage\":\"ru-RU\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\",\"item\":\"https:\/\/dijix.com.ua\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Crud \u041e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 Blazor Server Side (SSR )\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/dijix.com.ua\/blog\/#website\",\"url\":\"https:\/\/dijix.com.ua\/blog\/\",\"name\":\"Dijix - \u0411\u043b\u043e\u0433\",\"description\":\"\ud83d\udc9c\",\"publisher\":{\"@id\":\"https:\/\/dijix.com.ua\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/dijix.com.ua\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"ru-RU\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/dijix.com.ua\/blog\/#organization\",\"name\":\"Dijix - \u0411\u043b\u043e\u0433\",\"url\":\"https:\/\/dijix.com.ua\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ru-RU\",\"@id\":\"https:\/\/dijix.com.ua\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2022\/08\/\u0421\u043d\u0438\u043c\u043e\u043a.png\",\"contentUrl\":\"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2022\/08\/\u0421\u043d\u0438\u043c\u043e\u043a.png\",\"width\":159,\"height\":92,\"caption\":\"Dijix - \u0411\u043b\u043e\u0433\"},\"image\":{\"@id\":\"https:\/\/dijix.com.ua\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Dijixs\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/dijix.com.ua\/blog\/#\/schema\/person\/4ce2240cdf3db189e17ca0ff422a0c3d\",\"name\":\"\u041b\u0435\u043e\u043d\u0438\u0434 \u041a\u0430\u0440\u0443\u043d\u0430\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ru-RU\",\"@id\":\"https:\/\/dijix.com.ua\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e3e8fa72f5adf168d30934fb574a97a5e812e7d6e2795075f0e7ea19311e3ba9?s=96&d=monsterid&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e3e8fa72f5adf168d30934fb574a97a5e812e7d6e2795075f0e7ea19311e3ba9?s=96&d=monsterid&r=g\",\"caption\":\"\u041b\u0435\u043e\u043d\u0438\u0434 \u041a\u0430\u0440\u0443\u043d\u0430\"},\"sameAs\":[\"https:\/\/dijix.com.ua\/blog\"],\"url\":\"https:\/\/dijix.com.ua\/blog\/author\/admin\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Crud \u041e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 Blazor Server Side (SSR ) - Dijix - \u0411\u043b\u043e\u0433","description":"\u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435, \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 CRUD \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0435\u0439 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 Blazor Server.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/","og_locale":"ru_RU","og_type":"article","og_title":"Crud \u041e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 Blazor Server Side (SSR ) - Dijix - \u0411\u043b\u043e\u0433","og_url":"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/","og_site_name":"Dijix - \u0411\u043b\u043e\u0433","article_publisher":"https:\/\/www.facebook.com\/Dijixs","article_published_time":"2024-05-24T16:49:30+00:00","article_modified_time":"2024-05-27T13:22:23+00:00","og_image":[{"width":703,"height":382,"url":"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2024\/05\/snimok-ekrana-2024-05-24-194524.png","type":"image\/png"}],"author":"\u041b\u0435\u043e\u043d\u0438\u0434 \u041a\u0430\u0440\u0443\u043d\u0430","twitter_card":"summary_large_image","twitter_misc":{"\u041d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0430\u0432\u0442\u043e\u0440\u043e\u043c":"\u041b\u0435\u043e\u043d\u0438\u0434 \u041a\u0430\u0440\u0443\u043d\u0430","\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f":"15 \u043c\u0438\u043d\u0443\u0442"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/#article","isPartOf":{"@id":"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/"},"author":{"name":"\u041b\u0435\u043e\u043d\u0438\u0434 \u041a\u0430\u0440\u0443\u043d\u0430","@id":"https:\/\/dijix.com.ua\/blog\/#\/schema\/person\/4ce2240cdf3db189e17ca0ff422a0c3d"},"headline":"Crud \u041e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 Blazor Server Side (SSR )","datePublished":"2024-05-24T16:49:30+00:00","dateModified":"2024-05-27T13:22:23+00:00","mainEntityOfPage":{"@id":"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/"},"wordCount":2140,"commentCount":0,"publisher":{"@id":"https:\/\/dijix.com.ua\/blog\/#organization"},"articleSection":["Asp.Net Core","Blazor Server"],"inLanguage":"ru-RU","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/","url":"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/","name":"Crud \u041e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 Blazor Server Side (SSR ) - Dijix - \u0411\u043b\u043e\u0433","isPartOf":{"@id":"https:\/\/dijix.com.ua\/blog\/#website"},"datePublished":"2024-05-24T16:49:30+00:00","dateModified":"2024-05-27T13:22:23+00:00","description":"\u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435, \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 CRUD \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0435\u0439 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 Blazor Server.","breadcrumb":{"@id":"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/#breadcrumb"},"inLanguage":"ru-RU","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dijix.com.ua\/blog\/crud-operaczii-v-blazor-server-side\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/dijix.com.ua\/blog\/"},{"@type":"ListItem","position":2,"name":"Crud \u041e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 Blazor Server Side (SSR )"}]},{"@type":"WebSite","@id":"https:\/\/dijix.com.ua\/blog\/#website","url":"https:\/\/dijix.com.ua\/blog\/","name":"Dijix - \u0411\u043b\u043e\u0433","description":"\ud83d\udc9c","publisher":{"@id":"https:\/\/dijix.com.ua\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dijix.com.ua\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"ru-RU"},{"@type":"Organization","@id":"https:\/\/dijix.com.ua\/blog\/#organization","name":"Dijix - \u0411\u043b\u043e\u0433","url":"https:\/\/dijix.com.ua\/blog\/","logo":{"@type":"ImageObject","inLanguage":"ru-RU","@id":"https:\/\/dijix.com.ua\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2022\/08\/\u0421\u043d\u0438\u043c\u043e\u043a.png","contentUrl":"https:\/\/dijix.com.ua\/blog\/wp-content\/uploads\/2022\/08\/\u0421\u043d\u0438\u043c\u043e\u043a.png","width":159,"height":92,"caption":"Dijix - \u0411\u043b\u043e\u0433"},"image":{"@id":"https:\/\/dijix.com.ua\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Dijixs"]},{"@type":"Person","@id":"https:\/\/dijix.com.ua\/blog\/#\/schema\/person\/4ce2240cdf3db189e17ca0ff422a0c3d","name":"\u041b\u0435\u043e\u043d\u0438\u0434 \u041a\u0430\u0440\u0443\u043d\u0430","image":{"@type":"ImageObject","inLanguage":"ru-RU","@id":"https:\/\/dijix.com.ua\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e3e8fa72f5adf168d30934fb574a97a5e812e7d6e2795075f0e7ea19311e3ba9?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e3e8fa72f5adf168d30934fb574a97a5e812e7d6e2795075f0e7ea19311e3ba9?s=96&d=monsterid&r=g","caption":"\u041b\u0435\u043e\u043d\u0438\u0434 \u041a\u0430\u0440\u0443\u043d\u0430"},"sameAs":["https:\/\/dijix.com.ua\/blog"],"url":"https:\/\/dijix.com.ua\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/dijix.com.ua\/blog\/wp-json\/wp\/v2\/posts\/1298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dijix.com.ua\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dijix.com.ua\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dijix.com.ua\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dijix.com.ua\/blog\/wp-json\/wp\/v2\/comments?post=1298"}],"version-history":[{"count":8,"href":"https:\/\/dijix.com.ua\/blog\/wp-json\/wp\/v2\/posts\/1298\/revisions"}],"predecessor-version":[{"id":1325,"href":"https:\/\/dijix.com.ua\/blog\/wp-json\/wp\/v2\/posts\/1298\/revisions\/1325"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dijix.com.ua\/blog\/wp-json\/wp\/v2\/media\/1312"}],"wp:attachment":[{"href":"https:\/\/dijix.com.ua\/blog\/wp-json\/wp\/v2\/media?parent=1298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dijix.com.ua\/blog\/wp-json\/wp\/v2\/categories?post=1298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dijix.com.ua\/blog\/wp-json\/wp\/v2\/tags?post=1298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}