Sugafree Sugafree - 2 months ago 20
jQuery Question

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

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

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

With java script/jquery, you can read the value of selected option and append to the querystring 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 quarystring
     var newUrl = currentUrl + "?qty =" + $(this).closest(".gadgetItem")
                                                 .find(".qtySelect").val();



    window.location.href=newUrl; ///Load the new page with all querystrings


  });

});

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 querystring to "0.0001" and order thousands of your products!!!!!