ทดลองสร้าง Web Assembly ด้วย ASP.NET Core โดยใช้ Ooui Web Framework

Ooui Web Framework คือ A small cross-platform UI library that brings the simplicity of native UI development to the web สรุปง่ายๆก็คือมันเป็น Library ที่ใช้สำหรับแปลง Native UI ไปรันบนเวป หรือเรียกอีกอย่างนึงว่า Web Assembly 1 นั่นเอง พัฒนาโดยนาย Frank A. Krueger ซึ่งผมได้อธิบายไว้คร่าวๆแล้วที่ “สร้าง Web Assembly ง่ายๆด้วย Ooui Web Framework

บทความนี้ผมจะมาทดสอบการพัฒนา ASP .NET Core แล้วแปลงเป็น Web Assembly ด้วย Ooui Web Framework ครับ

  1. New ASP .NET Core Web Application

  1. เลือก Web Application (Razor Page) หรือจะใช้ MVC ก็ได้นะครับ

  1. ติดตั้ง Nuget Package ดังนี้

  1. เพิ่ม Content Page ตั้งชื่อว่า MainPage.xaml เข้าไปในโปรเจ็ค

  1. แก้ไขไฟล์ MainPage.xaml ดังนี้
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CBFormsWeb.MainPage">
    <StackLayout>
        <Label x:Name="myLabel"
           Text="Hello World"/>
        <Entry x:Name="myEntry"
           Placeholder="Input text here"/>
        <Button Text="Submit"
            BackgroundColor="Silver"
            x:Name="myButton"/>
    </StackLayout>
</ContentPage>
  1. แก้ไขไฟล์ MainPage.xaml.cs ดังนี้
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace CBFormsWeb
{
	[XamlCompilation(XamlCompilationOptions.Compile)]
	public partial class MainPage : ContentPage
	{
        public MainPage()
        {
            InitializeComponent();
            myButton.Clicked += MyButton_Clicked;
        }
        void MyButton_Clicked(object sender, EventArgs e)
        {
            myLabel.Text = myEntry.Text;
        }
    }
}
  1. แก้ไขไฟล์ Startup.cs โดยเพิ่้มคำสั่ง
app.UseOoui();
Xamarin.Forms.Forms.Init();

ไปไว้ที่ Configure Method

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseBrowserLink();
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
    }

    app.UseOoui();
    Xamarin.Forms.Forms.Init();

    app.UseStaticFiles();

    app.UseMvc();
}
  1. แก้ไขไฟล์ Index.cshtml.cs โดยเริ่มจาก Using Namspace ดังนี้
  • using Ooui.AspNetCore;
  • using Xamarin.Forms;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Ooui.AspNetCore;
using Xamarin.Forms;

namespace CBFormsWeb.Pages
{
    public class IndexModel : PageModel
    {
        public IActionResult OnGet()
        {
            return new ElementResult(new MainPage().GetOouiElement());
        }
    }
}

สำหรับท่านที่ใช้เป็น MVC ใส่โค้ดได้ที่ HomeController.cs ดังนี้ครับ

using System.Diagnostics;
using Microsoft.AspNetCore.Mvc;
using CBFormsWeb.Models;
using Ooui.AspNetCore;
using Xamarin.Forms;

namespace CBFormsWeb.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return new ElementResult(new MainPage().GetOouiElement());
        }        
    }
}
  1. ทดสอบ Run โปรแกรมด้วย Chrome Browser

และแล้ว Xamarin.Forms ก็ได้ขึ้นไปรันบน Browser ได้ทุกที่แล้วนั่นเอง

Demo: https://github.com/CodeBangkok/CBFormsWeb
Source: https://montemagno.com/building-a-xaml-xamarin-forms-asp-net-website/

บริจาค (Donate) ให้กับ CodeBangkok ได้ที่
BTC = 3GDxhb84ho2jmAV9seAgAFJ7dy1XR3GCyc
ETH = 0x119fa8A618A0283D1834853325A8FF4fe1101230
LTC = ME2abSdDeQYuTmzZSAnHL7LGGeF836d1ut
ZEC = t1Y4NkK3Dx3yBbwCVdpXzKYrqUSJSHgaFXa

https://www.lazada.co.th/products/codebangkok-i219874509-s334754949.html

https://www.lazada.co.th/products/c-net-core-i221844611-s338593893.html?spm=a2o6z.10453683.17.2.77ba30028gg3mg&mp=3