What Is Blazor<\/h2>\n\n\n\n
Blazor is a free open-source web framework, enabling developers to create interactive web UIs with C#, HTML code and Razor syntax instead of JavaScript. The way Blazor works is that it creates client-based apps with WebAssembly and Server-side applications with ASP.NET. The Server app communicates with the browser through a constant connection using SignalR, while WebAssembly executes directly in the browser.<\/p>\n\n\n\n
Our blog features a detailed overview of Blazor, Blazor WebAssembly, and Blazor Server. So in case you want to dive in deeper, go on and read Blazor Server vs. Blazor WebAssembly<\/a> blog post.<\/p>\n\n\n\n While Blazor is a framework, Razor, or Razor Pages, is a templating (View) engine. The Razor syntax combines Razor markup, C#, and HTML to create dynamic web content. Typically, Razor is used for powering ASP.NET MVC Views. So, every time you write an MVC View, you will usually use Razor syntax to bind data to the markup. In an MVC app, the Razor page is processed on the server, and then sent to the client as a single HTML page. When the page is refreshed in the browser, it is re-processed on the server, and sent back to the client.<\/p>\n\n\n\n Blazor is a framework that leverages the Razor components to produce dynamic HTML. The biggest difference between Razor and Blazor is that Razor is a markup language with C#, while Blazor is the framework that lets you run C# code and use the Razor view engine in the browser.<\/p>\n\n\n\n Razor components are units of markup and code that represent the basic UI elements of any Blazor app implemented with a .razor extension. In other words, Blazor uses Razor components to create UIs, meaning you can write Razor components and utilize Blazor as the client-side hosting model for them.<\/p>\n\n\n\n To get started, you must install both NodeJS and Visual Studio Code on your machine.<\/p>\n\n\n\n Step 1 – Create a New Blazor project<\/strong><\/p>\n\n\n\n Start Visual Studio 2022 and click Create a new project on the start page, select the Blazor Web Assembly App template, and click Next. After providing a project name and description, click Create.<\/p>\n\n\n\n <\/p>\n\n\n\n Step 2 – Install Ignite UI for Blazor package<\/strong><\/p>\n\n\n\n Right clicking the Solution, or Project, and select Manage NuGet Packages for Solution. Then, open the Browse tab in the package manager dialog, select the Infragistics package source, and install the IgniteUI.Blazor<\/span> NuGet package.<\/p>\n\n\n\n <\/p>\n\n\n\n Step 3 – Register Ignite UI for Blazor component<\/strong><\/p>\n\n\n\n Open the Program.cs<\/strong><\/span> file and register the Ignite UI for Blazor Service by adding the following after the builder.Services.AddScoped<\/span> \u2026 line:<\/p>\n\n\n\n <\/strong><\/p>\n\n\n\n Step 4 \u2013 Update the Imports.razor file<\/strong><\/p>\n\n\n\n Add the IgniteUI.Blazor.Controls<\/strong> namespace in the _Imports.razor<\/strong> file:<\/p>\n\n\n\n <\/strong><\/p>\n\n\n\n Step 5 \u2013 Update the Pages\/_Layout.cshtml file<\/strong><\/p>\n\n\n\n Add the Style Sheet in the <head><\/span> element of the \\wwwroot\\index.html<\/strong> file:<\/p>\n\n\n\n <\/p>\n\n\n\n Step 6 – Add Ignite UI for Blazor Component<\/strong><\/p>\n\n\n\n Add an Ignite UI for Blazor component to your razor page:<\/p>\n\n\n\n Step 7 \u2013 Build & Run your App<\/strong><\/p>\n\n\n\n And you\u2019re all set! Click the Run button to build and run your new Blazor app running the Card View in Ignite UI!<\/p>\n\n\n\n <\/p>\n\n\n\n Now, if you want to significantly shorten development time, you can use low-code app makers like App Builder\u0442\u043c<\/sup>.<\/p>\n\n\n\n App Builder\u0442\u043c<\/sup><\/a> is a brand-new cloud-based WYSIWYG low-code development platform and drag-and-drop app builder that streamlines everything from design to code. The main purpose of the software is to eliminate the complexity behind UI design and app creation, while still enabling you and the entire dev team to focus on domain expertise for the business logic. You can build your business app in Blazor (and Angular) much faster than before with no hand-coding. And what\u2019s more, you have the option to download your project as a zip file or publish it on GitHub.<\/p>\n\n\n\n [View:https:\/\/youtu.be\/WSQ38lLacH4:578:348]<\/p>\n\n\n\n Compared to other low-code tools on the market, the main differentiator is that App Builder\u0442\u043c<\/sup> is backed up by a Design System<\/a>, real UI components, and over 60+ UI controls. One of the best things about it is that App Builder generates production ready code in Blazor (and Angular) in a click, letting you inspect the code and easily preview how your Blazor app (or Angular app) looks and feel. And if you think about all the full-featured components you need to build modern-day business apps \u2013 like data grids, charts, Swagger UI, UI controls, customization options, theming, branding, and more \u2013 this is what the WYSIWYG drag-and-drop App Builder\u0442\u043c<\/sup> software delivers as well.<\/p>\n\n\n\n Just recently, we published a comprehensive tutorial to help you build Blazor apps with App Builder and generate your Blazor code in less than 10 minutes. So, you can jump right to this Blazor step-by-step guide<\/a>.<\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" Terms for Blazor components and Razor components are widely used interchangeably. But Blazor and Razor are two different things. Learn all about Razor vs Blazor and see how to use each in Ignite UI.<\/p>\n","protected":false},"author":81,"featured_media":1034,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-294","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blazor"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=294"}],"version-history":[{"count":7,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/294\/revisions"}],"predecessor-version":[{"id":1856,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/294\/revisions\/1856"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/1034"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}What Is Razor<\/h2>\n\n\n\n
Razor vs Blazor: The Difference & the Link Between Them Solved<\/h2>\n\n\n\n
And What About Blazor vs Razor Components?<\/h2>\n\n\n\n
This Is How to Use Blazor and Razor in Ignite UI<\/h2>\n\n\n\n
![\"Create](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/03\/12\/2677.Blazor-WASM-App-Create.jpg\" "\\"Create")
<\/figure>\n\n\n\n![\"Add](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/03\/12\/2677.Add-Infragistics-Blazor-Nuget-Packages.jpg\" "\\"Add")
<\/figure>\n\n\n\nbuilder.Services.AddIgniteUIBlazor();<\/pre>\n\n\n\n
@using IgniteUI.Blazor.Controls<\/pre>\n\n\n\n
<head>\n\t...\n\t<link href=\"_content\/IgniteUI.Blazor\/themes\/light\/bootstrap.css\" rel=\"stylesheet\" \/>\n<\/head><\/pre>\n\n\n\n
<IgbCard style=\"width:350px\">\n\t<IgbCardMedia>\n\t\t<img src=\"https:\/\/images.unsplash.com\/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=350&q=80\" \/>\n\t<\/IgbCardMedia>\n\t<IgbCardHeader>\n\t\t<h4>Jane Doe<\/h4>\n\t\t<h6>Professional Photographer<\/h6>\n\t<\/IgbCardHeader>\n\t<IgbCardContent>Hi! I'm Jane, photographer and filmmaker.\n\t\tPhotography is a way of feeling, of touching,\n\t\tof loving. What you have caught on film is captured forever...\n\t\tit remembers little things, long after you have\n\t\tforgotten everything.<\/IgbCardContent>\n\t<IgbCardActions>\n\t\t<IgbButton>More Info<\/IgbButton>\n\t<\/IgbCardActions>\n<\/IgbCard><\/pre>\n\n\n\n
\n<\/code><\/p>\n\n\n\n![\"Blazor](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/03\/12\/4743.blazor-card-view.jpg\" "\\"Blazor")
<\/figure>\n\n\n\nBuilding Enterprise Blazor Apps with App Builder<\/h2>\n\n\n\n
![\"Ignite](\"https:\/\/static.infragistics.com\/marketing\/Blog-in-content-ads\/Ignite-UI-Blazor\/ignite-ui-blazor-you-get-ad.gif\")
<\/a><\/figure>\n\n\n\n