JQuery passing 'null parameters to MVC controller method

Question background.

I have a view that contains a button that when clicked passes the contents of a 'p' tag and 'h3' tag. These tags are populated from a passed list of models from the corrosposnding controller.

I have an 'AddToCart' method on the controller that has the parameters passed to it from a Ajax JQuery function in the View.

The issue:

The following shows the JQuery Ajax call and the cshtml markup. Ideally I would like to pass the contents to the function. Currently I get the info from the tags based on their id's.

View Markup:

<h3 class="panel-title boldFeatures" id="name">@(Model.ElementAt(0).ProductName)</h3>

 <div class="panel-body">
      <img src="~/Images/LionToy.png" class="img-circle" id="featuresImages" alt="Work">
      <p>@(Model.ElementAt(0).ProductSummary)</p>
      <p id="qty">@(Model.ElementAt(0).productPrice)</p>

  @Html.ActionLink("Add To Cart", "AddToCart", null, new { id = "addToCart" }, new { @class = "btn btn-primary btn-block" })

The Ajax Function:

  <script>
    $("#addToCart").click(function (e) {

        e.preventDefault();
        $.ajax({
            url: '/HomePage/AddToCart',
            type: 'POST',
            data: { name: $('#name').val(), qty: $('#qty').val() },
        });
    });
    </script>

Controller AddToCart method:

 public void AddToCart(string name, string qty)
 {
    //Add to cart logic.
 }

Issue:

As shown the controller method is having both parameters passed as 'null'.

EDIT:

I have tried all of the suggestions below and still both of the parameters are being passed as 'null'.