Embed Power BI Into Asp.net MVC without register application with Azure Active Directory.

16/06/2021- duocnt 1844 Views

MỤC ĐÍCH

Hướng dẫn cách nhúng power bi vào View của Asp.net MVC, không cần đăng ký Application với Azure Active Directory.

NỘI DUNG

Tạo project Asp.net MVC.
Tạo Embedded Code Power BI từ Power BI Service.
Nhúng Power BI vào View MVC.
Viết CSS iframe responsive.
Fix lỗi phát sinh.

HOÀN THÀNH SẼ NHƯ SAU.

THỰC HIỆN

1 -Tạo project Asp.net MVC.

Tạo 1 project Asp.Net MVC thông thường và view on browser.

Bài viết này sẽ Embed Power BI vào vị trí khung màu đỏ ở hình trên.

2 - Tạo Embedded Code Power BI từ Power BI Service.

Trong ví dụ này, giả sử chúng ta đã có 1 page Power BI được publish lên Power BI service.
Vào Power BI service, view Power BI.

Click "File" => "Embed report" => "Publish to web (public)".

Click "Create embed code".

Click "Publish".

Click button "Copy" ở textbox "HTML you can paste into a website".

Sau khi copy, bạn sẽ có code HTML như sau:

    <iframe width="600" height="373.5"
            src="https://app.powerbi.com/view?r=eyJrIjoiYWNjOTJhMDMtZDRmYS00YTRjLWJhOTYtNDFjMTkwOTkzZDAwIiwidCI6IjA3ZjZiNzVhLTQxNjMtNDM0Ni1hYmZjLWIxZTJmNjYxNTY3YiIsImMiOjEwfQ%3D%3D"
            frameborder="0"
            allowFullScreen="true">
    </iframe>

3 - Nhúng Power BI vào View MVC.

Mở file "Index.cshtml" trong "Views/Home" ở chế độ design.

Chúng ta sẽ xóa đoạn code HTML có sẳn được khoang trong khung màu đỏ ở hình trên và paste đoạn code HTML đã copy ở mục trên vào.

View on browser.

Với những thao tác đơn giản, chúng ta có thể nhúng Power BI vào View của MVC như trên mà không cần phải đăng ký 1 application với Azure portal.
Tuy nhiên, khi chạy web trên điện thoại hoặc khi chúng ta kéo nhỏ trình duyệt lại thì Power BI sẽ không được co giãn theo.

iframe chưa có tính responsive. Vấn đề này không phải nằm ở Power BI mà là vấn để ở chổ CSS.
Do đó chúng ta cần làm thêm bước viết CSS responsive cho iframe bên dưới.

4 - Viết CSS iframe responsive.

Tạo "@secion script" trong View Index.cshtml và viết CSS như sau:

    <style type="text/css">
        [style*="--aspect-ratio"] > :first-child {
            width: 100%;
        }
 
        [style*="--aspect-ratio"] > img {
            height: auto;
        }
 
        @@supports (--custom:property) {
            [style*="--aspect-ratio"] {
                position: relative;
            }
 
                [style*="--aspect-ratio"]::before {
                    content: "";
                    display: block;
                    padding-bottom: calc(100% / (var(--aspect-ratio)));
                }
 
                [style*="--aspect-ratio"] > :first-child {
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                }
        }
    </style>