joanne
/
Altob.NtuInvoiceGateway


			
				
					
						
						
							
							@page
@model TestPostInvoiceModel
@{
    ViewData["Title"] = "POST 轉頁測試";
    Layout = null;
}

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>發票系統 POST 測試頁面</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <div class="card">
            <div class="card-header bg-success text-white">
                <h3>發票系統 POST 轉頁測試</h3>
            </div>
            <div class="card-body">
                <form method="POST" action="/Invoice">
                    @Html.AntiForgeryToken()

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">開發票者統編 (Identifier) *</label>
                            <input type="text"
                                   class="form-control"
                                   name="InvoiceData.Identifier"
                                   value="@(string.IsNullOrWhiteSpace(Model.CompanyTaxId) ? "" : Model.CompanyTaxId)"
                                   required>
                            <small class="text-muted">8位數字</small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">發票交易日期 (TransDateTime) *</label>
                            <input type="text"
                                   class="form-control"
                                   name="InvoiceData.TransDateTime"
                                   value="@Model.CurrentTransDateTime"
                                   required>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">發票交易金額 (TransAmount) *</label>
                            <input type="text" class="form-control" name="InvoiceData.TransAmount" value="150" required>
                            <small class="text-muted">最多6位數</small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">設備代號 (DeviceID) *</label>
                            <input type="text" class="form-control" name="InvoiceData.DeviceID" value="NtuInvGateway" required>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">停車場站代號 (LocationID) *</label>
                            <input type="text" class="form-control" name="InvoiceData.LocationID" value="1" maxlength="1" required>
                            <small class="text-muted">1個字元</small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">車牌號碼 (CarPlateNum) *</label>
                            <input type="text" class="form-control" name="InvoiceData.CarPlateNum" value="9M1234" required>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">訂單編號 (OrderID) *</label>
                            <input type="text" class="form-control" name="InvoiceData.OrderID" value="@Model.CurrentOrderNo" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">稅別 (TaxType) *</label>
                            <select class="form-control" name="InvoiceData.TaxType" required>
                                <option value="1">應稅</option>
                                <option value="2">零稅率</option>
                                <option value="3">免稅</option>
                            </select>
                            <small class="text-muted">1個字元</small>
                        </div>
                    </div>

                    <hr>
                    <h5 class="text-muted">選填欄位（可預填，留空則讓用戶填寫）</h5>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">消費者信箱 (Email)</label>
                            <input type="email" class="form-control" name="InvoiceData.Email" placeholder="留空讓用戶填寫">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">手機條碼 (CarrierID)</label>
                            <input type="text" class="form-control" name="InvoiceData.CarrierID" placeholder="留空讓用戶填寫">
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">購買者統編 (BuyerIdentifier)</label>
                            <input type="text" class="form-control" name="InvoiceData.BuyerIdentifier" placeholder="留空讓用戶填寫">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">捐贈碼 (LoveCode)</label>
                            <input type="text" class="form-control" name="InvoiceData.LoveCode" placeholder="留空讓用戶填寫">
                        </div>
                    </div>

                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-success btn-lg">
                            POST 方式轉頁到發票頁面
                        </button>
                    </div>
                </form>

                <hr class="my-4">

                <div class="alert alert-info">
                    <h5>POST 測試說明</h5>
                    <ul>
                        <li>所有必填欄位都會 POST 到發票頁面</li>
                        <li>Email、手機條碼、購買者統編、捐贈碼如果留空，將在發票頁面讓用戶填寫</li>
                        <li>如果預填了這四個欄位的其中一個，用戶將直接看到該預填值</li>
                        <li>此頁面包含有效的防偽令牌（CSRF Token）</li>
                    </ul>
                </div>

                <hr class="my-4">

                <div class="card border-primary">
                    <div class="card-header bg-primary text-white">
                        <h5>JSON POST 測試（符合規格要求）</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-success"><strong>✓ 此方式符合英特拉規格：Method: POST, 資料格式: JSON</strong></p>
                        <button type="button" class="btn btn-primary btn-lg w-100" onclick="testJsonPost()">
                            發送 JSON POST 請求到發票頁面
                        </button>
                        <div id="jsonResult" class="mt-3"></div>
                    </div>
                </div>

                <hr>

                <div class="card bg-light">
                    <div class="card-body">
                        <h6>比較：GET vs POST</h6>
                        <a href="/TestInvoice.html" class="btn btn-outline-primary btn-sm">GET 測試頁面</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        async function testJsonPost() {
            const resultDiv = document.getElementById('jsonResult');
            resultDiv.innerHTML = '<div class="alert alert-info">發送中...</div>';

            const form = document.querySelector('form');
            if (!form) {
                resultDiv.innerHTML = '<div class="alert alert-danger">找不到表單元素</div>';
                return;
            }

            const formData = new FormData(form);
            const jsonData = {
                identifier: formData.get('InvoiceData.Identifier')?.toString() ?? '',
                transDateTime: formData.get('InvoiceData.TransDateTime')?.toString() ?? '',
                transAmount: formData.get('InvoiceData.TransAmount')?.toString() ?? '',
                deviceID: formData.get('InvoiceData.DeviceID')?.toString() ?? '',
                email: formData.get('InvoiceData.Email')?.toString() ?? '',
                carrierID: formData.get('InvoiceData.CarrierID')?.toString() ?? '',
                locationID: formData.get('InvoiceData.LocationID')?.toString() ?? '',
                carPlateNum: formData.get('InvoiceData.CarPlateNum')?.toString() ?? '',
                orderID: formData.get('InvoiceData.OrderID')?.toString() ?? '',
                buyerIdentifier: formData.get('InvoiceData.BuyerIdentifier')?.toString() ?? '',
                loveCode: formData.get('InvoiceData.LoveCode')?.toString() ?? '',
                taxType: formData.get('InvoiceData.TaxType')?.toString() ?? ''
            };

            try {
                const response = await fetch('/Invoice', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(jsonData)
                });

                if (response.ok) {
                    // JSON POST 成功，直接顯示返回的 HTML 頁面
                    const html = await response.text();
                    document.open();
                    document.write(html);
                    document.close();
                } else {
                    resultDiv.innerHTML = `<div class="alert alert-danger">請求失敗: ${response.status}</div>`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<div class="alert alert-danger">發生錯誤: ${error.message}</div>`;
            }
        }
    </script>
</body>
</html>