Как вставить HTML в Blazor WASM? ⇐ C#

Место общения программистов C#
Anonymous
Как вставить HTML в Blazor WASM?

Сообщение Anonymous »

Я работаю над решением для электронной коммерции. Клиентская часть — это проект Blazor WASM .Net 6. Я пытаюсь использовать сторонний платежный шлюз, но, к сожалению, их поддержка очень плохая. Я пытаюсь прогрессировать методом проб и ошибок.
На странице оформления заказа я пытаюсь внедрить сценарий, который отображает информацию о кредитной карте на странице, и я получаю этот сценарий в качестве ответа от API стороннего шлюза. .
Вот пример содержимого сценария и его отображения (https://codebeautify.org/htmlviewer#):
Изображение

Вот Checkout.razor (только связанные части)

Код: Выделить всё

    @page "/ECommerce/Checkout"
@page "/ECommerce/Checkout/{StandardDeliveryCharge:double}"

@inject IJSRuntime _jsRuntime
@inject ILocalStorageService _localStorage
@inject IProductService _productService
@inject IPaymentService _paymentService
@inject IOrderService _orderService
@inject NavigationManager _navigationManager
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]

@if (IsProcessing)
{

[img]images/Spinner@1x-1.0s-200px-200px.gif[/img]

}
else
{







Billing Details





First Name *






Address *





City *




State / Country *



Posta / Zip *






Email Address *



Phone *











Your Order



Product
Total


@foreach (var prod in Order.OrderDetails)
{


@prod.ProductName [b]x[/b]  @prod.Count

@prod.Price.ToString("c")

}



[b]Cart Subtotal (Shipment)[/b]

@StandardDeliveryCharge.ToString("c")



[b]Order Total[/b]


[b]@((Order.OrderHeader.OrderTotal + @StandardDeliveryCharge).ToString("c"))[/b]





Payment Method





@SelectedPayment

[list]
[*]
Available Payment Methods

[*]
Stripe Payment

[*]


[*]
Iyzipay Payment

[/list]

Place Order














}
@code {

private string checkout;
private string SelectedPayment { get; set;  } = "Stripe";

private SuccessModelDTO result = new SuccessModelDTO()
{
StatusCode = 0
};

private async Task HandleCheckout()
{
if(SelectedPayment == "Stripe")
{
await StripePayment();
}
else if (SelectedPayment == "Iyzico")
{
await IyzicoPayment(Order);
}

}

private async Task IyzicoPayment(OrderDTO order)
{
try
{
IsProcessing = true;
var iyzicoPaymentDto = new IyzicoPaymentDTO()
{
Order = Order
};

result = await _paymentService.Checkout(iyzicoPaymentDto);

if(result.StatusCode == 200)
{

checkout = result.Data.ToString();

var orderDtoSaved = await _orderService.CreateForIyzico(iyzicoPaymentDto);

await _localStorage.SetItemAsync(SD.Local_OrderDetails, orderDtoSaved);

await _jsRuntime.InvokeVoidAsync("injectIyzicoScript", checkout);
}

IsProcessing = false;
}
catch (Exception e)
{
await _jsRuntime.ToastrError(e.Message);
}
}

}
Вот код JavaScript, который я пытаюсь внедрить:

Код: Выделить всё

function injectIyzicoScript(scriptContent) {
const div = document.getElementById("iyzipay-checkout-form");
if (div != null) {
div.insertAdjacentHTML("beforeend", scriptContent);
} else {
console.error('Element with id "iyzipay-checkout-form" not found.');
}
}
Но я получаю элемент с идентификатором «iyzipay-checkout-form», который не найден. в консоли браузера, и страница с информацией о карте не отображается.Вот пример содержимого сценария, полученного из стороннего API.

Код: Выделить всё

if (typeof iyziInit == 'undefined') {var iyziInit = {currency:"TRY",token:"dce6b28f-f7c6-45b0-af50-30473899f11f",price:1000.00,pwiPrice:1000.00,locale:"tr",baseUrl:"https://sandbox-api.iyzipay.com", merchantGatewayBaseUrl:"https://sandbox-merchantgw.iyzipay.com", registerCardEnabled:true,bkmEnabled:true,bankTransferEnabled:false,bankTransferTimeLimit:{"value":5,"type":"day"},bankTransferRedirectUrl:"http://localhost:7169/OrderConfirmation",bankTransferCustomUIProps:{},campaignEnabled:false,campaignMarketingUiDisplay:null,paymentSourceName:"",plusInstallmentResponseList:null,payWithIyzicoSingleTab:false,payWithIyzicoSingleTabV2:false,payWithIyzicoOneTab:false,newDesignEnabled:false,mixPaymentEnabled:true,creditCardEnabled:true,bankTransferAccounts:[],userCards:[],fundEnabled:true,memberCheckoutOtpData:{},force3Ds:false,isSandbox:true,storeNewCardEnabled:true,paymentWithNewCardEnabled:true,enabledApmTypes:["SOFORT","IDEAL","QIWI","GIROPAY"],payWithIyzicoUsed:false,payWithIyzicoEnabled:true,payWithIyzicoCustomUI:{},buyerName:"John",buyerSurname:"Doe",merchantInfo:"",merchantName:"Sandbox Merchant Name - 3397951",cancelUrl:"",buyerProtectionEnabled:false,hide3DS:false,gsmNumber:"",email:"email@email.com",checkConsumerDetail:{},subscriptionPaymentEnabled:false,ucsEnabled:false,fingerprintEnabled:false,payWithIyzicoFirstTab:false,creditEnabled:false,payWithIyzicoLead:false,goBackUrl:"",metadata : {},createTag:function(){var iyziJSTag = document.createElement('script');iyziJSTag.setAttribute('src','https://sandbox-static.iyzipay.com/checkoutform/v2/bundle.js?v=1719940949305');document.head.appendChild(iyziJSTag);}};iyziInit.createTag();}
Как отобразить этот скрипт карточки на странице?
Изменить 1:
Мне удалось отобразить карточку на странице, вот что я сделал на данный момент.
  • Изменил JS
    function injectScript(scriptContent) {
    var script = document.createElement('script');
    const subject = document.querySelector("#iyzipay-checkout-form");
    script.type = 'text/javascript';
    script.innerHTML = scriptContent;
    subject.appendChild(script);


    Добавлена ​​MarkupString на razor
    @((MarkupString)checkout)
  • Удаление кавычки
    result = await _payService.Checkout(iyzicoPaymentDto);

    Код: Выделить всё

     if(result.StatusCode == 200)
{
// Assuming result.Data.ToString() contains the script as a string
checkout = result.Data.ToString();

// Remove the beginning and end single quotes and  tags
var scriptContent = checkout.Trim('\'');
var startIndex = scriptContent.IndexOf("") + "".Length;
var endIndex = scriptContent.IndexOf("");
scriptContent = scriptContent[startIndex..endIndex];

var orderDtoSaved = await _orderService.CreateForIyzico(iyzicoPaymentDto);

await _localStorage.SetItemAsync(SD.Local_OrderDetails, orderDtoSaved);

// Execute the JavaScript code
await _jsRuntime.InvokeVoidAsync("eval", scriptContent);
}
Теперь проблема в том, что после оплаты он не перезванивает на мою страницу бритвы Blazor WASM, поскольку третья сторона совершает POST-запрос.
Изображение

Изменить 2:
Это действие API получает ответ, но я не уверен, как перейти на страницу бритвы OrderConfirmation в Blazor WASM?

Код: Выделить всё

[HttpPost]
[AllowAnonymous]
[ActionName("PaymentCallback")]
public async Task PaymentCallback([FromForm] string token)
{
var confirmationUrl = "http://localhost:7169/OrderConfirmation";
try
{
// Process the payment result
var tokenValue = token;

}
catch (Exception ex)
{
return BadRequest(new { message = ex.Message });
}
// Return the URL to the client
return Ok(new { RedirectUrl = confirmationUrl });
}
Изменить 3:
Добавление возврата RedirectPermanent("http://localhost:7169/OrderConfirmation");< /code> к действию API, похоже, работает так, как я хочу.

Подробнее здесь: https://stackoverflow.com/questions/786 ... lazor-wasm
Вернуться к началу

Вернуться в «C#»