How do I send the results of a javascript method (JSON object) to the code-behind on asp.net webform?

Question

I have a piece of javascript that processes some of my form data and the result needs to be submitted to my code-behind so I can map it to an objects and save to a database:

Here is the form:

<form method="POST" id="paymentForm">
    <span class="payment-errors" runat="server"></span>

    <div>
        <label>
            <span>Card Number</span>
            <br />
            <input type="text" size="20" data-stripe="number" runat="server" placeholder="1111222233334444" />
        </label>
    </div>

    <div>
        <label>
            <span>CVC</span>
            <br />
            <input type="text" size="4" data-stripe="cvc" runat="server" placeholder="123"/>
        </label>
    </div>

    <div>
        <label>
            <span>Expiration (MM/YYYY)</span>
            <br />
            <input type="text" size="2" data-stripe="exp-month" runat="server" placeholder="01"/>
        </label>
        <br />
        <input type="text" size="4" data-stripe="exp-year" runat="server" placeholder="2020"/>
    </div>
    <button type="submit">Submit Payment</button>
</form>

Here it the js bits:

<script type="text/javascript">
    // This identifies your website in the createToken call below
    // You need to put your real publish key here.
    Stripe.setPublishableKey('pk_test_1nDJ3hA1Mv2Sy9bUoYcBMXmm');
    // ...
    // I am using jquery to process the payment. It knows what form to 
    // process it on based on the name 'payment-form'
    jQuery(function ($) {
        //payment submission
        $('#ctl01').submit(function (event) {
            alert('In .submit()');
            var $form = $(this);

            // Disable the submit button to prevent repeated clicks
            $form.find('button').prop('disabled', true);

            Stripe.createToken($form, stripeResponseHandler);

            // Prevent the form from submitting with the default action
            return false;
        });

        //if there is a error, it is displayed on the page if there was
        //no error this is where it gets sent to the server.
        var stripeResponseHandler = function (status, response) {
            var $form = $('#ctl01');

            if (response.error) {
                // Show the errors on the form
                $form.find('.payment-errors').text(response.error.message);
                $form.find('button').prop('disabled', false);
            } else {
                // token contains id, last4, and card type
                var token = response.id;
                // Insert the token into the form so it gets submitted to the server
                $form.append($('<input type="hidden" name="stripeToken" />').val(token));
                // and submit
                $form.get(0).submit();
            }
        };
    });
</script>

So the js creates a Stripe token, but I don't know how to get this to hit my code-behind when I hit submit. The page just flashes and nothing is there.

I tried to make the button an asp.net button with an event tied to it, no good.

Should I do something in Page_Load() that will be able to have this data in the POST to the page?

Can you expand on that a little @mshsayem? I believe I have seen that before, but am not sure how to implement it given I need my javascript to execute first and THEN the results sent to the code-behind. — ledgeJumper, Aug 05 '13 at 00:51

score 1 · Accepted Answer · edited May 23 '17 at 11:55

1

I see two immediate options, depending upon what you want to do in the server-side code:

Manually invoke __doPostBack JavaScript function to cause a server-side postback. I would recommend this approach if you want to interact with the ASP.NET server controls on the page.

Here is another StackOverflow question that details how to send Multiple parameters in __doPostBack.

Call an ASP.NET AJAX Page Method, which is essentially a stand-alone web service hosted inside of an ASP.NET page. I would recommend this approach if you just want to invoke some server-side logic (i.e. save or retrieve data from the database), but do not not need an instance of the page itself, as this is an asynchronous operation and none of the page controls will be available. This is great for just sending data to the server and getting data back that jQuery can handle.

Here is how to use jQuery to directly call ASP.NET AJAX page methods.

edited May 23 '17 at 11:55

Community

1
1

answered Aug 05 '13 at 00:58

Karl Anderson

34,606
12
65
80

2

@davidisawesome - good luck to you, if you feel this answer was useful then feel free to upvote and/or accept the answer. – Karl Anderson Aug 05 '13 at 01:29
Upvote for now, but this leads to a follow up question. I know kind of understand __DoPostBack(), but it leads me to wonder if I should wrap the js I need executed in it, or do I use it in the OnClick="..." event on the submit button. I tried the ajax with a [WebMethod] and it did not hit the method. This trying it to find errors or typos.. – ledgeJumper Aug 05 '13 at 01:37
1

I would not do it on the `OnClick=`, because you said you needed some JavaScript processing to happen and then the resulting data sent to the server, right? Did you get an error with the page method (via Chrome Developer Tools, Firebug or IE F12 Tools)? – Karl Anderson Aug 05 '13 at 02:00

How do I send the results of a javascript method (JSON object) to the code-behind on asp.net webform?

1 Answers1