{"id":3484,"date":"2018-03-28T07:05:09","date_gmt":"2018-03-28T07:05:09","guid":{"rendered":"http:\/\/www.rezafaisal.net\/?p=3484"},"modified":"2018-03-28T07:09:04","modified_gmt":"2018-03-28T07:09:04","slug":"browser-razor-blazor","status":"publish","type":"post","link":"https:\/\/www.rezafaisal.net\/?p=3484","title":{"rendered":"Browser + Razor = Blazor!"},"content":{"rendered":"<p>{<strong><em>Pendahuluan<\/em><\/strong>}<\/p>\n<p>Blazor dibangun atas basis teknologi web yang sudah ada yaitu HTML dan CSS.\u00a0 Perbedaannya adalah alih-alih menggunakan JavaScript untuk \u201cpemrograman antarmuka\/UI\u201d, Blazor menggunakan sintaks C# dan Razor.\u00a0 Sampai saat ini, Blazor masih merupakan project eksperiment, project yang mengkhususkan diri sebagai \u201cweb UI framework\u201d.\u00a0 Tujuan utamanya adalah untuk membantu memudahkan dan mempercepat pembangunan Single-Page Application (SPA) yang dapat berjalan indah pada semua web browser.\u00a0 Blazor berjalan pada sisi client atau akan diproses pada web browser.\u00a0 Sehingga diperlukan .NET framework pada web browser.\u00a0 Penggunaan .NET pada browser app mempunyai beberapa manfaat yaitu:<\/p>\n<ul>\n<li>Stabil dan konsisten.<\/li>\n<li>Mendukung bahasa pemrograman modern seperti C# dan F#.<\/li>\n<li>Didukung oleh tool development handal, yaitu Visual Studio <img decoding=\"async\" class=\"wlEmoticon wlEmoticon-smile\" style=\"border-style: none;\" src=\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2018\/03\/wlEmoticon-smile.png\" alt=\"Smile\" \/><\/li>\n<li>Fast dan scalable, cepat dikembangkan, reliable dan aman.<\/li>\n<\/ul>\n<p>Sedangkan Blazor akan memiliki beberapa feature sebagai berikut:<\/p>\n<ul>\n<li>component model untuk membangun composable UI.<\/li>\n<li>routing.<\/li>\n<li>layout.<\/li>\n<li>form dan validasi.<\/li>\n<li>dependency injection<\/li>\n<li>JS interop.<\/li>\n<li>live reloading pada browser.<\/li>\n<li>server side rendering.<\/li>\n<li>.NET debugging untuk browser dan IDE.<\/li>\n<li>intellisense dan tooling.<\/li>\n<li>tetap dapat dijalankan pada web browser yang belum mendukung WebAssembly dengan bantuan asm.js.<\/li>\n<li>publishing dan app size trimming.<\/li>\n<\/ul>\n<p>Menjalankan .NET pada browser sangat dimungkinkan karena adanya WebAssembly, sebuah standar web baru untuk sebuah aplikasi yang dikompilasi.\u00a0 Aplikasi tersebut dapat dijalankan pada web browser dengan kecepatan yang sama seprti aplikasi native.<\/p>\n<p>{<strong><em>Routing &amp; Component<\/em><\/strong>}<\/p>\n<p>Pada posting sebelumnya di <a title=\"http:\/\/www.rezafaisal.net\/?p=3480\" href=\"http:\/\/www.rezafaisal.net\/?p=3480\">http:\/\/www.rezafaisal.net\/?p=3480<\/a>, telah dijelaskan hal-hal yang diperlukan untuk membangun aplikasi dengan Blazor, berikut contohnya.\u00a0 Pada posting akan dijelaskan sedikit lebih detail tentang apa yang telah dilakukan pada posting sebelumnya.<\/p>\n<p>Pertama kita akan berkenalan dengan routing.\u00a0 Pada project terdapat file App.cshtml yang bertugas sebagai komponen Router.\u00a0 Tugasnya adalah menunjuk komponen yang diminta oleh user.\u00a0 Isi file ini adalah sebagai berikut.<\/p>\n<div id=\"codeSnippetWrapper\" style=\"font-size: 8pt; overflow: auto; cursor: text; font-family: 'Courier New', courier, monospace; width: 97.5%; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;\">\n<div id=\"codeSnippet\" style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\">\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum1\" style=\"color: #606060;\">   1:<\/span> &lt;!--<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum2\" style=\"color: #606060;\">   2:<\/span>     Configuring <span style=\"color: #0000ff;\">this<\/span> here <span style=\"color: #0000ff;\">is<\/span> temporary. Later we<span style=\"color: #006080;\">'ll move the app config<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum3\" style=\"color: #606060;\">   3:<\/span>     into Program.cs, and it won't be necessary to specify AppAssembly.<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum4\" style=\"color: #606060;\">   4:<\/span> --&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum5\" style=\"color: #606060;\">   5:<\/span> &lt;Router AppAssembly=<span style=\"color: #0000ff;\">typeof<\/span>(Program).Assembly \/&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<\/div>\n<\/div>\n<p>Pada baris-5 adalah cara untuk memanggil komponen Router.<\/p>\n<p>Pada project telah diberikan 3 contoh komponen yaitu \/, Counter dan FetchData yang keduanya disimpan dalam folder Pages dengan nama file Index.cshtml,\u00a0 Counter.cshtml dan FetchData.cshtml.\u00a0 Selain itu juga terdapat komponen lain pada folder Shared yaitu SurveyPrompt.cshtml.<\/p>\n<p>{<strong><em>Component: HelloBlazor<\/em><\/strong>}<\/p>\n<p>Berikut ini akan diberikan contoh membuat komponen sederhana dengan nama HelloBlazor.\u00a0 Maka terlebih dahulu dibuat file HelloBlazor.cshtml yang disimpan pada folder Pages.\u00a0 Isi file ini adalah sebagai berikut.<\/p>\n<div id=\"codeSnippetWrapper\" style=\"font-size: 8pt; overflow: auto; cursor: text; font-family: 'Courier New', courier, monospace; width: 97.5%; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;\">\n<div id=\"codeSnippet\" style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\">\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum1\" style=\"color: #606060;\">   1:<\/span> @page <span style=\"color: #006080;\">\"\/helloblazor\"<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum2\" style=\"color: #606060;\">   2:<\/span> &lt;h1&gt;Hello Blazor&lt;\/h1&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<\/div>\n<\/div>\n<p>Untuk memanggil komponen ini dapat\u00a0 dipanggil di halaman *.cshtml mana saja.\u00a0 Sebagai contoh jika ingin memanggil pada file Index.cshtml maka dapat dilakukan dengan cara seperti pada baris ke-9.<\/p>\n<div id=\"codeSnippetWrapper\" style=\"font-size: 8pt; overflow: auto; cursor: text; font-family: 'Courier New', courier, monospace; width: 97.5%; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;\">\n<div id=\"codeSnippet\" style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\">\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum1\" style=\"color: #606060;\">   1:<\/span> @page \"\/\"<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum2\" style=\"color: #606060;\">   2:<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum3\" style=\"color: #606060;\">   3:<\/span> <span style=\"color: #0000ff;\">&lt;<\/span><span style=\"color: #800000;\">h1<\/span><span style=\"color: #0000ff;\">&gt;<\/span>Hello, world!<span style=\"color: #0000ff;\">&lt;\/<\/span><span style=\"color: #800000;\">h1<\/span><span style=\"color: #0000ff;\">&gt;<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum4\" style=\"color: #606060;\">   4:<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum5\" style=\"color: #606060;\">   5:<\/span> Welcome to your new app.<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum6\" style=\"color: #606060;\">   6:<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum7\" style=\"color: #606060;\">   7:<\/span> <span style=\"color: #0000ff;\">&lt;<\/span><span style=\"color: #800000;\">SurveyPrompt<\/span> <span style=\"color: #ff0000;\">Title<\/span><span style=\"color: #0000ff;\">=\"How is Blazor working for you?\"<\/span> <span style=\"color: #0000ff;\">\/&gt;<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum8\" style=\"color: #606060;\">   8:<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum9\" style=\"color: #606060;\">   9:<\/span> <span style=\"color: #0000ff;\">&lt;<\/span><span style=\"color: #800000;\">HelloBlazor<\/span> <span style=\"color: #0000ff;\">\/&gt;<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<\/div>\n<\/div>\n<p>Hasilnya dapat dilihat pada gambar di bawah ini.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;\" title=\"blog01\" src=\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2018\/03\/blog01-2.jpg\" alt=\"blog01\" width=\"450\" height=\"223\" border=\"0\" \/><\/p>\n<p>{<strong><em>Componen: SayName<\/em><\/strong>}<\/p>\n<p>Berikut ini akan diberikan contoh komponen dengan masukan parameter.\u00a0 Berikut adalah contoh SayName.cshtml.\u00a0 Parameter adalah property yang bersifat public.<\/p>\n<div id=\"codeSnippetWrapper\" style=\"font-size: 8pt; overflow: auto; cursor: text; font-family: 'Courier New', courier, monospace; width: 97.5%; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;\">\n<div id=\"codeSnippet\" style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\">\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum1\" style=\"color: #606060;\">   1:<\/span> @page <span style=\"color: #006080;\">\"\/sayname\"<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum2\" style=\"color: #606060;\">   2:<\/span> &lt;h1&gt;Hello @YourName&lt;\/h1&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum3\" style=\"color: #606060;\">   3:<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum4\" style=\"color: #606060;\">   4:<\/span> @functions<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum5\" style=\"color: #606060;\">   5:<\/span> {<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum6\" style=\"color: #606060;\">   6:<\/span>     <span style=\"color: #0000ff;\">public<\/span> <span style=\"color: #0000ff;\">string<\/span> YourName { get; set; }<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum7\" style=\"color: #606060;\">   7:<\/span> }<\/pre>\n<p><!--CRLF--><\/p>\n<\/div>\n<\/div>\n<p>Dan untuk memanggilnya dapat dilakukan dengan cara berikut ini.\u00a0 Pengisian parameter dapat dilakukan seperti mengisi atribut pada tag HTML.<\/p>\n<div id=\"codeSnippetWrapper\" style=\"font-size: 8pt; overflow: auto; cursor: text; font-family: 'Courier New', courier, monospace; width: 97.5%; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;\">\n<div id=\"codeSnippet\" style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\">\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum1\" style=\"color: #606060;\">   1:<\/span> @page <span style=\"color: #006080;\">\"\/\"<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum2\" style=\"color: #606060;\">   2:<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum3\" style=\"color: #606060;\">   3:<\/span> &lt;h1&gt;Hello, world!&lt;\/h1&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum4\" style=\"color: #606060;\">   4:<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum5\" style=\"color: #606060;\">   5:<\/span> Welcome to your <span style=\"color: #0000ff;\">new<\/span> app.<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum6\" style=\"color: #606060;\">   6:<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum7\" style=\"color: #606060;\">   7:<\/span> &lt;SurveyPrompt Title=<span style=\"color: #006080;\">\"How is Blazor working for you?\"<\/span> \/&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum8\" style=\"color: #606060;\">   8:<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum9\" style=\"color: #606060;\">   9:<\/span> &lt;SayName YourName=<span style=\"color: #006080;\">\"M Reza Faisal\"<\/span> \/&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<\/div>\n<\/div>\n<p>{<em><strong>Layout<\/strong><\/em>}<\/p>\n<p>pada Blazor, layout juga dianggap sebagai komponen.\u00a0 Contoh komponen layout dapat dilihat pada file Shared\/MainLayout.cshtml.<\/p>\n<div id=\"codeSnippetWrapper\" style=\"font-size: 8pt; overflow: auto; cursor: text; font-family: 'Courier New', courier, monospace; width: 97.5%; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;\">\n<div id=\"codeSnippet\" style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\">\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum1\" style=\"color: #606060;\">   1:<\/span> @implements ILayoutComponent<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum2\" style=\"color: #606060;\">   2:<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum3\" style=\"color: #606060;\">   3:<\/span> <span style=\"color: #0000ff;\">&lt;<\/span><span style=\"color: #800000;\">div<\/span> <span style=\"color: #ff0000;\">class<\/span><span style=\"color: #0000ff;\">='container-fluid'<\/span><span style=\"color: #0000ff;\">&gt;<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum4\" style=\"color: #606060;\">   4:<\/span>     <span style=\"color: #0000ff;\">&lt;<\/span><span style=\"color: #800000;\">div<\/span> <span style=\"color: #ff0000;\">class<\/span><span style=\"color: #0000ff;\">='row'<\/span><span style=\"color: #0000ff;\">&gt;<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum5\" style=\"color: #606060;\">   5:<\/span>         <span style=\"color: #0000ff;\">&lt;<\/span><span style=\"color: #800000;\">div<\/span> <span style=\"color: #ff0000;\">class<\/span><span style=\"color: #0000ff;\">='col-sm-3'<\/span><span style=\"color: #0000ff;\">&gt;<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum6\" style=\"color: #606060;\">   6:<\/span>             <span style=\"color: #0000ff;\">&lt;<\/span><span style=\"color: #800000;\">NavMenu<\/span> <span style=\"color: #0000ff;\">\/&gt;<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum7\" style=\"color: #606060;\">   7:<\/span>         <span style=\"color: #0000ff;\">&lt;\/<\/span><span style=\"color: #800000;\">div<\/span><span style=\"color: #0000ff;\">&gt;<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum8\" style=\"color: #606060;\">   8:<\/span>         <span style=\"color: #0000ff;\">&lt;<\/span><span style=\"color: #800000;\">div<\/span> <span style=\"color: #ff0000;\">class<\/span><span style=\"color: #0000ff;\">='col-sm-9'<\/span><span style=\"color: #0000ff;\">&gt;<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum9\" style=\"color: #606060;\">   9:<\/span>             @Body<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum10\" style=\"color: #606060;\">  10:<\/span>         <span style=\"color: #0000ff;\">&lt;\/<\/span><span style=\"color: #800000;\">div<\/span><span style=\"color: #0000ff;\">&gt;<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum11\" style=\"color: #606060;\">  11:<\/span>     <span style=\"color: #0000ff;\">&lt;\/<\/span><span style=\"color: #800000;\">div<\/span><span style=\"color: #0000ff;\">&gt;<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum12\" style=\"color: #606060;\">  12:<\/span> <span style=\"color: #0000ff;\">&lt;\/<\/span><span style=\"color: #800000;\">div<\/span><span style=\"color: #0000ff;\">&gt;<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum13\" style=\"color: #606060;\">  13:<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum14\" style=\"color: #606060;\">  14:<\/span> @functions {<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum15\" style=\"color: #606060;\">  15:<\/span>     public RenderFragment Body { get; set; }<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum16\" style=\"color: #606060;\">  16:<\/span> }<\/pre>\n<p><!--CRLF--><\/p>\n<\/div>\n<\/div>\n<p>Pada komponen layout harus menggunakan implementasi ILayoutComponent.\u00a0 Pada sintaks Razor dapat dilakuknan dengan menggunakan direktive @implements.\u00a0 Sebagai isi dari layout digunakan property Body.\u00a0 Kemudian pada halaman di atas dapat dilihat pemanggilan komponen &lt;NavMenu \/&gt;.<\/p>\n<p>{<strong><em>Root Component<\/em><\/strong>}<\/p>\n<p>Pada Blazor sepertinya semua dianggap komponen termasuk file Program.cs.\u00a0 File ini dianggap sebagai root component.<\/p>\n<div id=\"codeSnippetWrapper\" style=\"font-size: 8pt; overflow: auto; cursor: text; font-family: 'Courier New', courier, monospace; width: 97.5%; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;\">\n<div id=\"codeSnippet\" style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\">\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum1\" style=\"color: #606060;\">   1:<\/span> <span style=\"color: #0000ff;\">using<\/span> Microsoft.AspNetCore.Blazor.Browser.Rendering;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum2\" style=\"color: #606060;\">   2:<\/span> <span style=\"color: #0000ff;\">using<\/span> Microsoft.AspNetCore.Blazor.Browser.Services;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum3\" style=\"color: #606060;\">   3:<\/span> <span style=\"color: #0000ff;\">using<\/span> System;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum4\" style=\"color: #606060;\">   4:<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum5\" style=\"color: #606060;\">   5:<\/span> <span style=\"color: #0000ff;\">namespace<\/span> WebApplication1<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum6\" style=\"color: #606060;\">   6:<\/span> {<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum7\" style=\"color: #606060;\">   7:<\/span>     <span style=\"color: #0000ff;\">class<\/span> Program<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum8\" style=\"color: #606060;\">   8:<\/span>     {<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum9\" style=\"color: #606060;\">   9:<\/span>         <span style=\"color: #0000ff;\">static<\/span> <span style=\"color: #0000ff;\">void<\/span> Main(<span style=\"color: #0000ff;\">string<\/span>[] args)<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum10\" style=\"color: #606060;\">  10:<\/span>         {<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum11\" style=\"color: #606060;\">  11:<\/span>             var serviceProvider = <span style=\"color: #0000ff;\">new<\/span> BrowserServiceProvider(configure =&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum12\" style=\"color: #606060;\">  12:<\/span>             {<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum13\" style=\"color: #606060;\">  13:<\/span>                 <span style=\"color: #008000;\">\/\/ Add any custom services here<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum14\" style=\"color: #606060;\">  14:<\/span>             });<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum15\" style=\"color: #606060;\">  15:<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum16\" style=\"color: #606060;\">  16:<\/span>             <span style=\"color: #0000ff;\">new<\/span> BrowserRenderer(serviceProvider).AddComponent&lt;App&gt;(<span style=\"color: #006080;\">\"app\"<\/span>);<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum17\" style=\"color: #606060;\">  17:<\/span>         }<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum18\" style=\"color: #606060;\">  18:<\/span>     }<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum19\" style=\"color: #606060;\">  19:<\/span> }<\/pre>\n<p><!--CRLF--><\/p>\n<\/div>\n<\/div>\n<p>{<strong><em>Dependency Injection<\/em><\/strong>}<\/p>\n<p>Kita melakukan inject service ke dalam komponen dengan menggunakan contructor injection atau menggunakan directive @inject.\u00a0 Sebagai contoh dapat dilihat pada komponen FetchData.cshtml.\u00a0 Penggunaan directive @inject pada baris ke-2.<\/p>\n<div id=\"codeSnippetWrapper\" style=\"font-size: 8pt; overflow: auto; cursor: text; font-family: 'Courier New', courier, monospace; width: 97.5%; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;\">\n<div id=\"codeSnippet\" style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\">\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum1\" style=\"color: #606060;\">   1:<\/span> @page <span style=\"color: #006080;\">\"\/fetchdata\"<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum2\" style=\"color: #606060;\">   2:<\/span> @inject HttpClient Http<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum3\" style=\"color: #606060;\">   3:<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum4\" style=\"color: #606060;\">   4:<\/span> &lt;h1&gt;Weather forecast&lt;\/h1&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum5\" style=\"color: #606060;\">   5:<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum6\" style=\"color: #606060;\">   6:<\/span> &lt;p&gt;This component demonstrates fetching data from the server.&lt;\/p&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum7\" style=\"color: #606060;\">   7:<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum8\" style=\"color: #606060;\">   8:<\/span> @<span style=\"color: #0000ff;\">if<\/span> (forecasts == <span style=\"color: #0000ff;\">null<\/span>)<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum9\" style=\"color: #606060;\">   9:<\/span> {<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum10\" style=\"color: #606060;\">  10:<\/span>     &lt;p&gt;&lt;em&gt;Loading...&lt;\/em&gt;&lt;\/p&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum11\" style=\"color: #606060;\">  11:<\/span> }<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum12\" style=\"color: #606060;\">  12:<\/span> <span style=\"color: #0000ff;\">else<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum13\" style=\"color: #606060;\">  13:<\/span> {<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum14\" style=\"color: #606060;\">  14:<\/span>     &lt;table <span style=\"color: #0000ff;\">class<\/span>=<span style=\"color: #006080;\">'table'<\/span>&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum15\" style=\"color: #606060;\">  15:<\/span>         &lt;thead&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum16\" style=\"color: #606060;\">  16:<\/span>             &lt;tr&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum17\" style=\"color: #606060;\">  17:<\/span>                 &lt;th&gt;Date&lt;\/th&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum18\" style=\"color: #606060;\">  18:<\/span>                 &lt;th&gt;Temp. (C)&lt;\/th&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum19\" style=\"color: #606060;\">  19:<\/span>                 &lt;th&gt;Temp. (F)&lt;\/th&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum20\" style=\"color: #606060;\">  20:<\/span>                 &lt;th&gt;Summary&lt;\/th&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum21\" style=\"color: #606060;\">  21:<\/span>             &lt;\/tr&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum22\" style=\"color: #606060;\">  22:<\/span>         &lt;\/thead&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum23\" style=\"color: #606060;\">  23:<\/span>         &lt;tbody&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum24\" style=\"color: #606060;\">  24:<\/span>             @<span style=\"color: #0000ff;\">foreach<\/span> (var forecast <span style=\"color: #0000ff;\">in<\/span> forecasts)<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum25\" style=\"color: #606060;\">  25:<\/span>             {<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum26\" style=\"color: #606060;\">  26:<\/span>                 &lt;tr&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum27\" style=\"color: #606060;\">  27:<\/span>                     &lt;td&gt;@forecast.Date.ToShortDateString()&lt;\/td&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum28\" style=\"color: #606060;\">  28:<\/span>                     &lt;td&gt;@forecast.TemperatureC&lt;\/td&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum29\" style=\"color: #606060;\">  29:<\/span>                     &lt;td&gt;@forecast.TemperatureF&lt;\/td&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum30\" style=\"color: #606060;\">  30:<\/span>                     &lt;td&gt;@forecast.Summary&lt;\/td&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum31\" style=\"color: #606060;\">  31:<\/span>                 &lt;\/tr&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum32\" style=\"color: #606060;\">  32:<\/span>             }<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum33\" style=\"color: #606060;\">  33:<\/span>         &lt;\/tbody&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum34\" style=\"color: #606060;\">  34:<\/span>     &lt;\/table&gt;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum35\" style=\"color: #606060;\">  35:<\/span> }<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum36\" style=\"color: #606060;\">  36:<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum37\" style=\"color: #606060;\">  37:<\/span> @functions {<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum38\" style=\"color: #606060;\">  38:<\/span>     WeatherForecast[] forecasts;<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum39\" style=\"color: #606060;\">  39:<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum40\" style=\"color: #606060;\">  40:<\/span>     <span style=\"color: #0000ff;\">protected<\/span> <span style=\"color: #0000ff;\">override<\/span> async Task OnInitAsync()<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum41\" style=\"color: #606060;\">  41:<\/span>     {<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum42\" style=\"color: #606060;\">  42:<\/span>         forecasts = await Http.GetJsonAsync&lt;WeatherForecast[]&gt;(<span style=\"color: #006080;\">\"\/sample-data\/weather.json\"<\/span>);<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum43\" style=\"color: #606060;\">  43:<\/span>     }<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum44\" style=\"color: #606060;\">  44:<\/span><\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum45\" style=\"color: #606060;\">  45:<\/span>     <span style=\"color: #0000ff;\">class<\/span> WeatherForecast<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum46\" style=\"color: #606060;\">  46:<\/span>     {<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum47\" style=\"color: #606060;\">  47:<\/span>         <span style=\"color: #0000ff;\">public<\/span> DateTime Date { get; set; }<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum48\" style=\"color: #606060;\">  48:<\/span>         <span style=\"color: #0000ff;\">public<\/span> <span style=\"color: #0000ff;\">int<\/span> TemperatureC { get; set; }<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum49\" style=\"color: #606060;\">  49:<\/span>         <span style=\"color: #0000ff;\">public<\/span> <span style=\"color: #0000ff;\">int<\/span> TemperatureF { get; set; }<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum50\" style=\"color: #606060;\">  50:<\/span>         <span style=\"color: #0000ff;\">public<\/span> <span style=\"color: #0000ff;\">string<\/span> Summary { get; set; }<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: white; border-style: none; padding: 0px;\"><span id=\"lnum51\" style=\"color: #606060;\">  51:<\/span>     }<\/pre>\n<p><!--CRLF--><\/p>\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\"><span id=\"lnum52\" style=\"color: #606060;\">  52:<\/span> }<\/pre>\n<p><!--CRLF--><\/p>\n<\/div>\n<\/div>\n<p>Komponen ini menggunakan HttpClient untuk mengambil data JSON dari server seperti yang dapat dilihat pada baris ke-37 sampai dengan baris ke-52.\u00a0 Kemudian data dideserialisasi ke variable forecast yang berisi array dari object WeatherForecast.\u00a0 Selanjutnya data pada variable forecaset akan dirender pada table seperti yang dapat dilihat pada baris ke-24 sampai baris ke-32.<\/p>\n<p>Sekian isi posting kali ini, pada posting berikutnya akan diberikan contoh program sederhana yang ditulis dengan Blazor.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>{Pendahuluan} Blazor dibangun atas basis teknologi web yang sudah ada yaitu HTML dan CSS.\u00a0 Perbedaannya adalah alih-alih menggunakan JavaScript untuk \u201cpemrograman antarmuka\/UI\u201d, Blazor menggunakan sintaks C# dan Razor.\u00a0 Sampai saat ini, Blazor masih merupakan project eksperiment, project yang mengkhususkan diri&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3483,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[171,170],"class_list":["post-3484","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-softwaredev","tag-blazor","tag-vs-2017"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rezafaisal.net\/wp-content\/uploads\/2018\/03\/blog01-2.jpg","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1sNAL-Uc","_links":{"self":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/3484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3484"}],"version-history":[{"count":2,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/3484\/revisions"}],"predecessor-version":[{"id":3487,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/3484\/revisions\/3487"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/media\/3483"}],"wp:attachment":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3484"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}