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);
    });
});

If you do not want to use javascript, then put a correctly generated dropdownlist inside a form with `FormMethod.Get` and submit it your `AddOrder()` method. But in any case this this is changing data so you should be doing a POST, not a GET. Using a link is not appropriate. (and being in a partial view is irelevant) — , Sep 21 '16 at 22:19

score 0 · Accepted Answer · edited Sep 21 '18 at 12:27

0

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!

edited Sep 21 '18 at 12:27

marc_s

732,580
175
1,330
1,459

answered Sep 21 '16 at 19:36

Shyju

214,206
104
411
497

But it will not work in a `PartialView`. How can I sort that out? – Sugafree Sep 21 '16 at 19:52
It should still work for a partial view because your JavaScript code is going to be executed on the final rendered HTML page. – Shyju Sep 21 '16 at 19:53
But the final rendered view will have lets say 6 addToCart button, 6 quantity and 6 price. Or is it going to work like this if I put the `JavaScript` code inside the `PartialView`? I dont think that is a good way of doing it – Sugafree Sep 21 '16 at 19:58
Ok. Then you should not use the id at all. Have a CSS class for the anchor tag and use the CSS class as the jquery selector. Put the js code inside the main view which calls the partials – Shyju Sep 21 '16 at 20:00
I have tried using class before, but then it executed it 6 times. I can not remember exactly, but it was not working. Could you please some me an example of the `JavaScript` code to get the right lets say `.quantity` class out of those 6 – Sugafree Sep 21 '16 at 20:04
Are you sure you have the js code in the main view? Check the view source of the page and confirm that. If you have it in the main view only once, there is no way it executes 6 times. – Shyju Sep 21 '16 at 20:05
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/123890/discussion-between-sugafree-and-shyju). – Sugafree Sep 21 '16 at 20:08
See the updated answer. You should use relative jQuery selectors to get the quantity SELECT element – Shyju Sep 21 '16 at 21:23

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

1 Answers1