{"id":1319,"date":"2024-05-25T07:23:50","date_gmt":"2024-05-25T07:23:50","guid":{"rendered":"https:\/\/dijix.com.ua\/blog\/?p=1319"},"modified":"2024-05-27T13:22:26","modified_gmt":"2024-05-27T13:22:26","slug":"crud-operaczii-v-blazor-server-side","status":"publish","type":"post","link":"https:\/\/dijix.com.ua\/blog\/uk\/crud-operaczii-v-blazor-server-side\/","title":{"rendered":"Crud \u041e\u043f\u0435\u0440\u0430\u0446\u0456\u0457 \u0432 Blazor Server Side (SSR )"},"content":{"rendered":"<p>\u0423 \u0446\u044c\u043e\u043c\u0443 \u0443\u0440\u043e\u0446\u0456, \u043c\u0438 \u0440\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e \u044f\u043a \u0448\u0432\u0438\u0434\u043a\u043e \u0456 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u0456\u0437\u0443\u0432\u0430\u0442\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0438\u0439 \u043d\u0430\u0431\u0456\u0440 CRUD \u043e\u043f\u0435\u0440\u0430\u0446\u0456\u0454\u044e \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0456 <strong>Blazor Server<\/strong>.<\/p>\n<p>\u0414\u043e\u0434\u0430\u0442\u043e\u043a \u0431\u0443\u0434\u0435 \u043a\u0435\u0440\u0443\u0432\u0430\u0442\u0438 \u0431\u0430\u0437\u043e\u044e \u0434\u0430\u043d\u0438\u0445 <strong>AnimalsDb<\/strong>, \u0430 \u0439\u043e\u0433\u043e \u0433\u043e\u043b\u043e\u0432\u043d\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0430 \u043d\u0430\u043f\u0440\u0438\u043a\u0456\u043d\u0446\u0456 \u0431\u0443\u0434\u0435 \u0432\u0438\u0433\u043b\u044f\u0434\u0430\u0442\u0438, \u044f\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0432\u0438\u0449\u0435.<\/p>\n<p>\u0423 \u0446\u044c\u043e\u043c\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0456, \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u0456 \u0441\u043f\u043e\u0441\u043e\u0431\u0438 \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0456 \u00ab<strong>Scaffolding Tools<\/strong>\u00bb.<\/p>\n<p>Scaffolding Tools &#8211; \u043f\u043e\u0442\u0443\u0436\u043d\u0438\u0439 \u043d\u0430\u0431\u0456\u0440 \u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0456\u0432, \u044f\u043a\u0438\u0439 \u0434\u0430\u0454 \u0437\u043c\u043e\u0433\u0443 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u043e \u0441\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u0431\u0430\u0437\u043e\u0432\u0438\u0439 \u043a\u043e\u0434 \u0434\u043b\u044f \u0432\u0435\u0431-\u0434\u043e\u0434\u0430\u0442\u043a\u0456\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0456 \u043d\u0430\u044f\u0432\u043d\u043e\u0457 \u0431\u0430\u0437\u0438 \u0434\u0430\u043d\u0438\u0445 \u0430\u0431\u043e \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0434\u0430\u043d\u0438\u0445. \u0412\u043e\u043d\u0438 \u0441\u043f\u0440\u043e\u0449\u0443\u044e\u0442\u044c \u0456 \u043f\u0440\u0438\u0441\u043a\u043e\u0440\u044e\u044e\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441 \u0440\u043e\u0437\u0440\u043e\u0431\u043a\u0438, \u0434\u0430\u044e\u0447\u0438 \u0437\u043c\u043e\u0433\u0443 \u0433\u0435\u043d\u0435\u0440\u0443\u0432\u0430\u0442\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0456 CRUD (<strong>Create, Read, Update, Delete<\/strong>) \u043e\u043f\u0435\u0440\u0430\u0446\u0456\u0457 \u0442\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u0440\u0438 \u0434\u043b\u044f \u043a\u0435\u0440\u0443\u0432\u0430\u043d\u043d\u044f \u0434\u0430\u043d\u0438\u043c\u0438.<\/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 \" >Table of Contents<\/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-69e20bf6ace65\" ><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-69e20bf6ace65\"  type=\"checkbox\" id=\"item-69e20bf6ace65\"><\/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\/uk\/crud-operaczii-v-blazor-server-side\/#%D0%A1%D1%82%D0%B2%D0%BE%D1%80%D0%B5%D0%BD%D0%BD%D1%8F_%D1%82%D0%B0_%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F_%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D1%83\" title=\"\u0421\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0442\u0430 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0443\">\u0421\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0442\u0430 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0443<\/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\/uk\/crud-operaczii-v-blazor-server-side\/#%D0%9C%D0%BE%D0%B4%D0%B5%D0%BB%D1%8C_%D1%96_%D0%A0%D0%B5%D0%BF%D0%BE%D0%B7%D0%B8%D1%82%D0%BE%D1%80%D1%96%D0%B9\" title=\"\u041c\u043e\u0434\u0435\u043b\u044c \u0456 \u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0456\u0439\">\u041c\u043e\u0434\u0435\u043b\u044c \u0456 \u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0456\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\/uk\/crud-operaczii-v-blazor-server-side\/#%D0%A1%D1%82%D0%B2%D0%BE%D1%80%D0%B5%D0%BD%D0%BD%D1%8F_%D0%B1%D0%B0%D0%B7%D0%B8_%D0%B4%D0%B0%D0%BD%D0%B8%D1%85\" title=\"\u0421\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0431\u0430\u0437\u0438 \u0434\u0430\u043d\u0438\u0445\">\u0421\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0431\u0430\u0437\u0438 \u0434\u0430\u043d\u0438\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\/uk\/crud-operaczii-v-blazor-server-side\/#%D0%92%D0%B0%D0%BB%D1%96%D0%B4%D0%B0%D1%86%D1%96%D1%8F_%D0%B4%D0%B0%D0%BD%D0%B8%D1%85\" title=\"\u0412\u0430\u043b\u0456\u0434\u0430\u0446\u0456\u044f \u0434\u0430\u043d\u0438\u0445\">\u0412\u0430\u043b\u0456\u0434\u0430\u0446\u0456\u044f \u0434\u0430\u043d\u0438\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\/uk\/crud-operaczii-v-blazor-server-side\/#%D0%A1%D1%82%D0%B2%D0%BE%D1%80%D0%B5%D0%BD%D0%BD%D1%8F_%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%D1%96%D1%89%D0%B5%D0%BD%D0%BD%D1%8F\" title=\"\u0421\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u043f\u043e\u0432\u0456\u0449\u0435\u043d\u043d\u044f\">\u0421\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u043f\u043e\u0432\u0456\u0449\u0435\u043d\u043d\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\/uk\/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\/uk\/crud-operaczii-v-blazor-server-side\/#%D0%9F%D0%B0%D0%B3%D1%96%D0%BD%D0%B0%D1%86%D1%96%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\u0456\u043d\u0430\u0446\u0456\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 QuickGrid\">\u041f\u0430\u0433\u0456\u043d\u0430\u0446\u0456\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\/uk\/crud-operaczii-v-blazor-server-side\/#%D0%A1%D0%BE%D1%80%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F_%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\u0443\u0432\u0430\u043d\u043d\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 QuickGrid\">\u0421\u043e\u0440\u0442\u0443\u0432\u0430\u043d\u043d\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-9\" href=\"https:\/\/dijix.com.ua\/blog\/uk\/crud-operaczii-v-blazor-server-side\/#%D0%A4%D1%96%D0%BB%D1%8C%D1%82%D1%80%D0%B0%D1%86%D1%96%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\u0456\u043b\u044c\u0442\u0440\u0430\u0446\u0456\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 QuickGrid\">\u0424\u0456\u043b\u044c\u0442\u0440\u0430\u0446\u0456\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\/uk\/crud-operaczii-v-blazor-server-side\/#%D0%92%D0%B8_%D1%85%D0%BE%D1%87%D0%B5%D1%82%D0%B5_%D0%BD%D0%B0%D0%B2%D1%87%D0%B8%D1%82%D0%B8%D1%81%D1%8F_%D0%BF%D0%B8%D1%81%D0%B0%D1%82%D0%B8_%D0%BA%D0%BE%D0%B4_%D0%BC%D0%BE%D0%B2%D0%BE%D1%8E_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F_C\" title=\"\u0412\u0438 \u0445\u043e\u0447\u0435\u0442\u0435 \u043d\u0430\u0432\u0447\u0438\u0442\u0438\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u0438 \u043a\u043e\u0434 \u043c\u043e\u0432\u043e\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u0443\u0432\u0430\u043d\u043d\u044f C#?\">\u0412\u0438 \u0445\u043e\u0447\u0435\u0442\u0435 \u043d\u0430\u0432\u0447\u0438\u0442\u0438\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u0438 \u043a\u043e\u0434 \u043c\u043e\u0432\u043e\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u0443\u0432\u0430\u043d\u043d\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%D1%82%D0%B2%D0%BE%D1%80%D0%B5%D0%BD%D0%BD%D1%8F_%D1%82%D0%B0_%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F_%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D1%83\"><\/span><b>\u0421\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0442\u0430 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0443<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0429\u043e\u0431 \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u043f\u0440\u043e\u0454\u043a\u0442 <strong>Animals<\/strong>, \u0437\u0430\u043f\u0443\u0441\u0442\u0456\u0442\u044c Visual Studio \u0456 \u0432\u0438\u0431\u0435\u0440\u0456\u0442\u044c \u0443 \u043c\u0435\u043d\u044e <strong>File<\/strong> (\u0424\u0430\u0439\u043b) &#8211; <strong>New Projec<\/strong>t (\u0421\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u043f\u0440\u043e\u0454\u043a\u0442). \u0412\u043a\u0430\u0436\u0456\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0454\u043a\u0442\u0443 <strong>Blazor Web App<\/strong>.<\/p>\n<p>\u0412\u0432\u0435\u0434\u0456\u0442\u044c Animals, \u0443 \u043f\u043e\u043b\u0456 Name, \u043d\u0430 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0456\u0439 \u0441\u0442\u043e\u0440\u0456\u043d\u0446\u0456 \u0432\u043a\u0430\u0436\u0456\u0442\u044c .<strong>Net 8.0<\/strong>, <strong>Intractive render mode: Server<\/strong>, \u0432\u0456\u0434\u0437\u043d\u0430\u0447\u0438\u043c\u043e checkbox \u0434\u043b\u044f \u043f\u0443\u043d\u043a\u0442\u0443 &#8211; <strong>Include sample pages<\/strong>. \u041d\u0430\u0442\u0438\u0441\u043d\u0456\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 Create:<\/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>\u041d\u0430 \u0434\u0430\u043d\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0443 \u043d\u0430\u0441 \u0454 \u043f\u043e\u0447\u0430\u0442\u043a\u043e\u0432\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c\u043e \u043f\u0440\u043e\u0435\u043a\u0442 (Crtl + F5), \u0449\u043e\u0431 \u043f\u0435\u0440\u0435\u043a\u043e\u043d\u0430\u0442\u0438\u0441\u044f, \u0449\u043e \u0432\u0441\u0435 \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0443:<\/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_%D1%96_%D0%A0%D0%B5%D0%BF%D0%BE%D0%B7%D0%B8%D1%82%D0%BE%D1%80%D1%96%D0%B9\"><\/span><strong>\u041c\u043e\u0434\u0435\u043b\u044c \u0456 \u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0456\u0439<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u041c\u043e\u0434\u0435\u043b\u044c \u0434\u043b\u044f \u0434\u043e\u0434\u0430\u0442\u043a\u0430 <strong>Animals<\/strong> \u0431\u0443\u0434\u0435 \u0437\u0430\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u0441\u043f\u0438\u0441\u043a\u0443 \u0444\u0456\u043b\u044c\u043c\u0456\u0432. \u0414\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u0440\u0435\u0430\u043b\u0456\u0437\u0443\u0454\u043c\u043e \u043a\u043b\u0430\u0441 Animals. \u041c\u0438 \u0431\u0443\u0434\u0435\u043c\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0446\u0435\u0439 \u043a\u043b\u0430\u0441 \u0437 Entity Framework Core (EF Core) \u0434\u043b\u044f \u0440\u043e\u0431\u043e\u0442\u0438 \u0437 \u0431\u0430\u0437\u043e\u044e \u0434\u0430\u043d\u0438\u0445. EF Core &#8211; \u0446\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043e\u0431&#8217;\u0454\u043a\u0442\u043d\u043e-\u0440\u0435\u043b\u044f\u0446\u0456\u0439\u043d\u043e\u0433\u043e \u0432\u0456\u0434\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f (ORM), \u044f\u043a\u0438\u0439 \u0441\u043f\u0440\u043e\u0449\u0443\u0454 \u043a\u043e\u0434 \u0434\u043e\u0441\u0442\u0443\u043f\u0443 \u0434\u043e \u0434\u0430\u043d\u0438\u0445. \u041a\u043b\u0430\u0441\u0438 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u043d\u0435 \u043c\u0430\u044e\u0442\u044c \u0437\u0430\u043b\u0435\u0436\u043d\u043e\u0441\u0442\u0456 \u0432\u0456\u0434 EF Core. \u0412\u043e\u043d\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0438\u0437\u043d\u0430\u0447\u0430\u044e\u0442\u044c \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0456 \u0434\u0430\u043d\u0438\u0445, \u044f\u043a\u0456 \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u0442\u0438\u043c\u0443\u0442\u044c\u0441\u044f \u0432 \u0431\u0430\u0437\u0456 \u0434\u0430\u043d\u0438\u0445.<\/p>\n<p>\u0421\u0442\u0432\u043e\u0440\u0456\u0442\u044c \u043f\u0430\u043f\u043a\u0443 <strong>Models<\/strong> \u0456 \u0434\u043e\u0434\u0430\u0439\u0442\u0435 \u0432 \u043d\u0435\u0457 \u0444\u0430\u0439\u043b \u043a\u043b\u0430\u0441\u0443 \u043d\u0430 \u0456\u043c&#8217;\u044f <strong>Animal.cs<\/strong> \u0437 \u0442\u0430\u043a\u0438\u043c \u0432\u043c\u0456\u0441\u0442\u043e\u043c:<\/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>\u041f\u043e\u0442\u0456\u043c \u0434\u043e\u0434\u0430\u0439\u0442\u0435 \u0449\u0435 \u043e\u0434\u0438\u043d \u043a\u043b\u0430\u0441 \u043f\u0456\u0434 \u043d\u0430\u0437\u0432\u043e\u044e <strong>AnimalType.cs<\/strong>, \u044f\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0447\u0435:<\/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>\u041d\u0430\u0441\u0442\u0430\u0432 \u0447\u0430\u0441 \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u0432\u0441\u0456 \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u0456 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438, \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0447\u0438 scaffolding. \u041d\u0430\u0442\u0438\u0441\u043d\u0435\u043c\u043e \u043f\u0440\u0430\u0432\u043e\u044e \u043a\u043b\u0430\u0432\u0456\u0448\u0435\u044e \u043f\u043e \u043f\u0430\u043f\u0446\u0456 <strong>Components \/ Pages<\/strong> \u0456 \u043d\u0430\u0442\u0438\u0441\u043d\u0435\u043c\u043e \u043f\u0440\u0430\u0432\u043e\u044e \u043a\u043b\u0430\u0432\u0456\u0448\u0435\u044e \u043c\u0438\u0448\u043a\u0438 <strong>Add &#8211; New Scaffoldet Item &#8211; Razor Components using Entity Framework (CRUD)<\/strong>:<\/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>\u0423 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u043e\u043c\u0443 \u0432\u0456\u043a\u043d\u0456 \u043e\u0431\u0438\u0440\u0430\u0454\u043c\u043e \u0442\u0430\u043a\u0456 \u043f\u0443\u043d\u043a\u0442\u0438:<\/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>\u0423\u0432\u0430\u0433\u0430, \u0446\u044f \u043e\u043f\u0446\u0456\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0442\u0456\u043b\u044c\u043a\u0438 \u0437 Visual Studio preview 17.9. \u041d\u0430\u0442\u0438\u0441\u043a\u0430\u0454\u043c\u043e \u043a\u043d\u043e\u043f\u043a\u0443 \u00abAdd\u00bb.<\/p>\n<p>\u042f\u043a\u0449\u043e \u043f\u0456\u0434 \u0447\u0430\u0441 \u0434\u043e\u0434\u0430\u0432\u0430\u043d\u043d\u044f \u0432\u0438\u043d\u0438\u043a\u043b\u0430 \u043f\u043e\u043c\u0438\u043b\u043a\u0430, \u0437 \u0442\u0430\u043a\u0438\u043c \u0432\u043c\u0456\u0441\u0442\u043e\u043c:<\/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\u0456\u0442\u044c \u0443 <\/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;\"> \u0456 \u0432\u043a\u0430\u0436\u0456\u0442\u044c \u0443 \u043f\u043e\u0448\u0443\u043a\u0443:<\/span><\/p>\n<p><b>Install-Package Microsoft.VisualStudio.Web.CodeGeneration.Design<\/b><\/p>\n<p>\u0412\u0441\u0442\u0430\u043d\u043e\u0432\u0456\u0442\u044c \u0446\u044e \u0431\u0456\u0431\u043b\u0456\u043e\u0442\u0435\u043a\u0443. \u0412\u0410\u0416\u041b\u0418\u0412\u041e! \u042f\u043a\u0449\u043e \u0431\u0456\u0431\u043b\u0456\u043e\u0442\u0435\u043a\u0430 \u0432\u0436\u0435 \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430 \u0456 \u043f\u043e\u043c\u0438\u043b\u043a\u0430, \u044f\u043a \u0456 \u0440\u0430\u043d\u0456\u0448\u0435, \u0432\u0438\u043d\u0438\u043a\u0430\u0454, \u0441\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0437\u0456\u0431\u0440\u0430\u0442\u0438 \u043f\u0440\u043e\u0454\u043a\u0442 \u0430\u0431\u043e \u0436 \u043f\u0435\u0440\u0435\u0432\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0438 \u0446\u044e \u0431\u0456\u0431\u043b\u0456\u043e\u0442\u0435\u043a\u0443 \u0432\u0440\u0443\u0447\u043d\u0443.<\/p>\n<p>\u041d\u0430 \u0446\u044c\u043e\u043c\u0443 \u0435\u0442\u0430\u043f\u0456 \u043f\u0440\u0430\u0446\u044e\u0454 \u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 <strong>scaffolding<\/strong>. \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u0435 \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443 \u0431\u0430\u0437\u0438 \u0434\u0430\u043d\u0438\u0445 \u0456 \u043c\u0435\u0442\u043e\u0434\u0456\u0432 \u0442\u0430 \u043f\u043e\u0434\u0430\u043d\u044c <strong>CRUD<\/strong> (create, read, update, and delete) \u0434\u0456\u0439 \u0432\u0456\u0434\u043e\u043c\u043e \u044f\u043a scaffolding.<\/p>\n<p>\u0421\u0442\u0432\u043e\u0440\u0435\u043d\u0456 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438 Razor \u0434\u043e\u0434\u0430\u044e\u0442\u044c\u0441\u044f \u0434\u043e \u043f\u0430\u043f\u043a\u0438 Pages \u043f\u0440\u043e\u0454\u043a\u0442\u0443 \u0432 \u0437\u0433\u0435\u043d\u0435\u0440\u043e\u0432\u0430\u043d\u0443 \u043f\u0430\u043f\u043a\u0443, \u043d\u0430\u0437\u0432\u0430\u043d\u0443 \u0437\u0430 \u0456\u043c&#8217;\u044f\u043c \u043a\u043b\u0430\u0441\u0443 \u043c\u043e\u0434\u0435\u043b\u0456. \u0417\u0433\u0435\u043d\u0435\u0440\u043e\u0432\u0430\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Index \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454 QuickGrid \u0434\u043b\u044f \u0432\u0456\u0434\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u0434\u0430\u043d\u0438\u0445, \u043f\u0440\u043e \u043d\u044c\u043e\u0433\u043e \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c\u043e \u0442\u0440\u043e\u0445\u0438 \u043f\u0456\u0437\u043d\u0456\u0448\u0435.<\/p>\n<p>\u0423 \u043d\u0430\u0448\u043e\u043c\u0443 \u0432\u0438\u043f\u0430\u0434\u043a\u0443, \u0432 \u043f\u0430\u043f\u0446\u0456 <strong>Pages<\/strong>, \u0437&#8217;\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u043f\u0430\u043f\u043a\u0430 <strong>AnimalPages<\/strong>, \u0437 \u0442\u0430\u043a\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\u0456\u0439:<\/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>\u0423 \u043a\u043e\u0440\u0435\u043d\u0456 \u043f\u0440\u043e\u0435\u043a\u0442\u0443 \u043c\u043e\u0436\u043d\u0430 \u043f\u043e\u0431\u0430\u0447\u0438\u0442\u0438 \u043d\u043e\u0432\u0443 \u043f\u0430\u043f\u043a\u0443 <strong>Data<\/strong>, \u0437\u0456 \u0437\u0433\u0435\u043d\u0435\u0440\u043e\u0432\u0430\u043d\u0438\u043c \u043a\u043b\u0430\u0441\u043e\u043c <strong>ApplicationContext<\/strong>:<\/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><strong>ApplicationContext<\/strong> \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0443\u0454 \u0444\u0443\u043d\u043a\u0446\u0456\u043e\u043d\u0430\u043b\u044c\u043d\u0456\u0441\u0442\u044c EF Core (Create, Read, Update, Delete \u0442\u043e\u0449\u043e) \u0434\u043b\u044f \u043c\u043e\u0434\u0435\u043b\u0456 <strong>Animal<\/strong>.<\/p>\n<p>ASP.NET Core \u043f\u043e\u0431\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0439 \u0437 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f\u043c \u0456\u043d&#8217;\u0454\u043a\u0446\u0456\u0457 \u0437\u0430\u043b\u0435\u0436\u043d\u043e\u0441\u0442\u0435\u0439 (DI). \u0421\u043b\u0443\u0436\u0431\u0438 (\u043d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0411\u0414 EF Core) \u0440\u0435\u0454\u0441\u0442\u0440\u0443\u044e\u0442\u044c\u0441\u044f \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e DI \u043f\u0456\u0434 \u0447\u0430\u0441 \u0437\u0430\u043f\u0443\u0441\u043a\u0443 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u0438. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438, \u044f\u043a\u0438\u043c \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u0456 \u0446\u0456 \u0441\u043b\u0443\u0436\u0431\u0438, \u043e\u0442\u0440\u0438\u043c\u0443\u044e\u0442\u044c \u0457\u0445 \u0447\u0435\u0440\u0435\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430:<\/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>\u0406\u043c&#8217;\u044f \u0440\u044f\u0434\u043a\u0430 \u043f\u0456\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0454\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0448\u043b\u044f\u0445\u043e\u043c \u0432\u0438\u043a\u043b\u0438\u043a\u0443 \u043c\u0435\u0442\u043e\u0434\u0443 \u043d\u0430 \u043e\u0431&#8217;\u0454\u043a\u0442\u0456 DbContextOptions. \u0414\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0457 \u0440\u043e\u0437\u0440\u043e\u0431\u043a\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043a\u043e\u043d\u0444\u0456\u0433\u0443\u0440\u0430\u0446\u0456\u0457 ASP.NET Core \u0437\u0447\u0438\u0442\u0443\u0454 \u0440\u044f\u0434\u043e\u043a \u043f\u0456\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044f \u0437 \u0444\u0430\u0439\u043b\u0443 <strong>appsettings.json<\/strong>, \u044f\u043a\u0438\u0439 \u0443\u0436\u0435 \u0443\u0441\u043f\u0456\u0448\u043d\u043e \u0437\u0433\u0435\u043d\u0435\u0440\u043e\u0432\u0430\u043d\u043e \u0437 \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u0438\u043c \u0432\u043c\u0456\u0441\u0442\u043e\u043c, \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c\u043e \u0434\u043e \u0444\u0430\u0439\u043b\u0443 \u0456 \u0437\u043c\u0456\u043d\u0438 \u043d\u0430\u0437\u0432\u0443 \u0431\u0430\u0437\u0438 \u0434\u0430\u043d\u0438\u0445 \u043d\u0430 <strong>AnimalDb<\/strong>:<\/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>\u0422\u0430\u043a \u0441\u0430\u043c\u043e, \u0432 \u043a\u043b\u0430\u0441\u0456 <strong>Program<\/strong>, \u043c\u043e\u0436\u043d\u0430 \u043f\u043e\u0431\u0430\u0447\u0438\u0442\u0438 \u043f\u0456\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<pre class=\"lang:default decode:true\">builder.Services.AddQuickGridEntityFrameworkAdapter();<\/pre>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <strong>QuickGrid<\/strong> &#8211; \u0446\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Razor \u0434\u043b\u044f \u0448\u0432\u0438\u0434\u043a\u043e\u0433\u043e \u0439 \u0435\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0432\u0456\u0434\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u0434\u0430\u043d\u0438\u0445 \u0443 \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u0456\u0439 \u0444\u043e\u0440\u043c\u0456. QuickGrid \u044f\u0432\u043b\u044f\u0454 \u0441\u043e\u0431\u043e\u044e \u043f\u0440\u043e\u0441\u0442\u0438\u0439 \u0456 \u0437\u0440\u0443\u0447\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0456\u0442\u043a\u0438 \u0434\u0430\u043d\u0438\u0445 \u0434\u043b\u044f \u043f\u043e\u0448\u0438\u0440\u0435\u043d\u0438\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0456\u0457\u0432 \u0432\u0456\u0437\u0443\u0430\u043b\u0456\u0437\u0430\u0446\u0456\u0457 \u0441\u0456\u0442\u043a\u0438 \u0442\u0430 \u0441\u043b\u0443\u0433\u0443\u0454 \u0435\u0442\u0430\u043b\u043e\u043d\u043d\u043e\u044e \u0430\u0440\u0445\u0456\u0442\u0435\u043a\u0442\u0443\u0440\u043e\u044e \u0456 \u0431\u0430\u0437\u043e\u044e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0456 \u0434\u043b\u044f \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432 \u0441\u0456\u0442\u043a\u0438 \u0434\u0430\u043d\u0438\u0445. QuickGrid \u0432\u0438\u0440\u0456\u0437\u043d\u044f\u0454\u0442\u044c\u0441\u044f \u0432\u0438\u0441\u043e\u043a\u0438\u043c \u0441\u0442\u0443\u043f\u0435\u043d\u0435\u043c \u043e\u043f\u0442\u0438\u043c\u0456\u0437\u0430\u0446\u0456\u0457 \u0442\u0430 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454 \u043f\u0435\u0440\u0435\u0434\u043e\u0432\u0456 \u043c\u0435\u0442\u043e\u0434\u0438 \u0434\u043b\u044f \u0434\u043e\u0441\u044f\u0433\u043d\u0435\u043d\u043d\u044f \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0457 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0456 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443.<\/p>\n<p>\u0412\u0456\u043d \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0430\u0445, \u0434\u0435 \u0432\u0456\u0434\u043e\u0431\u0440\u0430\u0436\u0430\u0454\u0442\u044c\u0441\u044f \u0437\u0432\u0435\u0434\u0435\u043d\u0430 \u0456\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0456\u044f, \u043d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u0432\u0456\u0434\u043a\u0440\u0438\u0454\u043c\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<strong> Index.razor<\/strong>:<\/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><strong>EF Core&#8217;s ApplicationContext<\/strong> \u043d\u0430\u0434\u0430\u0454 \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u0456\u0441\u0442\u044c<strong> DbSet&lt;TEntity&gt;<\/strong> \u0434\u043b\u044f \u043a\u043e\u0436\u043d\u043e\u0457 \u0442\u0430\u0431\u043b\u0438\u0446\u0456 \u0432 \u0431\u0430\u0437\u0456 \u0434\u0430\u043d\u0438\u0445. \u0412\u043a\u0430\u0437\u0443\u0454\u043c\u043e \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u0443 \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u0456\u0441\u0442\u044c \u0443 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0456 Items.<\/p>\n<p>\u0423 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u043e\u043c\u0443 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u0456 \u044f\u043a \u0434\u0436\u0435\u0440\u0435\u043b\u043e \u0434\u0430\u043d\u0438\u0445 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454\u0442\u044c\u0441\u044f DbSet&lt;TEntity&gt; (\u0442\u0430\u0431\u043b\u0438\u0446\u044f) Animal:<\/p>\n<pre class=\"lang:default decode:true \">&lt;QuickGrid Class=\"table\" Items=\"DB.Animal\"&gt;<\/pre>\n<p>\u0412\u0438 \u0442\u0430\u043a\u043e\u0436 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0431\u0443\u0434\u044c-\u044f\u043a\u0438\u0439 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 LINQ, \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0432\u0430\u043d\u0438\u0439 EF, \u0434\u043b\u044f \u0444\u0456\u043b\u044c\u0442\u0440\u0430\u0446\u0456\u0457 \u0434\u0430\u043d\u0438\u0445 \u043f\u0435\u0440\u0435\u0434 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435\u044e \u0457\u0445 \u0443 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 Items.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u0432\u0456\u0434\u043e\u0431\u0440\u0430\u0437\u0438\u043c\u043e \u0442\u0456\u043b\u044c\u043a\u0438 \u043f\u0456\u0434\u0432\u0438\u0434 \u0440\u0438\u0431:<\/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><strong>QuickGrid<\/strong> \u0440\u043e\u0437\u043f\u0456\u0437\u043d\u0430\u0454 \u0435\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0438 <strong>IQueryable<\/strong>, \u0449\u043e \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u044c\u0441\u044f EF, \u0456 \u0432\u043c\u0456\u0454 \u0432\u0438\u043a\u043e\u043d\u0443\u0432\u0430\u0442\u0438 \u0437\u0430\u043f\u0438\u0442\u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0434\u043b\u044f \u043f\u0456\u0434\u0432\u0438\u0449\u0435\u043d\u043d\u044f \u0435\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0456.<\/p>\n<p>\u0412\u0440\u0430\u0445\u043e\u0432\u0443\u0439\u0442\u0435, \u0449\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438, \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u0456 \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u0441\u043a\u0430\u0444\u0444\u043e\u043b\u0434\u0435\u0440\u0430, \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0456\u043d\u0433\u0443 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0456 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 (SSR), \u0442\u043e\u043c\u0443 \u0432\u043e\u043d\u0438 \u043d\u0435 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u044e\u0442\u044c\u0441\u044f \u043f\u0456\u0434 \u0447\u0430\u0441 \u0440\u043e\u0431\u043e\u0442\u0438 \u0437 WebAssembly.<\/p>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043e\u043c\u0443 \u0435\u0442\u0430\u043f\u0456, \u043d\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0430\u0445 <strong>Create.razor<\/strong> \u0456 <strong>Edit.razor<\/strong>, \u0431\u0443\u0434\u0435 \u043f\u043e\u043c\u0438\u043b\u043a\u0430, \u043f\u043e\u0432&#8217;\u044f\u0437\u0430\u043d\u0430 \u0437 \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u0456\u0441\u0442\u044e \u043f\u0435\u0440\u0435\u0440\u0430\u0445\u0443\u0432\u0430\u043d\u043d\u044f\u043c <strong>AnimalType<\/strong>, \u0432\u0438\u043f\u0440\u0430\u0432\u0438\u043c\u043e \u0457\u0457, \u0437\u0430\u043c\u0456\u043d\u0438\u043c\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442 <strong>InputText<\/strong>:<\/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 \u0435\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>\u0422\u0430\u043a \u0441\u0430\u043c\u043e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043b\u0435\u0433\u0448\u0438\u043c\u043e \u043f\u0430\u0433\u0456\u043d\u0430\u0446\u0456\u044e, \u0432\u043a\u0430\u0437\u0430\u0432\u0448\u0438 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u043d\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0443\u0454\u043c\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <strong>Index.razor<\/strong>, \u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456 <strong>NavMenu.razor<\/strong>:<\/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%D1%82%D0%B2%D0%BE%D1%80%D0%B5%D0%BD%D0%BD%D1%8F_%D0%B1%D0%B0%D0%B7%D0%B8_%D0%B4%D0%B0%D0%BD%D0%B8%D1%85\"><\/span><b>\u0421\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0431\u0430\u0437\u0438 \u0434\u0430\u043d\u0438\u0445<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0421\u0442\u0432\u043e\u0440\u0438\u043c\u043e \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u0438\u0445 \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u0444\u0443\u043d\u043a\u0446\u0456\u0457 <strong>EF Core Migrations<\/strong>. \u041c\u0456\u0433\u0440\u0430\u0446\u0456\u0457 \u0434\u0430\u0454 \u043d\u0430\u043c \u0437\u043c\u043e\u0433\u0443 \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u0438\u0445, \u0449\u043e \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u0430\u0454 \u043d\u0430\u0448\u0456\u0439 \u043c\u043e\u0434\u0435\u043b\u0456 \u0434\u0430\u043d\u0438\u0445, \u0456 \u043e\u043d\u043e\u0432\u043b\u044e\u0432\u0430\u0442\u0438 \u0441\u0445\u0435\u043c\u0443 \u0431\u0430\u0437\u0438 \u0434\u0430\u043d\u0438\u0445 \u0443 \u0440\u0430\u0437\u0456 \u0437\u043c\u0456\u043d\u0438 \u043c\u043e\u0434\u0435\u043b\u0456 \u0434\u0430\u043d\u0438\u0445.<\/p>\n<p><span style=\"font-weight: 400;\">\u0412\u0456\u0434\u043a\u0440\u0438\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) \u0456 \u0432\u0438\u043a\u043e\u043d\u0430\u0439\u0442\u0435 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0432 PMC:<\/span><\/p>\n<p><b>PM&gt; Add-Migration Initial<\/b><\/p>\n<p>\u041a\u043e\u043c\u0430\u043d\u0434\u0430 <strong>Add-Migration<\/strong> \u0433\u0435\u043d\u0435\u0440\u0443\u0454 \u043a\u043e\u0434 \u0434\u043b\u044f \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u043f\u043e\u0447\u0430\u0442\u043a\u043e\u0432\u043e\u0457 \u0441\u0445\u0435\u043c\u0438 \u0431\u0430\u0437\u0438 \u0434\u0430\u043d\u0438\u0445, \u0449\u043e \u0491\u0440\u0443\u043d\u0442\u0443\u0454\u0442\u044c\u0441\u044f \u043d\u0430 \u043c\u043e\u0434\u0435\u043b\u0456, \u0437\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0456\u0439 \u0443 \u043a\u043b\u0430\u0441\u0456 ApplicationContext. \u0410\u0440\u0433\u0443\u043c\u0435\u043d\u0442 Initial &#8211; \u0446\u0435 \u0456\u043c&#8217;\u044f \u043c\u0456\u0433\u0440\u0430\u0446\u0456\u0457, \u043c\u043e\u0436\u043d\u0430 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0431\u0443\u0434\u044c-\u044f\u043a\u0435 \u0456\u043c&#8217;\u044f.<\/p>\n<p>\u041f\u0456\u0441\u043b\u044f \u0432\u0438\u043a\u043e\u043d\u0430\u043d\u043d\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0438 \u0432 \u043f\u0430\u043f\u0446\u0456 <strong>Migrations<\/strong> \u0431\u0443\u0434\u0435 \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043e \u0444\u0430\u0439\u043b \u043c\u0456\u0433\u0440\u0430\u0446\u0456\u0457:<\/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;\">\u042f\u043a \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0438\u0439 \u043a\u0440\u043e\u043a \u0432\u0438\u043a\u043e\u043d\u0430\u0439\u0442\u0435 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0443 \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>\u041a\u043e\u043c\u0430\u043d\u0434\u0430 <strong>Update-Database<\/strong> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0454 \u043c\u0435\u0442\u043e\u0434 Up \u0443 \u0444\u0430\u0439\u043b\u0456 Migrations\/{time-stamp}_InitialCreate.cs, \u044f\u043a\u0438\u0439 \u0441\u0442\u0432\u043e\u0440\u044e\u0454 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u0438\u0445.<\/p>\n<p>\u041f\u0435\u0440\u0432\u0456\u0441\u043d\u0435 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043e, \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c\u043e \u0434\u043e\u0434\u0430\u0442\u043e\u043a \u0456 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0438\u043c\u043e \u0439\u043e\u0433\u043e \u0440\u043e\u0431\u043e\u0442\u0443:<\/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%D1%96%D0%B4%D0%B0%D1%86%D1%96%D1%8F_%D0%B4%D0%B0%D0%BD%D0%B8%D1%85\"><\/span><strong>\u0412\u0430\u043b\u0456\u0434\u0430\u0446\u0456\u044f \u0434\u0430\u043d\u0438\u0445<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0417\u0430\u0441\u0442\u043e\u0441\u0443\u0432\u0430\u043d\u043d\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <strong>EditForm<\/strong> \u0434\u0430\u0454 \u0437\u043c\u043e\u0433\u0443 \u043b\u0435\u0433\u043a\u043e \u0434\u043e\u0434\u0430\u0442\u0438 \u0432\u0430\u043b\u0456\u0434\u0430\u0446\u0456\u044e \u0434\u043e \u0444\u043e\u0440\u043c\u0438. \u0414\u043b\u044f \u0432\u0430\u043b\u0456\u0434\u0430\u0446\u0456\u0457 \u0434\u0430\u043d\u0438\u0445 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0456\u0431\u0435\u043d \u0432\u0430\u043b\u0456\u0434\u0430\u0442\u043e\u0440 &#8211; \u043e\u0431&#8217;\u0454\u043a\u0442, \u044f\u043a\u0438\u0439 \u0432\u0438\u0437\u043d\u0430\u0447\u0430\u0454, \u044f\u043a \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u044f\u0442\u0438 \u043a\u043e\u0440\u0435\u043a\u0442\u043d\u0456\u0441\u0442\u044c \u0434\u0430\u043d\u0438\u0445. \u0417\u0430 \u0437\u0430\u043c\u043e\u0432\u0447\u0443\u0432\u0430\u043d\u043d\u044f\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Blazor \u043d\u0430\u0434\u0430\u0454 \u0432\u0430\u043b\u0456\u0434\u0430\u0442\u043e\u0440 \u0430\u043d\u043e\u0442\u0430\u0446\u0456\u0439 \u0434\u0430\u043d\u0438\u0445 &#8211; \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <strong>DataAnnotationsValidator<\/strong>, \u044f\u043a\u0438\u0439 \u043f\u0440\u0438\u043a\u0440\u0456\u043f\u043b\u044e\u0454 \u0434\u043e \u0444\u043e\u0440\u043c\u0438 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0443 \u0432\u0430\u043b\u0456\u0434\u0430\u0446\u0456\u0457 \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u0430\u043d\u043e\u0442\u0430\u0446\u0456\u0439 \u0434\u0430\u043d\u0438\u0445. \u042f\u043a \u0456 \u0437\u0430\u0433\u0430\u043b\u043e\u043c \u0443 .NET, \u0430\u043d\u043e\u0442\u0430\u0446\u0456\u0457 \u0434\u0430\u043d\u0438\u0445 \u0443 \u0432\u0438\u0433\u043b\u044f\u0434\u0456 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0456\u0432 \u0434\u0430\u044e\u0442\u044c \u0437\u043c\u043e\u0433\u0443 \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432\u0430\u043b\u0456\u0434\u0430\u0446\u0456\u0457 \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0435\u0439 \u043c\u043e\u0434\u0435\u043b\u0456.<\/p>\n<p>\u0417\u0430 \u0437\u0430\u043c\u043e\u0432\u0447\u0443\u0432\u0430\u043d\u043d\u044f\u043c \u043d\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0430\u0445 <strong>Create.razor<\/strong> \u0456 <strong>Edit.razor<\/strong>, \u0446\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0443\u0436\u0435 \u0434\u043e\u0434\u0430\u043d\u0438\u0439:<\/p>\n<pre class=\"lang:default decode:true \">&lt;DataAnnotationsValidator \/&gt;<\/pre>\n<p>\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 <strong>ValidationSummary<\/strong>, \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:<\/p>\n<pre class=\"lang:default decode:true \">&lt;ValidationSummary class=\"text-danger\" \/&gt;<\/pre>\n<p>\u0422\u0430\u043a\u043e\u0436 \u0431\u0443\u0432 \u0434\u043e\u0434\u0430\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <strong>ValidationMessage &lt;T&gt;<\/strong>, \u044f\u043a\u0438\u0439 \u0432\u0456\u0434\u043e\u0431\u0440\u0430\u0436\u0430\u0454 \u043f\u043e\u0432\u0456\u0434\u043e\u043c\u043b\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u043f\u043e\u043c\u0438\u043b\u043a\u0443 \u0434\u043b\u044f \u043e\u0434\u043d\u0456\u0454\u0457 \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0456 \u043c\u043e\u0434\u0435\u043b\u0456. \u0426\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0433\u0435\u043d\u0435\u0440\u0443\u0454 html &lt; div &gt; \u0435\u043b\u0435\u043c\u0435\u043d\u0442 \u0437 \u043a\u043b\u0430\u0441\u043e\u043c validation-message, \u044f\u043a\u0438\u0439 \u043c\u0456\u0441\u0442\u0438\u0442\u044c \u043f\u043e\u0432\u0456\u0434\u043e\u043c\u043b\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u043f\u043e\u043c\u0438\u043b\u043a\u0443.<\/p>\n<p>\u0417\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0456 <strong>For<\/strong> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 ValidationMessage \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u044e\u0454 \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u0456\u0441\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u0456, \u0449\u043e \u0432\u0430\u043b\u0456\u0434\u0443\u0454\u0442\u044c\u0441\u044f, \u0447\u0435\u0440\u0435\u0437 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u0438\u0439 \u043b\u044f\u043c\u0431\u0434\u0430-\u0432\u0438\u0440\u0430\u0437.<\/p>\n<p>\u0423\u0441\u0435, \u0449\u043e \u043d\u0430\u043c \u0437\u0430\u043b\u0438\u0448\u0430\u0454\u0442\u044c\u0441\u044f \u0437\u0440\u043e\u0431\u0438\u0442\u0438, \u0442\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0438 \u0434\u043b\u044f \u043d\u0430\u0448\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0443 <b>Animal<\/b>:<\/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>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c\u043e \u0434\u043e\u0434\u0430\u0442\u043e\u043a \u0456 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0438\u043c\u043e \u0439\u043e\u0433\u043e \u0440\u043e\u0431\u043e\u0442\u0443:<\/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%D1%82%D0%B2%D0%BE%D1%80%D0%B5%D0%BD%D0%BD%D1%8F_%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%D1%96%D1%89%D0%B5%D0%BD%D0%BD%D1%8F\"><\/span><strong>\u0421\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u043f\u043e\u0432\u0456\u0449\u0435\u043d\u043d\u044f<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u041f\u0456\u0434 \u0447\u0430\u0441 \u0432\u0438\u043a\u043e\u043d\u0430\u043d\u043d\u044f \u044f\u043a\u0438\u0445\u043e\u0441\u044c \u0434\u0456\u0439 \u0437\u0440\u0443\u0447\u043d\u043e \u0431\u0443\u0434\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u043f\u043e\u0432\u0456\u0449\u0435\u043d\u043d\u044f \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0430.<\/p>\n<p>\u0423 \u043f\u0430\u043f\u0446\u0456 <strong>Components<\/strong> \u0441\u0442\u0432\u043e\u0440\u0438\u043c\u043e \u043f\u0430\u043f\u043a\u0443 <strong>Shared<\/strong>, \u0443\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0456 \u044f\u043a\u043e\u0457 \u0441\u0442\u0432\u043e\u0440\u0438\u043c\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <strong>StatusMessage<\/strong> \u0437 \u0442\u0430\u043a\u0438\u043c \u0432\u043c\u0456\u0441\u0442\u043e\u043c:<\/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>\u0426\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u0431\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0439 \u043d\u0430 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u0456 <strong>Bootstrap<\/strong>. \u0423 \u043d\u0430\u0448\u043e\u043c\u0443 \u0432\u0438\u043f\u0430\u0434\u043a\u0443 \u0432\u0456\u043d \u0441\u0442\u0430\u043d\u0435 \u0432 \u043f\u0440\u0438\u0433\u043e\u0434\u0456 \u0434\u043b\u044f \u0432\u0456\u0434\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u043f\u043e\u0432\u0456\u0434\u043e\u043c\u043b\u0435\u043d\u044c 2-\u0443\u0445 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0456\u0439: \u00ab<strong>\u0423\u0441\u043f\u0456\u0448\u043d\u0430 \u043e\u043f\u0435\u0440\u0430\u0446\u0456\u044f<\/strong>\u00bb \u0456 \u00ab<strong>\u041f\u043e\u043c\u0438\u043b\u043a\u0430<\/strong>\u00bb. \u0422\u0440\u043e\u0445\u0438 \u043f\u0456\u0437\u043d\u0456\u0448\u0435 \u043c\u0438 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0454\u043c\u043e \u0439\u043e\u0433\u043e \u0456 \u0432\u0438 \u043f\u043e\u0431\u0430\u0447\u0438\u0442\u0435, \u044f\u043a \u0446\u0435 \u043f\u0440\u043e\u0441\u0442\u043e.<\/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>\u041d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u044f\u043a\u0438\u0439 \u0437\u043c\u043e\u0436\u0435 \u0437\u0430\u043f\u043e\u0432\u043d\u044e\u0432\u0430\u0442\u0438 \u0411\u0414 \u0442\u0435\u0441\u0442\u043e\u0432\u0438\u043c\u0438 \u0434\u0430\u043d\u0438\u043c\u0438. \u0414\u043e\u0434\u0430\u0439\u0442\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443 <strong>Components<\/strong> \/ <strong>Pages<\/strong>, \u043d\u043e\u0432\u0443 \u043f\u0430\u043f\u043a\u0443 <strong>DataPages<\/strong>, \u0430 \u0432 \u043d\u0456\u0439 \u043d\u043e\u0432\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <strong>Seed.razor<\/strong>, \u0437 \u0442\u0430\u043a\u0438\u043c \u0432\u043c\u0456\u0441\u0442\u043e\u043c:<\/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>\u0414\u043b\u044f \u0440\u043e\u0431\u043e\u0442\u0438 \u0437 <strong>EntityFrameworkCore<\/strong> \u0456 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c <strong>StatusMessage<\/strong>, \u043e\u0431\u043e\u0432&#8217;\u044f\u0437\u043a\u043e\u0432\u043e \u043f\u0456\u0434\u043a\u043b\u044e\u0447\u0430\u0454\u043c\u043e \u0442\u0430\u043a\u0456 \u043f\u0440\u043e\u0441\u0442\u043e\u0440\u0438 \u0456\u043c\u0435\u043d:<\/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>\u0414\u043b\u044f \u0437\u0440\u0443\u0447\u043d\u043e\u0441\u0442\u0456 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0430 \u0434\u043e\u0434\u0430\u043c\u043e \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c\u0443 \u043c\u0435\u043d\u044e.<\/p>\n<p>\u0417\u0430 \u0437\u0430\u043c\u043e\u0432\u0447\u0443\u0432\u0430\u043d\u043d\u044f\u043c, Blazor \u0437\u0430\u0441\u0442\u043e\u0441\u043e\u0432\u0443\u0454 \u043a\u0456\u043b\u044c\u043a\u0430 \u0456\u043a\u043e\u043d\u043e\u043a \u0432\u0456\u0434 \u0431\u0456\u0431\u043b\u0456\u043e\u0442\u0435\u043a\u0438 <strong>Bootstrap Icons<\/strong>. \u0407\u0445 \u0434\u043e\u0434\u0430\u0432\u0430\u043d\u043d\u044f \u043c\u043e\u0436\u043d\u0430 \u0437\u043d\u0430\u0439\u0442\u0438 \u0443 \u0444\u0430\u0439\u043b\u0456 <strong>NavMenu.razor.css<\/strong>:<\/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>\u041f\u043e\u0434\u0456\u0431\u043d\u0438\u043c \u0447\u0438\u043d\u043e\u043c \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0434\u0430\u0442\u0438 \u043e\u043f\u0438\u0441 \u0441\u0432\u043e\u0457\u0445 \u0456\u043a\u043e\u043d\u043e\u043a. \u0423 \u0446\u044c\u043e\u043c\u0443 \u0444\u0430\u0439\u043b\u0456 \u043f\u0440\u0438\u0431\u0435\u0440\u0435\u043c\u043e \u043f\u0456\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044f \u0441\u0442\u0430\u0440\u0438\u0445 \u0456\u043a\u043e\u043d\u043e\u043a \u0456 \u0437\u043c\u0456\u043d\u0438\u043c\u043e \u043a\u043b\u0430\u0441 <strong>.bi<\/strong>, \u0442\u0430\u043a\u0438\u043c \u0447\u0438\u043d\u043e\u043c:<\/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>\u042f\u043a\u0449\u043e \u0432\u0438 \u0437\u0430\u0445\u043e\u0447\u0435\u0442\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0432\u0441\u0456 \u0457\u0445\u043d\u0456 \u0456\u043a\u043e\u043d\u043a\u0438, \u0442\u043e \u0443 \u0444\u0430\u0439\u043b\u0456 <strong>App.razor<\/strong> \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u043e \u043f\u0456\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u0438 \u0457\u0445 \u0437\u0430 \u043f\u0440\u044f\u043c\u0438\u043c \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f\u043c \u0430\u0431\u043e \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0438\u0432\u0448\u0438 \u0432 \u043f\u0440\u043e\u0454\u043a\u0442:<\/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>\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c\u043e \u0432 <strong>Components \/ Layout \/ NavMenu.razor<\/strong> \u0456 \u0437\u043c\u0456\u043d\u0438\u043c\u043e \u0439\u043e\u0433\u043e \u0442\u0430\u043a\u0438\u043c \u0447\u0438\u043d\u043e\u043c:<\/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>\u0417\u0432\u0435\u0440\u043d\u0456\u0442\u044c \u0443\u0432\u0430\u0433\u0443, \u044f \u043f\u0440\u0438\u0431\u0440\u0430\u0432 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f \u043a\u043b\u0430\u0441\u0443 <strong>-nav-menu<\/strong>, \u0434\u043b\u044f \u0432\u0441\u0456\u0445 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u044c \u0456 \u0432 \u044f\u043a\u043e\u0441\u0442\u0456 \u0456\u043a\u043e\u043d\u043e\u043a \u0432\u043a\u0430\u0437\u0430\u0432 \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u0456 \u043c\u0435\u043d\u0456 \u0437 \u043f\u0456\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043e\u0457 \u0431\u0456\u0431\u043b\u0456\u043e\u0442\u0435\u043a\u0438.<\/p>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c\u043e \u0434\u043e\u0434\u0430\u0442\u043e\u043a \u0456 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0438\u043c\u043e \u0439\u043e\u0433\u043e \u0440\u043e\u0431\u043e\u0442\u0443:<\/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%D1%96%D0%BD%D0%B0%D1%86%D1%96%D1%8F_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0_QuickGrid\"><\/span><strong>\u041f\u0430\u0433\u0456\u043d\u0430\u0446\u0456\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 QuickGrid<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0412\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0447\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <strong>Seed<\/strong>, \u0437\u0430\u043f\u043e\u0432\u043d\u0438\u043c\u043e \u0442\u0430\u0431\u043b\u0438\u0446\u044e \u043d\u0430 <strong>10_000 \u0440\u044f\u0434\u043a\u0456\u0432<\/strong>, \u043f\u0456\u0441\u043b\u044f \u0447\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c\u043e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <strong>Animals<\/strong>. \u0417\u0432\u0435\u0440\u043d\u0456\u0442\u044c \u0443\u0432\u0430\u0433\u0443 \u043d\u0430 \u0448\u0432\u0438\u0434\u043a\u0456\u0441\u0442\u044c \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043d\u044f \u0434\u0430\u043d\u0438\u0445, \u0432\u043e\u043d\u043e \u0437\u0430\u0439\u043c\u0430\u0454 \u0449\u043e\u043d\u0430\u0439\u043c\u0435\u043d\u0448\u0435 5 \u0441\u0435\u043a\u0443\u043d\u0434 \u0456 \u0432 \u0446\u0435\u0439 \u0447\u0430\u0441 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447 \u0431\u0430\u0447\u0438\u0442\u044c \u043f\u043e\u0440\u043e\u0436\u043d\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u044e (\u0432\u0456\u043d \u043c\u043e\u0436\u0435 \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u0438, \u0449\u043e \u0434\u0430\u043d\u0438\u0445 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u043c\u0430\u0454).<\/p>\n<p>\u041f\u0435\u0440\u0448\u0435, \u0449\u043e \u043c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u0437\u0440\u043e\u0431\u0438\u0442\u0438, \u0442\u043e \u044f\u043a\u043e\u0441\u044c \u043f\u043e\u0432\u0456\u0434\u043e\u043c\u0438\u0442\u0438 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0430 \u043f\u0440\u043e \u0442\u0435, \u0449\u043e \u0434\u0430\u043d\u0456 \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0443\u044e\u0442\u044c\u0441\u044f. \u0414\u043b\u044f \u0446\u044c\u043e\u0433\u043e, \u0437\u043c\u0456\u043d\u0438\u043c\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<strong> Index.razor<\/strong>, \u0442\u0430\u043a\u0438\u043c \u0447\u0438\u043d\u043e\u043c:<\/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;\">\u0423\u0433\u043e\u0440\u0456 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438, \u0431\u0443\u043b\u043e \u0434\u043e\u0434\u0430\u043d\u043e \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>\u0426\u0435\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0434\u0456\u0454 \u0442\u0456\u043b\u044c\u043a\u0438 \u0432 \u0440\u0435\u043d\u0434\u0435\u0440\u0456, \u0449\u043e \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0454 \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 (\u043d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 HTML \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0456 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0437 \u043a\u0456\u043d\u0446\u0435\u0432\u043e\u0457 \u0442\u043e\u0447\u043a\u0438 Razor Component).<\/p>\n<p>\u041f\u043e\u0442\u043e\u043a\u043e\u0432\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043e\u0437\u043d\u0430\u0447\u0430\u0454, \u0449\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435 \u043d\u0430\u0434\u0456\u0441\u043b\u0430\u043d\u043e \u043a\u043b\u0456\u0454\u043d\u0442\u0443 \u0432 \u043c\u0456\u0440\u0443 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0456, \u0430 \u043d\u0435 \u043e\u0447\u0456\u043a\u0443\u0432\u0430\u0442\u0438, \u043f\u043e\u043a\u0438 \u0432\u0435\u0441\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435 \u043f\u043e\u0432\u043d\u0456\u0441\u0442\u044e \u0433\u043e\u0442\u043e\u0432\u0438\u0439 \u0434\u043e \u0432\u0456\u0434\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f.<\/p>\n<p>\u0412\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443 \u043c\u043e\u0436\u0435 \u043f\u043e\u043b\u0456\u043f\u0448\u0438\u0442\u0438 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0438\u0432\u043d\u0456\u0441\u0442\u044c \u0456 \u0434\u043e\u0441\u0432\u0456\u0434 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0430, \u043e\u0441\u043e\u0431\u043b\u0438\u0432\u043e \u0434\u043b\u044f \u0432\u0435\u043b\u0438\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432 \u0430\u0431\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456\u0432, \u0449\u043e \u043f\u043e\u0432\u0456\u043b\u044c\u043d\u043e \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0443\u044e\u0442\u044c\u0441\u044f, \u043e\u0441\u043a\u0456\u043b\u044c\u043a\u0438 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447 \u043c\u043e\u0436\u0435 \u0431\u0430\u0447\u0438\u0442\u0438 \u0456 \u0432\u0437\u0430\u0454\u043c\u043e\u0434\u0456\u044f\u0442\u0438 \u0437 \u0447\u0430\u0441\u0442\u0438\u043d\u043e\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043d\u0430\u0432\u0456\u0442\u044c \u044f\u043a\u0449\u043e \u0432\u0456\u043d \u0449\u0435 \u043d\u0435 \u043f\u043e\u0432\u043d\u0456\u0441\u0442\u044e \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>\u0421\u0430\u043c\u0435 \u0437\u0430\u0432\u0434\u044f\u043a\u0438 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044e \u0446\u044c\u043e\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430, \u043f\u0456\u0434 \u0447\u0430\u0441 \u0437\u0430\u043f\u0443\u0441\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u0431\u0430\u0447\u0438\u0442\u0438 \u043f\u0440\u043e\u0446\u0435\u0441 \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043d\u044f:<\/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>\u0429\u043e\u0439\u043d\u043e \u043a\u043e\u043b\u0435\u043a\u0446\u0456\u0439 <strong>animals<\/strong> \u0431\u0443\u0434\u0435 \u0437\u0430\u043f\u043e\u0432\u043d\u0435\u043d\u043e, \u043c\u0438 \u0432\u0456\u0434\u043e\u0431\u0440\u0430\u0437\u0438\u043c\u043e \u0457\u0457 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0456.<\/p>\n<p>\u041e\u0442\u0440\u0438\u043c\u0430\u043d\u043d\u044f \u0442\u0430 \u0432\u0456\u0434\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u0432\u0435\u043b\u0438\u043a\u043e\u0457 \u043a\u0456\u043b\u044c\u043a\u043e\u0441\u0442\u0456 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0456\u0432 \u043c\u043e\u0436\u0435 \u0431\u0443\u0442\u0438 \u0434\u043e\u0440\u043e\u0433\u0438\u043c. \u042f\u043a\u0449\u043e \u043e\u0431\u0441\u044f\u0433 \u0432\u0456\u0434\u043e\u0431\u0440\u0430\u0436\u0443\u0432\u0430\u043d\u0438\u0445 \u0434\u0430\u043d\u0438\u0445 \u043c\u043e\u0436\u0435 \u0431\u0443\u0442\u0438 \u0432\u0435\u043b\u0438\u043a\u0438\u043c, \u0441\u043b\u0456\u0434 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0430\u0431\u043e \u043f\u0430\u0433\u0456\u043d\u0430\u0446\u0456\u044e, \u0430\u0431\u043e \u0432\u0456\u0440\u0442\u0443\u0430\u043b\u0456\u0437\u0430\u0446\u0456\u044e.<\/p>\n<p>\u0429\u043e\u0431 \u0443\u0432\u0456\u043c\u043a\u043d\u0443\u0442\u0438 \u043f\u0430\u0433\u0456\u043d\u0430\u0446\u0456\u044e, \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u043e \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u0435\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 <strong>PaginationState<\/strong> \u0456 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u0438 \u0439\u043e\u0433\u043e \u044f\u043a \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u0456\u0441\u0442\u044c <strong>Pagination<\/strong> \u0433\u0440\u0438\u0434\u0430. \u0429\u043e\u0431 \u0437\u0430\u0431\u0435\u0437\u043f\u0435\u0447\u0438\u0442\u0438 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0446\u044c\u043a\u0438\u0439 \u0456\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u043f\u0430\u0433\u0456\u043d\u0430\u0446\u0456\u0457, \u043c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0432\u0431\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <strong>Paginator<\/strong> \u0430\u0431\u043e \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u0432\u043b\u0430\u0441\u043d\u0438\u0439 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0446\u044c\u043a\u0438\u0439 \u0456\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u044f\u043a\u0438\u0439 \u0437\u0447\u0438\u0442\u0443\u0454 \u0456 \u0437\u043c\u0456\u043d\u044e\u0454 \u0435\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 PaginationState.<\/p>\n<p>\u0417\u043c\u0456\u043d\u0438\u043c\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<strong> Index.razor<\/strong>, \u0442\u0430\u043a\u0438\u043c \u0447\u0438\u043d\u043e\u043c:<\/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>\u041d\u0430\u0441\u0430\u043c\u043f\u0435\u0440\u0435\u0434 \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u043e \u0432\u043a\u0430\u0437\u0430\u0442\u0438, \u0449\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0430\u0446\u044e\u0454 \u0437 \u0456\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0438\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0456:<\/p>\n<pre class=\"lang:default decode:true \">@rendermode RenderMode.InteractiveServer\r\n<\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0456\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440, \u0437\u0430\u0432\u0434\u044f\u043a\u0438 \u0437&#8217;\u0454\u0434\u043d\u0430\u043d\u043d\u044e SignalR \u043c\u0456\u0436 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0456 \u043a\u043b\u0456\u0454\u043d\u0442\u043e\u043c \u0432\u0456\u0434\u0431\u0443\u0432\u0430\u0442\u0438\u043c\u0435\u0442\u044c\u0441\u044f \u0432\u0437\u0430\u0454\u043c\u043e\u0434\u0456\u044f. \u0426\u0435 \u0434\u0430\u0441\u0442\u044c \u0437\u043c\u043e\u0433\u0443 \u0432 \u0434\u0430\u043d\u043e\u043c\u0443 \u0432\u0438\u043f\u0430\u0434\u043a\u0443 \u0437\u043c\u0456\u043d\u0438\u0442\u0438 \u043a\u0456\u043b\u044c\u043a\u0456\u0441\u0442\u044c \u0437\u0430\u043f\u0438\u0441\u0456\u0432 \u043d\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443, \u0437\u0430 \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u043e\u044e \u0441\u043f\u0438\u0441\u043a\u0443, \u0449\u043e \u0432\u0438\u043f\u0430\u0434\u0430\u0454, \u043f\u0440\u0438\u0432&#8217;\u044f\u0437\u0430\u043d\u043e\u0433\u043e \u0434\u043e \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0456 <strong>ItemsPerPage<\/strong>, \u043e\u0431&#8217;\u0454\u043a\u0442\u0430 <strong>pagination<\/strong>:<\/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;\">\u042f\u043a \u044f \u0432\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0432, \u0449\u043e\u0431 \u0443\u0432\u0456\u043c\u043a\u043d\u0443\u0442\u0438 \u043f\u0430\u0433\u0456\u043d\u0430\u0446\u0456\u044e, \u043d\u0435\u043e\u0431\u0445\u0456\u0434\u043d\u043e \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u0435\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>\u0406 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u0438 \u0439\u043e\u0433\u043e \u044f\u043a \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u0456\u0441\u0442\u044c <strong>Pagination<\/strong> \u0433\u0440\u0438\u0434\u0430:<\/p>\n<pre class=\"lang:default decode:true \">&lt;QuickGrid Class=\"table\" Items=\"animals\" Pagination=\"@pagination\"&gt;<\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c\u043e \u0434\u043e\u0434\u0430\u0442\u043e\u043a \u0456 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0438\u043c\u043e \u0439\u043e\u0433\u043e \u0440\u043e\u0431\u043e\u0442\u0443:<\/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>\u0417\u0430\u043b\u0438\u0448\u0438\u043b\u043e\u0441\u044f \u0434\u043e\u0434\u0430\u0442\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u0430\u0433\u0456\u043d\u0430\u0446\u0456\u0457, \u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456 <strong>Index.razor<\/strong>, \u0437\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c <strong>QuickGrid<\/strong>, \u0434\u043e\u0434\u0430\u043c\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <strong>Paginator<\/strong>:<\/p>\n<pre class=\"lang:default decode:true \">&lt;Paginator State=\"@pagination\" \/&gt;<\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c\u043e \u0434\u043e\u0434\u0430\u0442\u043e\u043a \u0456 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0438\u043c\u043e \u0439\u043e\u0433\u043e \u0440\u043e\u0431\u043e\u0442\u0443:<\/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>\u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u0442\u0438 \u0437\u043e\u0432\u043d\u0456\u0448\u043d\u0456\u0439 \u0432\u0438\u0433\u043b\u044f\u0434 <strong>Paginator<\/strong>, \u043d\u0430\u0434\u0430\u0432\u0448\u0438 \u0448\u0430\u0431\u043b\u043e\u043d <strong>SummaryTemplate<\/strong>. \u042f\u043a\u0449\u043e \u0432\u0430\u043c \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u0435 \u0434\u043e\u0434\u0430\u0442\u043a\u043e\u0432\u0435 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f, \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u0441\u0432\u0456\u0439 \u0432\u043b\u0430\u0441\u043d\u0438\u0439 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u0438\u0439 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0446\u044c\u043a\u0438\u0439 \u0456\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u044f\u043a\u0438\u0439 \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438\u043c\u0435 \u0437 PaginationState. \u041d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u0432\u0456\u0434\u043e\u0431\u0440\u0430\u0437\u0438\u043c\u043e \u0432\u0441\u0456 \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u0430\u0433\u0456\u043d\u0430\u0446\u0456\u0457:<\/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%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0_QuickGrid\"><\/span><strong>\u0421\u043e\u0440\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 QuickGrid<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0421\u043e\u0440\u0442\u0443\u0432\u0430\u043d\u043d\u044f\u043c \u043a\u0435\u0440\u0443\u044e\u0442\u044c \u0441\u0442\u043e\u0432\u043f\u0446\u0456.<\/p>\n<p>\u0414\u043b\u044f \u0441\u0442\u043e\u0432\u043f\u0446\u044f <strong>PropertyColumn<\/strong> \u0441\u043e\u0440\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0432\u043c\u0438\u043a\u0430\u0454\u0442\u044c\u0441\u044f, \u044f\u043a\u0449\u043e \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0438<strong> Sortable=\u00abtrue\u00bb<\/strong>. \u0426\u0435 \u0441\u043b\u0456\u0434 \u0440\u043e\u0431\u0438\u0442\u0438 \u0442\u0456\u043b\u044c\u043a\u0438 \u0432 \u0442\u043e\u043c\u0443 \u0440\u0430\u0437\u0456, \u044f\u043a\u0449\u043e \u0432\u0430\u0448\u0435 \u0431\u0430\u0437\u043e\u0432\u0435 \u0434\u0436\u0435\u0440\u0435\u043b\u043e \u0434\u0430\u043d\u0438\u0445 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0454 \u0441\u043e\u0440\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0437\u0430 \u0432\u0438\u0440\u0430\u0437\u043e\u043c \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0456 \u0446\u044c\u043e\u0433\u043e \u0441\u0442\u043e\u0432\u043f\u0446\u044f.<\/p>\n<p>\u0414\u043b\u044f \u0441\u0442\u043e\u0432\u043f\u0446\u044f <strong>TemplateColumn<\/strong> \u0441\u043e\u0440\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0432\u043c\u0438\u043a\u0430\u0454\u0442\u044c\u0441\u044f, \u044f\u043a\u0449\u043e \u0432\u0438 \u0437\u0430\u0434\u0430\u0441\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 SortBy \u0446\u044c\u043e\u0433\u043e \u0441\u0442\u043e\u0432\u043f\u0446\u044f.<\/p>\n<p>\u0414\u043b\u044f \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0446\u044c\u043a\u043e\u0433\u043e \u0441\u0442\u043e\u0432\u043f\u0446\u044f, \u0443\u0441\u043f\u0430\u0434\u043a\u043e\u0432\u0430\u043d\u043e\u0433\u043e \u0432\u0456\u0434 <strong>ColumnBase<\/strong>, \u0441\u043e\u0440\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0432\u043c\u0438\u043a\u0430\u0454\u0442\u044c\u0441\u044f, \u044f\u043a\u0449\u043e \u0432\u0438 \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 <strong>Sortable=\u00abtrue\u00bb<\/strong> \u0430\u0431\u043e \u043f\u0435\u0440\u0435\u0432\u0438\u0437\u043d\u0430\u0447\u0438\u0442\u0435 <strong>IsSortableByDefault<\/strong> \u0456 \u043f\u043e\u0432\u0435\u0440\u043d\u0435\u0442\u0435 true.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u0454\u043c\u043e \u0441\u043e\u0440\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0434\u043b\u044f \u0432\u0441\u0456\u0445 \u0441\u0442\u043e\u0432\u043f\u0446\u0456\u0432, \u0434\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0456 <strong>Index<\/strong>, \u0437\u043c\u0456\u043d\u0438\u043c\u043e \u0432\u043c\u0456\u0441\u0442 \u043a\u043e\u0436\u043d\u043e\u0457 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 <strong>QuickGrid<\/strong>, \u0434\u043e\u0434\u0430\u0432\u0448\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <strong>Sortable<\/strong> \u0437\u0456 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f\u043c <strong>true<\/strong>:<\/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>\u042f\u043a \u0431\u0430\u0447\u0438\u0442\u0435, \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e. \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c\u043e \u0434\u043e\u0434\u0430\u0442\u043e\u043a \u0456 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0438\u043c\u043e \u0439\u043e\u0433\u043e \u0440\u043e\u0431\u043e\u0442\u0443.<\/p>\n<h3 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"%D0%A4%D1%96%D0%BB%D1%8C%D1%82%D1%80%D0%B0%D1%86%D1%96%D1%8F_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0_QuickGrid\"><\/span><strong>\u0424\u0456\u043b\u044c\u0442\u0440\u0430\u0446\u0456\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 QuickGrid<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>QuickGrid \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0454 \u0432\u0431\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0445 API \u0434\u043b\u044f \u0444\u0456\u043b\u044c\u0442\u0440\u0430\u0446\u0456\u0457, \u0442\u043e\u043c\u0443 \u043c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u043b\u0435\u0433\u043a\u043e \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u0442\u0438 \u0432\u043b\u0430\u0441\u043d\u0438\u0439 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0446\u044c\u043a\u0438\u0439 \u0456\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0456\u043d\u043d\u044f \u043a\u0440\u0438\u0442\u0435\u0440\u0456\u044f\u043c\u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044f \u0456 \u043f\u043e\u0442\u0456\u043c \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0439\u043e\u0433\u043e \u0437 \u0434\u0436\u0435\u0440\u0435\u043b\u043e\u043c \u0434\u0430\u043d\u0438\u0445.<\/p>\n<p>\u041a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0446\u044c\u043a\u0438\u0439 \u0456\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0456\u043d\u043d\u044f \u043a\u0440\u0438\u0442\u0435\u0440\u0456\u044f\u043c\u0438 \u0444\u0456\u043b\u044c\u0442\u0440\u0430\u0446\u0456\u0457 \u043c\u043e\u0436\u043d\u0430 \u0440\u043e\u0437\u043c\u0456\u0441\u0442\u0438\u0442\u0438 \u0434\u0435 \u0437\u0430\u0432\u0433\u043e\u0434\u043d\u043e \u0456 \u043f\u043e\u0431\u0443\u0434\u0443\u0432\u0430\u0442\u0438, \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u044e\u0447\u0438 \u0437\u0432\u0438\u0447\u0430\u0439\u043d\u0456 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0438 Blazor \u0456 \u043f\u0440\u0438\u0432&#8217;\u044f\u0437\u043a\u0438. \u041c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0432\u0430\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0456\u044e <strong>ColumnOptions<\/strong> \u0443 <strong>QuickGrid<\/strong>, \u0449\u043e\u0431 \u043f\u043e\u043c\u0456\u0441\u0442\u0438\u0442\u0438 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0446\u044c\u043a\u0438\u0439 \u0456\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0444\u0456\u043b\u044c\u0442\u0440\u0430\u0446\u0456\u0457 \u0443 \u0441\u043f\u043b\u0438\u0432\u0430\u044e\u0447\u0435 \u0432\u0456\u043a\u043d\u043e, \u043f\u043e\u0432&#8217;\u044f\u0437\u0430\u043d\u0435 \u0437 \u043f\u0435\u0432\u043d\u0438\u043c \u0441\u0442\u043e\u0432\u043f\u0446\u0435\u043c.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0435\u0430\u043b\u0456\u0437\u0443\u0454\u043c\u043e \u043c\u043e\u0436\u043b\u0438\u0432\u0456\u0441\u0442\u044c \u043f\u043e\u0448\u0443\u043a\u0443 \u0437\u0430 \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u0456\u0441\u0442\u044e <strong>Name<\/strong>, \u0447\u0435\u0440\u0435\u0437 \u0441\u043f\u043b\u0438\u0432\u0430\u044e\u0447\u0435 \u0432\u0456\u043a\u043d\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <strong>QuickGrid<\/strong>, \u0434\u043b\u044f \u0446\u044c\u043e\u0433\u043e \u0437\u043c\u0456\u043d\u0438\u043c\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<strong> Index.razor<\/strong>, \u0442\u0430\u043a\u0438\u043c \u0447\u0438\u043d\u043e\u043c:<\/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>\u0421\u043f\u043e\u0447\u0430\u0442\u043a\u0443 \u043c\u0438 \u0434\u043e\u0434\u0430\u043b\u0438 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u0435 \u043f\u043e\u043b\u0435 \u043a\u043b\u0430\u0441\u0443, \u044f\u043a\u0435 \u043c\u0456\u0441\u0442\u0438\u0442\u044c \u0444\u0456\u043b\u044c\u0442\u0440 \u0437\u0430 \u0456\u043c&#8217;\u044f\u043c \u0434\u043b\u044f \u0442\u0432\u0430\u0440\u0438\u043d, \u0430 \u0442\u0430\u043a\u043e\u0436 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u0443 \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u0456\u0441\u0442\u044c \u043a\u043b\u0430\u0441\u0443, \u044f\u043a\u0430 \u043f\u043e\u0432\u0435\u0440\u0442\u0430\u0454 \u0432\u0456\u0434\u0444\u0456\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u043d\u0438\u0439 \u043d\u0430\u0431\u0456\u0440 \u0442\u0432\u0430\u0440\u0438\u043d. \u0412\u043e\u043d\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0454 LINQ-\u0437\u0430\u043f\u0438\u0442 \u0434\u043b\u044f \u0444\u0456\u043b\u044c\u0442\u0440\u0430\u0446\u0456\u0457 <strong>animals<\/strong>, \u0491\u0440\u0443\u043d\u0442\u0443\u044e\u0447\u0438\u0441\u044c \u043d\u0430 <strong>nameFilter<\/strong>.<\/p>\n<p>\u041c\u0435\u0442\u043e\u0434<strong> filteredAnimals()<\/strong> \u0437\u0430\u0441\u0442\u043e\u0441\u043e\u0432\u0443\u0454 \u0444\u0456\u043b\u044c\u0442\u0440\u0430\u0446\u0456\u044e \u0434\u043e \u0441\u043f\u0438\u0441\u043a\u0443 \u0442\u0432\u0430\u0440\u0438\u043d \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0456 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f nameFilter. \u042f\u043a\u0449\u043e <strong>nameFilter<\/strong> \u043d\u0435 \u043f\u043e\u0440\u043e\u0436\u043d\u0454, \u0444\u0456\u043b\u044c\u0442\u0440\u0430\u0446\u0456\u044f \u0437\u0434\u0456\u0439\u0441\u043d\u044e\u0454\u0442\u044c\u0441\u044f \u0437\u0430 \u0456\u043c&#8217;\u044f\u043c \u0442\u0432\u0430\u0440\u0438\u043d\u0438, \u0456\u0433\u043d\u043e\u0440\u0443\u044e\u0447\u0438 \u0440\u0435\u0433\u0456\u0441\u0442\u0440 \u0441\u0438\u043c\u0432\u043e\u043b\u0456\u0432. \u0424\u0456\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u043d\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u043e\u0432\u0435\u0440\u0442\u0430\u0454\u0442\u044c\u0441\u044f \u0437 \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0456 filteredAnimals.<\/p>\n<p>\u041f\u0456\u0441\u043b\u044f \u0447\u043e\u0433\u043e, \u0434\u043b\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <strong>Items<\/strong>, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <strong>QuickGrid<\/strong>, \u0437\u0430\u0441\u0442\u043e\u0441\u043e\u0432\u0443\u0454\u0442\u044c\u0441\u044f \u043a\u043e\u043b\u0435\u043a\u0446\u0456\u044f <strong>filteredAnimals<\/strong>.<\/p>\n<p>\u0414\u043b\u044f \u043a\u043e\u043b\u043e\u043d\u043a\u0438 animal.Name \u0434\u043e\u0434\u0430\u0454\u0442\u044c\u0441\u044f \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u0435 \u0432\u0456\u043a\u043d\u043e \u0437 \u043f\u043e\u043c\u0456\u0449\u0435\u043d\u0438\u043c \u0443\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0456 \u043f\u043e\u043b\u0435\u043c \u0434\u043b\u044f \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044f \u0442\u0435\u043a\u0441\u0442\u0443, \u044f\u043a\u0435 \u043f\u0440\u0438\u0432&#8217;\u044f\u0437\u0430\u043d\u0435 \u0434\u043e \u043f\u043e\u043b\u044f nameFilter. \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c\u043e \u0434\u043e\u0434\u0430\u0442\u043e\u043a \u0456 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0438\u043c\u043e \u0439\u043e\u0433\u043e \u0440\u043e\u0431\u043e\u0442\u0443:<\/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>\u0417\u0430 \u0442\u0430\u043a\u0438\u043c \u0441\u0430\u043c\u0438\u043c \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u043c, \u043c\u0438 \u043c\u043e\u0436\u0435\u043c\u043e \u0434\u043e\u0434\u0430\u0432\u0430\u0442\u0438 \u043c\u043e\u0436\u043b\u0438\u0432\u043e\u0441\u0442\u0456 \u0444\u0456\u043b\u044c\u0442\u0440\u0430\u0446\u0456\u0457 \u0434\u043b\u044f \u0456\u043d\u0448\u0438\u0445 \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u043d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434, \u0434\u043e\u0434\u0430\u043c\u043e \u0444\u0456\u043b\u044c\u0442\u0440 \u0434\u043b\u044f \u043a\u043e\u043b\u043e\u043d\u043a\u0438 <strong>Weight<\/strong>:<\/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>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0442\u0432\u043e\u0440\u0438\u043c\u043e \u0441\u043f\u0438\u0441\u043e\u043a, \u0449\u043e \u0432\u0438\u043f\u0430\u0434\u0430\u0454, \u0434\u043b\u044f \u0432\u0438\u0431\u043e\u0440\u0443 \u043f\u0435\u0432\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0443 \u0442\u0432\u0430\u0440\u0438\u043d\u0438, \u0434\u043b\u044f \u043f\u043e\u0447\u0430\u0442\u043a\u0443 \u0437\u043c\u0456\u043d\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0440\u0430\u0445\u0443\u0432\u0430\u043d\u043d\u044f <strong>AnimalType<\/strong>, \u0434\u043e\u0434\u0430\u0432\u0448\u0438 \u0439\u043e\u043c\u0443 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443 <strong>All<\/strong>:<\/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>\u0422\u0435\u043f\u0435\u0440 \u0437\u043c\u0456\u043d\u0438\u043c\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<strong> Index.razor<\/strong>, \u0442\u0430\u043a\u0438\u043c \u0447\u0438\u043d\u043e\u043c:<\/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>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c\u043e \u0434\u043e\u0434\u0430\u0442\u043e\u043a \u0456 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u0438\u043c\u043e \u0439\u043e\u0433\u043e \u0440\u043e\u0431\u043e\u0442\u0443:<\/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>\u041e\u0441\u043a\u0456\u043b\u044c\u043a\u0438 \u043f\u0435\u0440\u0435\u0440\u0430\u0445\u0443\u0432\u0430\u043d\u043d\u044f <strong>AnimalType<\/strong> \u043d\u0430\u0431\u0443\u043b\u043e \u043d\u043e\u0432\u043e\u0457 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0438 <strong>All<\/strong>, \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0457\u0457 \u043f\u0440\u0438\u0445\u043e\u0432\u0430\u0442\u0438 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 <strong>Create.razor<\/strong> \u0456 <strong>Edit.razor<\/strong>:<\/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>\u041d\u0430 \u0446\u044c\u043e\u043c\u0443 \u0432\u0441\u0435. \u041e\u0431\u043e\u0432&#8217;\u044f\u0437\u043a\u043e\u0432\u043e \u0437\u0431\u0435\u0440\u0435\u0436\u0456\u0442\u044c \u0446\u0435\u0439 \u043f\u0440\u043e\u0454\u043a\u0442, \u0432\u0456\u043d \u043d\u0430\u043c \u0437\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u043e\u0457 \u0442\u0435\u043c\u0438 \u043f\u0440\u043e\u0454\u043a\u0442\u0443.<\/p>\n<p>\u042f \u0441\u043f\u043e\u0434\u0456\u0432\u0430\u044e\u0441\u044f, \u0449\u043e \u0432\u0430\u043c \u0441\u043f\u043e\u0434\u043e\u0431\u0430\u043b\u043e\u0441\u044f \u0447\u0438\u0442\u0430\u0442\u0438 \u0446\u044e \u0441\u0442\u0430\u0442\u0442\u044e, \u0456 \u0432\u043e\u043d\u0430 \u0432\u0438\u044f\u0432\u0438\u043b\u0430\u0441\u044f \u043b\u0435\u0433\u043a\u043e\u044e \u0434\u043b\u044f \u0440\u043e\u0437\u0443\u043c\u0456\u043d\u043d\u044f. \u0411\u0443\u0434\u044c \u043b\u0430\u0441\u043a\u0430, \u0434\u0430\u0439\u0442\u0435 \u043c\u0435\u043d\u0456 \u0437\u043d\u0430\u0442\u0438, \u044f\u043a\u0449\u043e \u0443 \u0432\u0430\u0441 \u0454 \u044f\u043a\u0456\u0441\u044c \u043a\u043e\u043c\u0435\u043d\u0442\u0430\u0440\u0456 \u0430\u0431\u043e \u0432\u0438\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044f.<\/p>\n<p>\u0422\u0430\u043a \u0441\u0430\u043c\u043e \u0432\u0430\u043c \u043c\u043e\u0436\u0435 \u0431\u0443\u0442\u0438 \u0446\u0456\u043a\u0430\u0432\u0430 \u043f\u043e\u043f\u0435\u0440\u0435\u0434\u043d\u044f \u0441\u0442\u0430\u0442\u0442\u044f &#8211; <a href=\"https:\/\/dijix.com.ua\/blog\/uk\/proekt-s-ispolzovaniem-razor-pages-crud-operaczii\/\">\u041f\u0440\u043e\u0454\u043a\u0442 \u0456\u0437 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f\u043c Razor Pages (CRUD \u043e\u043f\u0435\u0440\u0430\u0446\u0456\u0457)<\/a>.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D0%92%D0%B8_%D1%85%D0%BE%D1%87%D0%B5%D1%82%D0%B5_%D0%BD%D0%B0%D0%B2%D1%87%D0%B8%D1%82%D0%B8%D1%81%D1%8F_%D0%BF%D0%B8%D1%81%D0%B0%D1%82%D0%B8_%D0%BA%D0%BE%D0%B4_%D0%BC%D0%BE%D0%B2%D0%BE%D1%8E_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F_C\"><\/span><strong>\u0412\u0438 \u0445\u043e\u0447\u0435\u0442\u0435 \u043d\u0430\u0432\u0447\u0438\u0442\u0438\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u0438 \u043a\u043e\u0434 \u043c\u043e\u0432\u043e\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u0443\u0432\u0430\u043d\u043d\u044f C#?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0421\u0442\u0432\u043e\u0440\u044e\u0432\u0430\u0442\u0438 \u0440\u0456\u0437\u043d\u0456 \u0456\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0456\u0439\u043d\u0456 \u0441\u0438\u0441\u0442\u0435\u043c\u0438, \u0449\u043e \u0441\u043a\u043b\u0430\u0434\u0430\u044e\u0442\u044c\u0441\u044f \u0437 \u0441\u0430\u0439\u0442\u0456\u0432, \u043c\u043e\u0431\u0456\u043b\u044c\u043d\u0438\u0445 \u043a\u043b\u0456\u0454\u043d\u0442\u0456\u0432, \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u0438\u0445 \u0434\u043e\u0434\u0430\u0442\u043a\u0456\u0432, \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c-\u0431\u043e\u0442\u0456\u0432 \u0442\u043e\u0449\u043e.<\/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\u044c\u0442\u0435 \u0434\u043e \u043d\u0430\u0441 \u043d\u0430 \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0443 Dijix \u0456 \u043e\u0437\u043d\u0430\u0439\u043e\u043c\u0442\u0435\u0441\u044f \u0437 \u0443\u043c\u043e\u0432\u0430\u043c\u0438 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f, \u043c\u0438 \u0441\u043f\u0435\u0446\u0456\u0430\u043b\u0456\u0437\u0443\u0454\u043c\u043e\u0441\u044f \u0442\u0456\u043b\u044c\u043a\u0438 \u043d\u0430 \u0456\u043d\u0434\u0438\u0432\u0456\u0434\u0443\u0430\u043b\u044c\u043d\u0438\u0445 \u0437\u0430\u043d\u044f\u0442\u0442\u044f\u0445, \u044f\u043a \u0434\u043b\u044f \u043f\u043e\u0447\u0430\u0442\u043a\u0456\u0432\u0446\u0456\u0432, \u0442\u0430\u043a \u0456 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0443\u043d\u0443\u0442\u0438\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u0456\u0441\u0442\u0456\u0432. \u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0437\u044f\u0442\u0438 \u044f\u043a \u043e\u0434\u043d\u0435 \u0437\u0430\u043d\u044f\u0442\u0442\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0430\u0446\u044e\u0432\u0430\u043d\u043d\u044f \u043f\u0438\u0442\u0430\u043d\u043d\u044f, \u0449\u043e \u0432\u0430\u0441 \u0446\u0456\u043a\u0430\u0432\u0438\u0442\u044c, \u0442\u0430\u043a \u0456 \u043a\u0456\u043b\u044c\u043a\u0430, \u0434\u043b\u044f \u0431\u0456\u043b\u044c\u0448 \u0449\u0456\u043b\u044c\u043d\u043e\u0457 \u0440\u043e\u0431\u043e\u0442\u0438. \u0417\u0430\u0432\u0434\u044f\u043a\u0438 \u043e\u0441\u043e\u0431\u0438\u0441\u0442\u043e\u043c\u0443 \u043a\u0430\u0431\u0456\u043d\u0435\u0442\u0443, \u043a\u043e\u0436\u0435\u043d \u0441\u0442\u0443\u0434\u0435\u043d\u0442 \u043f\u0456\u0434\u0432\u0438\u0449\u0438\u0442\u044c \u044f\u043a\u0456\u0441\u0442\u044c \u0441\u0432\u043e\u0433\u043e \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f, \u0443 \u0432\u0430\u0448\u043e\u043c\u0443 \u0440\u043e\u0437\u043f\u043e\u0440\u044f\u0434\u0436\u0435\u043d\u043d\u0456:<\/p>\n<ul>\n<li>\u0414\u043e\u0441\u0442\u0443\u043f \u0434\u043e \u043f\u0440\u043e\u0439\u0434\u0435\u043d\u043e\u0433\u043e \u043c\u0430\u0442\u0435\u0440\u0456\u0430\u043b\u0443<\/li>\n<li>\u0422\u0435\u043c\u0430\u0442\u0438\u0447\u043d\u0456 \u0441\u0442\u0430\u0442\u0442\u0456<\/li>\n<li>\u0411\u0456\u0431\u043b\u0456\u043e\u0442\u0435\u043a\u0430 \u043a\u043d\u0438\u0433<\/li>\n<li>\u041e\u043d\u043b\u0430\u0439\u043d \u0442\u0435\u0441\u0442\u0443\u0432\u0430\u043d\u043d\u044f<\/li>\n<li>\u0421\u043f\u0456\u043b\u043a\u0443\u0432\u0430\u043d\u043d\u044f \u0432 \u0437\u0430\u043a\u0440\u0438\u0442\u0438\u0445 \u0433\u0440\u0443\u043f\u0430\u0445<\/li>\n<\/ul>\n<blockquote>\n<p style=\"text-align: right;\"><a href=\"https:\/\/dijix.com.ua\/uk\/\">https:\/\/dijix.com.ua<\/a><\/p>\n<p style=\"text-align: right;\"><a href=\"https:\/\/ms.dijix.com.ua\/\">\u0416\u0438\u0432\u0438 \u0443 \u0441\u0432\u043e\u0454\u043c\u0443 \u0441\u0432\u0456\u0442\u0456, \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u0443\u0439 \u0443 \u043d\u0430\u0448\u043e\u043c\u0443<\/a>.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>\u0423 \u0446\u044c\u043e\u043c\u0443 \u0443\u0440\u043e\u0446\u0456, \u043c\u0438 \u0440\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e \u044f\u043a \u0448\u0432\u0438\u0434\u043a\u043e \u0456 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u0456\u0437\u0443\u0432\u0430\u0442\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0438\u0439 \u043d\u0430\u0431\u0456\u0440 CRUD \u043e\u043f\u0435\u0440\u0430\u0446\u0456\u0454\u044e \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0456 Blazor Server. \u0414\u043e\u0434\u0430\u0442\u043e\u043a \u0431\u0443\u0434\u0435 \u043a\u0435\u0440\u0443\u0432\u0430\u0442\u0438 \u0431\u0430\u0437\u043e\u044e \u0434\u0430\u043d\u0438\u0445 AnimalsDb, \u0430&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/dijix.com.ua\/blog\/uk\/crud-operaczii-v-blazor-server-side\/\">Continue reading<span class=\"screen-reader-text\">Crud \u041e\u043f\u0435\u0440\u0430\u0446\u0456\u0457 \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":"uk","_original_post":"https:\/\/dijix.com.ua\/blog\/?p=1298","footnotes":""},"categories":[8,23],"tags":[],"class_list":["post-1319","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-asp-net-core","category-blazor-server","uk","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\u0456\u0457 \u0432 Blazor Server Side (SSR ) - Dijix - \u0411\u043b\u043e\u0433<\/title>\r\n<meta name=\"description\" content=\"\u0423 \u0446\u044c\u043e\u043c\u0443 \u0443\u0440\u043e\u0446\u0456 \u043c\u0438 \u0440\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e, \u044f\u043a \u0448\u0432\u0438\u0434\u043a\u043e \u0456 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u0456\u0437\u0443\u0432\u0430\u0442\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0438\u0439 \u043d\u0430\u0431\u0456\u0440 CRUD-\u043e\u043f\u0435\u0440\u0430\u0446\u0456\u0439 \u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0456 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\/uk\/crud-operaczii-v-blazor-server-side\/\" \/>\r\n<meta property=\"og:locale\" content=\"uk_UA\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Crud \u041e\u043f\u0435\u0440\u0430\u0446\u0456\u0457 \u0432 Blazor Server Side (SSR ) - Dijix - \u0411\u043b\u043e\u0433\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/dijix.com.ua\/blog\/uk\/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-25T07:23:50+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2024-05-27T13:22:26+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\" \/>\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\u0431\u043b. \u0447\u0430\u0441 \u0447\u0438\u0442\u0430\u043d\u043d\u044f\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 \u0445\u0432\u0438\u043b\u0438\u043d\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/dijix.com.ua\/blog\/uk\/crud-operaczii-v-blazor-server-side\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/dijix.com.ua\/blog\/uk\/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\u0456\u0457 \u0432 Blazor Server Side (SSR )\",\"datePublished\":\"2024-05-25T07:23:50+00:00\",\"dateModified\":\"2024-05-27T13:22:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/dijix.com.ua\/blog\/uk\/crud-operaczii-v-blazor-server-side\/\"},\"wordCount\":2155,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/dijix.com.ua\/blog\/#organization\"},\"articleSection\":[\"Asp.Net Core\",\"Blazor Server\"],\"inLanguage\":\"uk\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/dijix.com.ua\/blog\/uk\/crud-operaczii-v-blazor-server-side\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dijix.com.ua\/blog\/uk\/crud-operaczii-v-blazor-server-side\/\",\"url\":\"https:\/\/dijix.com.ua\/blog\/uk\/crud-operaczii-v-blazor-server-side\/\",\"name\":\"Crud \u041e\u043f\u0435\u0440\u0430\u0446\u0456\u0457 \u0432 Blazor Server Side (SSR ) - Dijix - \u0411\u043b\u043e\u0433\",\"isPartOf\":{\"@id\":\"https:\/\/dijix.com.ua\/blog\/#website\"},\"datePublished\":\"2024-05-25T07:23:50+00:00\",\"dateModified\":\"2024-05-27T13:22:26+00:00\",\"description\":\"\u0423 \u0446\u044c\u043e\u043c\u0443 \u0443\u0440\u043e\u0446\u0456 \u043c\u0438 \u0440\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e, \u044f\u043a \u0448\u0432\u0438\u0434\u043a\u043e \u0456 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u0456\u0437\u0443\u0432\u0430\u0442\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0438\u0439 \u043d\u0430\u0431\u0456\u0440 CRUD-\u043e\u043f\u0435\u0440\u0430\u0446\u0456\u0439 \u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0456 Blazor Server.\",\"breadcrumb\":{\"@id\":\"https:\/\/dijix.com.ua\/blog\/uk\/crud-operaczii-v-blazor-server-side\/#breadcrumb\"},\"inLanguage\":\"uk\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/dijix.com.ua\/blog\/uk\/crud-operaczii-v-blazor-server-side\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/dijix.com.ua\/blog\/uk\/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\u0456\u0457 \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\":\"uk\"},{\"@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\":\"uk\",\"@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\":\"uk\",\"@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\u0456\u0457 \u0432 Blazor Server Side (SSR ) - Dijix - \u0411\u043b\u043e\u0433","description":"\u0423 \u0446\u044c\u043e\u043c\u0443 \u0443\u0440\u043e\u0446\u0456 \u043c\u0438 \u0440\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e, \u044f\u043a \u0448\u0432\u0438\u0434\u043a\u043e \u0456 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u0456\u0437\u0443\u0432\u0430\u0442\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0438\u0439 \u043d\u0430\u0431\u0456\u0440 CRUD-\u043e\u043f\u0435\u0440\u0430\u0446\u0456\u0439 \u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0456 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\/uk\/crud-operaczii-v-blazor-server-side\/","og_locale":"uk_UA","og_type":"article","og_title":"Crud \u041e\u043f\u0435\u0440\u0430\u0446\u0456\u0457 \u0432 Blazor Server Side (SSR ) - Dijix - \u0411\u043b\u043e\u0433","og_url":"https:\/\/dijix.com.ua\/blog\/uk\/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-25T07:23:50+00:00","article_modified_time":"2024-05-27T13:22:26+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":"\u041b\u0435\u043e\u043d\u0438\u0434 \u041a\u0430\u0440\u0443\u043d\u0430","\u041f\u0440\u0438\u0431\u043b. \u0447\u0430\u0441 \u0447\u0438\u0442\u0430\u043d\u043d\u044f":"15 \u0445\u0432\u0438\u043b\u0438\u043d"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/dijix.com.ua\/blog\/uk\/crud-operaczii-v-blazor-server-side\/#article","isPartOf":{"@id":"https:\/\/dijix.com.ua\/blog\/uk\/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\u0456\u0457 \u0432 Blazor Server Side (SSR )","datePublished":"2024-05-25T07:23:50+00:00","dateModified":"2024-05-27T13:22:26+00:00","mainEntityOfPage":{"@id":"https:\/\/dijix.com.ua\/blog\/uk\/crud-operaczii-v-blazor-server-side\/"},"wordCount":2155,"commentCount":0,"publisher":{"@id":"https:\/\/dijix.com.ua\/blog\/#organization"},"articleSection":["Asp.Net Core","Blazor Server"],"inLanguage":"uk","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/dijix.com.ua\/blog\/uk\/crud-operaczii-v-blazor-server-side\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/dijix.com.ua\/blog\/uk\/crud-operaczii-v-blazor-server-side\/","url":"https:\/\/dijix.com.ua\/blog\/uk\/crud-operaczii-v-blazor-server-side\/","name":"Crud \u041e\u043f\u0435\u0440\u0430\u0446\u0456\u0457 \u0432 Blazor Server Side (SSR ) - Dijix - \u0411\u043b\u043e\u0433","isPartOf":{"@id":"https:\/\/dijix.com.ua\/blog\/#website"},"datePublished":"2024-05-25T07:23:50+00:00","dateModified":"2024-05-27T13:22:26+00:00","description":"\u0423 \u0446\u044c\u043e\u043c\u0443 \u0443\u0440\u043e\u0446\u0456 \u043c\u0438 \u0440\u043e\u0437\u0433\u043b\u044f\u043d\u0435\u043c\u043e, \u044f\u043a \u0448\u0432\u0438\u0434\u043a\u043e \u0456 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u0456\u0437\u0443\u0432\u0430\u0442\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0438\u0439 \u043d\u0430\u0431\u0456\u0440 CRUD-\u043e\u043f\u0435\u0440\u0430\u0446\u0456\u0439 \u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0456 Blazor Server.","breadcrumb":{"@id":"https:\/\/dijix.com.ua\/blog\/uk\/crud-operaczii-v-blazor-server-side\/#breadcrumb"},"inLanguage":"uk","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dijix.com.ua\/blog\/uk\/crud-operaczii-v-blazor-server-side\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dijix.com.ua\/blog\/uk\/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\u0456\u0457 \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":"uk"},{"@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":"uk","@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":"uk","@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\/1319","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=1319"}],"version-history":[{"count":3,"href":"https:\/\/dijix.com.ua\/blog\/wp-json\/wp\/v2\/posts\/1319\/revisions"}],"predecessor-version":[{"id":1326,"href":"https:\/\/dijix.com.ua\/blog\/wp-json\/wp\/v2\/posts\/1319\/revisions\/1326"}],"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=1319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dijix.com.ua\/blog\/wp-json\/wp\/v2\/categories?post=1319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dijix.com.ua\/blog\/wp-json\/wp\/v2\/tags?post=1319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}