How to pass select list value in action link without using javascript and creating a model for it?

Question

I have a shopping cart and I created a simple select list for quantity via Html. I would like to use an Html.ActionLink to get the value of that select list, however if I use JavaScript in will not work as it is inside a PartialView called product and there are multiple number of product on the page.

How could I get the value of that select list without JavaScript? I did look around, but did not find anything useful. Is there any other way?

PartialView

            <p>@Model.Description</p>
            <p id="price">@Model.Price</p>
            <p class="id hidden">@Model.GadgetID</p>
            <select name="Select" id="quantity">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
            <p>
                Html.ActionLink("Add To Cart", "AddOrder", "Home",new { qty = ?? , id = Model.GadgetID, price = Model.Price }, null )                    
            </p>

Or if I use JavaScript how can I get the right details as there are multiple products on the page.

View that includes that PartialView.

<div class="col-lg-10 products">   
        <div class="pad">
            @foreach (var item in Model)
            {
                foreach (var gadget in item.Gadgets)
                {
                    @Html.Partial("Gadget", gadget)
                }
            }
        </div>
    </div> 

JQuery

<script type="text/javascript">
$(document).ready(function () {
    $(".AddToCartBtn").click(function () {

        var _qty = $(this).find("#quantity").val();
        var _id = $(this).find(".id").val();
        var _price = $("#price").html();

        alert("qty: " + _qty + " id: " + _id + " price: " + _price);
    });
});

Answer 1

You cannot do it without client side javascript because user can change the selection of your quantity dropdown at client side.

With Javascript / jQuery, you can read the value of selected option and append to the query string when the link is clicked. Also since you will have the same markup generated from the partial view, you should not use hardcoded static ids. Id's should be unique for html elements. With your current code, it will generate same id for all the quantity select elements. You can use a css class and use the closest() and find() method to get access to the quantity select element of the link clicked.

<div class="gadgetItem">

    <select name="Select" class="qtySelect">
        <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
    </select>
    @Html.ActionLink("Add To Cart", "AddOrder", "Home",
           new { @id = Model.GadgetID, price = Model.Price }, new { id="addToCart"} ) 

</div>

and in JavaScript, listen to the click event on the link. Assuming jQuery is available to the page,(this code should go in the main page,not in the partial view)

$(function(){

  $(document).on("click","#addtoCart",function(e){

    e.preventDefault();  // Stop the normal link click behaviour

    var currentUrl = $(this).attr("href");  // Get the url

     // Append the quantity value to query string
     var newUrl = currentUrl + "?qty =" + $(this).closest(".gadgetItem")
                                                 .find(".qtySelect").val();

    window.location.href=newUrl; ///Load the new page with all query strings
  });
});

Also I suggest you not read the price from the client request. You should always read it back from the db in server based on the Id of the item. If not, I can update the price in the query string to "0.0001" and order thousands of your products!