JQuery passing 'null parameters to MVC controller method

Question

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'.

Answer 1

Quite a few things are funky in this code, so I'm going to post something you can literally copy-paste into a new mvc project and it will work straight away:

Try this:

View Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("#addToCart").click(function (e) {
            e.preventDefault();
            alert($(this).data("name"));
            $.ajax({
                url: '@Url.Action("AddToCart")',
                type: 'POST',
                data: { name: $(this).data("name"), qty: $(this).data("quantity") },
            });
        });
    });
</script>

<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>

        <input type="button" data-name="@Model.ElementAt(0).ProductName" data-quantity="@Model.ElementAt(0).Quantity" value="Add to Cart" id="addToCart" />
</div>

In the Controller:

    public void AddToCart(string name, string qty)
    {
        //Add to cart logic.
        string qname = name + qty; //put a breakpoint here and you'll see name is populated.
    }

Answer 2

h3 and paragraph have text content not value. change your ajax call to

data: { name: $('#name').text(), qty: $('#qty').text() },