MVC Razor Ajax call from button click

Question

I'm struggling to get a button click to invoke an Ajax function which then posts to a controller action. Cannot even get a simple message to work (nothing happens when button is clicked). Clearly, I'm missing something fundamental. What is it?

The Ajax script in my Razor form:

<script type="text/javascript">
    $('#UseShipAddr').click(function () {
        $.ajax({
            url: "@(Url.Action("UseShippingAddress", "Checkout"))",
            type: "POST",
            data: { id: 50 },
            cache: false,
            async: true,
            success: function (data) {
                alert(data);
            }
        });
    });
</script>

The button that I want to use to invoke the Ajax function:

<input type="button" value="Use Shipping Address" id="UseShipAddr" />

The action in CheckoutController:

// Ajax POST: /Checkout/UseShippingAddress/5
        [HttpPost]
        public ActionResult UseShippingAddress(int id)
        {            
            return Content("It worked!");
        }

Your code looks fine. Check your browser console for any js errors which might be the cause for your js code to not work as expected. — Shyju
– Shyju, Commented Sep 3, 2016 at 0:57
Please note that the model-view-controller tag is for questions about the pattern. There is a specific tag for the ASP.NET-MVC implementation. — user3559349
– user3559349, Commented Sep 3, 2016 at 1:04
Is jquery loaded? Is the script at the bottom of the page, or wrapped in $(document).ready()? — user3559349
– user3559349, Commented Sep 3, 2016 at 1:06

Illep · Accepted Answer · 2017-02-02 09:23:26Z

2

Please try this code.

$(document).ready(function(){

    $('#UseShipAddr').click(function () {

        $.ajax({
            url: "Checkout/UseShippingAddress",
            type: "POST",
            data: { id: 50 },
            cache: false,
            async: true,
            success: function (data) {
            alert(data);
        }
    });
});

edited Feb 2, 2017 at 9:23

Illep

16.9k49 gold badges187 silver badges316 bronze badges

answered Sep 6, 2016 at 10:24

ghodasara keval

214 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

MVC Razor Ajax call from button click

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related