Passing selected button value from view to controller

Question

I would like to pass the selected button value to the controller. See my code below.

In my controller I am passing through the ProductId which I will then use to set up my product value inside my controller.

Controller:

public ActionResult PlaceOrder(int ProductId, string OrderType)
{
  // Do something
}

Inside my view I have a foreach loop which will create radio like buttons and I have also got a hiddenfor(SelectedProductId)

View:

<div class="panel panel-primary">
  <div class="panel-heading">Panel Name</div>
  <div class="panel-body">
    <div class="row">
      <div class="form-group">
        @Html.HiddenFor(m => m.SelectedProductId)
        @if (Model.Products != null && Model.Products.Count > 0)
        {
          <div class="btn-group" data-toggle="buttons">
          @foreach (var product in Model.Products)
          {
            <label class="btn btn-default productButton">        
              <div class="labelProduct">@Product.Name</div>
              <input type="radio" name="ProductGMX" id="@("product" + @product.Id)" autocomplete="off" checked data-id="@product.Id">
            </label>
          }
        </div>

I will want to pass the Product Id in the ActionLink which will then pass it to the controller but I am not sure how this can be achieved

Button Click:

@Html.ActionLink("Order with standard delivery", "PlaceOrder", "Standard", new { ProductId = ?,  OrderType = "Standard delivery" }, new { area = "Standard" })
@Html.ActionLink("Order with Next day Delivery", "PlaceOrder", "Elevated", new { ProductId = ?, OrderType = "NextDay" }, new { area = "Elevated", })

You view makes no sense. You either need to render each product name and the 2 associated links in each iteration (so you can add the `ProductId` route values) or if you want radio button for each product, then you need 2 buttons and use javascript to handle the buttons click event and build the relevant route based on the selected radio button. — , Mar 19 '15 at 00:16

score 0 · Accepted Answer · answered Mar 18 '15 at 14:11

0

You either need to use JavaScript to update the ActionLink's url whenever the product changes, using the data-id from the radio button.

Or

Use submit buttons instead of ActionLinks, and set the value on the radio button to the product id. You'll need to put some logic in your controller to handle the two different buttons.

answered Mar 18 '15 at 14:11

Dave

3,676
4
28
39

Would you mind sharing how this can be done using JS? – user1781232 Mar 18 '15 at 14:24

score 0 · Answer 2 · answered Mar 18 '15 at 14:35

Those aren't buttons. They're links, which don't participate in the form submission.

Use real buttons, i.e. <button></button> and give them a name. Then you can see which was clicked by inspecting the Request object:

<button name="_StandardDelivery">Order with standard delivery</button>

Then in your action:

if (Request["_StandardDelivery"] != null) {
    // user chose standard delivery
}

Passing selected button value from view to controller

2 Answers2