MVC Razor Ajax call from button click
<p>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?</p>

<p>The Ajax script in my Razor form:</p>

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

<p>The button that I want to use to invoke the Ajax function:</p>

<pre><code>&lt;input type="button" value="Use Shipping Address" id="UseShipAddr" /&gt;
</code></pre>

<p>The action in CheckoutController:</p>

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