title: MVC Razor Ajax call from button click
body: <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>