javascript - 如何将参数传递给将 div 从页面模型填充到其 Razor 页面的 javascript 函数?
问题描述
我正在尝试使用 Braintree 的支付 DropinUI,并且配置它需要将生成的令牌发送到我页面中的 javascript 函数。我的 Razor 页面中有以下标记:
<div id="dropin-container"></div>
<button id="submit-button">Request payment method</button>
<script>
function configureBraintreeClient(clientToken) {
var button = document.querySelector('#submit-button');
braintree.dropin.create({
authorization: clientToken,
container: '#dropin-container'
}, function (createErr, instance) {
button.addEventListener('click', function () {
instance.requestPaymentMethod(function (requestPaymentMethodErr, payload) {
// Submit payload.nonce to your server
});
});
});
}
</script>
div #dropin-container 由函数 configureBraintreeClient 的结果填充。所以,我需要在页面加载时传入一个 clientToken。
我的页面模型生成客户端令牌:
public class IndexModel : PageModel
{
private readonly IJSRuntime _jsRuntime;
public IndexModel(IJSRuntime jsRuntime)
{
_jsRuntime = jsRuntime;
}
public IActionResult OnGet()
{
// Create gateway
var gateway = new BraintreeGateway
{
Environment = Environment.SANDBOX,
MerchantId = "xxxxxxx",
PublicKey = "xxxxxxx",
PrivateKey = "xxxxxxx"
};
var clientToken = gateway.ClientToken.Generate();
JSRuntimeExtensions.InvokeVoidAsync(_jsRuntime, "configureBraintreeClient", clientToken);
// Not sure if this is needed, doesn't work with return type of
// void and this line removed either.
Page();
}
}
这不起作用。div 永远不会被填充。
我可以将客户端令牌直接插入标记中并且它运行完美,因此它与将客户端令牌从页面模型传递到页面有关。我不应该使用 JSRuntime 扩展吗?
我尝试将客户端令牌设置为模型属性并使用剃刀语法将其插入函数中,authorization: @Model.ClientToken
但它不起作用。
我试图四处挖掘以更好地了解页面生命周期,但我发现没有任何东西可以帮助我解决这个问题。
我在浏览器的开发人员控制台或 Visual Studio 中看不到任何错误,但我对在 ASP .NET Core 中调试 javascript 知之甚少。
将参数传递给像这样更新 div 的 javascript 函数的正确方法是什么?
解决方案
因为我们没有merchant ID
,Public key
并且Private key
,请确保您生成了正确的令牌,然后您可以尝试以下操作:
1.IndexModel():
private readonly IJSRuntime _jsRuntime;
public IndexModel(IJSRuntime jsRuntime)
{
_jsRuntime = jsRuntime;
}
[BindProperty]
public string clientToken { get; set; }
public void OnGet()
{
// Create gateway
var gateway = new BraintreeGateway
{
Environment = Braintree.Environment.SANDBOX,
MerchantId = "xxxxxxx",
PublicKey = "xxxxxxx",
PrivateKey = "xxxxxxx"
};
clientToken = gateway.ClientToken.Generate();
JSRuntimeExtensions.InvokeVoidAsync(_jsRuntime, "configureBraintreeClient", clientToken);
}
2.剃刀页面(无需使用功能):
<div id="dropin-container"></div>
<button id="submit-button">Request payment method</button>
<script src="https://js.braintreegateway.com/web/dropin/1.20.4/js/dropin.min.js">
</script>
<script>
var button = document.querySelector('#submit-button');
braintree.dropin.create({
authorization: '@Model.clientToken',
container: '#dropin-container'
}, function (createErr, instance) {
button.addEventListener('click', function () {
instance.requestPaymentMethod(function (requestPaymentMethodErr, payload) {
// Submit payload.nonce to your server
});
});
});
</script>
https://developers.braintreepayments.com/start/hello-client/javascript/v3
我可以将客户端令牌直接插入标记中并且它运行完美,因此它与将客户端令牌从页面模型传递到页面有关。我不应该使用 JSRuntime 扩展吗?
为此,如果您想使用客户端令牌,我建议您可以参考: https ://developers.braintreepayments.com/start/tutorial-drop-in-node
对于授权,您还可以使用令牌化密钥。
推荐阅读
- c - 如何获取线并将它们存储到数组中
- android - 找不到类'android.view.autofill.AutofillManager
- android - 使用 Firebase 作为后端的支付集成
- python - Python regex 查找仅包含空格的字符串
- ruby-on-rails - 没有路线匹配 [GET] "/static_pages/home"
- xml - 如何使用 Saxon 在 VSTS (Azure DevOps) 中对 XML 文件执行 XSLT?
- eclipse - Eclipse Oxygen - e4xmi 编辑器不再可用
- javascript - 从 DevEx UploadController 代码调用 JavaScript 后无响应
- java - 是否有低级 Swift 类在 AWS S3 中上传文件
- html - 具有多个选取框标签的动画