如何在Form.Submit之后从ASP.NET检索条带标记值

时间:2017-07-05 03:05:12

标签: c# jquery asp.net

这里需要帮助,这是我的代码

char=

我要做的是在用户点击“提交”后检索stripeToken,我所做的代码隐藏是

<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        /**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
        .StripeElement {
            background-color: white;
            padding: 8px 12px;
            border-radius: 4px;
            border: 1px solid transparent;
            box-shadow: 0 1px 3px 0 #e6ebf1;
            -webkit-transition: box-shadow 150ms ease;
            transition: box-shadow 150ms ease;
        }

        .StripeElement--focus {
            box-shadow: 0 1px 3px 0 #cfd7df;
        }

        .StripeElement--invalid {
            border-color: #fa755a;
        }

        .StripeElement--webkit-autofill {
            background-color: #fefde5 !important;
        }
    </style>

    <script src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript">
    </script>
</head>
<body>

        <div>

            <script src="https://js.stripe.com/v3/"></script>

            <form id="payment-form">
                <div class="form-row">
                    <label for="card-element">
                        Credit or debit card
                    </label>
                    <div id="card-element">
                        <!-- a Stripe Element will be inserted here. -->
                    </div>

                    <!-- Used to display form errors -->
                    <div id="card-errors" role="alert"></div>
                </div>

                <button>Submit Payment</button>
                <br />
                <br />
            </form>
                <form runat="server">
                    <asp:Button ID="Button1" runat="server" OnClientClick="abc()" OnClick="Button1_Click" Text="Button" />

                            </form>

        </div>
    <script>

        // Create a Stripe client
        var stripe = Stripe('pk_test_2O7D78OBubjUApxMMbvbHLVr');
        var test = "Whatsup";
        // Create an instance of Elements
        var elements = stripe.elements();

        // Custom styling can be passed to options when creating an Element.
        // (Note that this demo uses a wider set of styles than the guide below.)
        var style = {
            base: {
                color: '#32325d',
                lineHeight: '24px',
                fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                fontSmoothing: 'antialiased',
                fontSize: '16px',
                '::placeholder': {
                    color: '#aab7c4'
                }
            },
            invalid: {
                color: '#fa755a',
                iconColor: '#fa755a'
            }
        };

        // Create an instance of the card Element
        var card = elements.create('card', { style: style });

        // Add an instance of the card Element into the `card-element` <div>
        card.mount('#card-element');

        // Handle real-time validation errors from the card Element.
        card.addEventListener('change', function (event) {
            var displayError = document.getElementById('card-errors');
            if (event.error) {
                displayError.textContent = event.error.message;
            } else {
                displayError.textContent = '';
            }
        });

        // Handle form submission
        var form = document.getElementById('payment-form');
        form.addEventListener('submit', function (event) {
            event.preventDefault();

            stripe.createToken(card).then(function (result) {
                if (result.error) {
                    // Inform the user if there was an error
                    var errorElement = document.getElementById('card-errors');
                    errorElement.textContent = result.error.message;
                } else {
                    // Send the token to your server
                    stripeTokenHandler(result.token);
                }
            });
        });

        function stripeTokenHandler(token) {
            // Insert the token ID into the form so it gets submitted to the server
            var form = document.getElementById('payment-form');
            var hiddenInput = document.createElement('input');
            hiddenInput.setAttribute('type', 'hidden');
            hiddenInput.setAttribute('name', 'stripeToken');
            hiddenInput.setAttribute('value', token.id);
            form.appendChild(hiddenInput);

            // Submit the form
            form.submit();
        };


    </script>

    <script type="text/javascript">
        function abc() {
            var str = "value";
            document.getElementById("Hidden1").value = str;
        }
</body>
</html>

但我尝试调试以检查值,它似乎是“null”

如何从代码隐藏端检索它?

谢谢!

1 个答案:

答案 0 :(得分:0)

您的表单从未提交给服务器,这就是您获取null的原因。 当您单击Button1时,它只会在服务器上触发Button1_Click()事件。

您可以按F12,将调试器放在下面的功能上,看到它永远不会到达那里。

function stripeTokenHandler(token) {
        // Insert the token ID into the form so it gets submitted to the server
        var form = document.getElementById('payment-form');
        var hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'stripeToken');
        hiddenInput.setAttribute('value', token.id);
        form.appendChild(hiddenInput);

        // Submit the form
        form.submit();
    };

我的建议是:

  • 配置表单,在提交时向控制器请求API。
  • 要将表单onsubmit处理程序添加到以下块:

    <script type="text/javascript">
    function abc() {
        var str = "value";
        document.getElementById("Hidden1").value = str;
    }
    

    你可以试试上面那个让我知道结果吗?