Get Selected Value of Dropdownlist in ActionLink (MVC 5)

Question

I am trying to get the selected value of a dropdownlist in @Html.ActionLink but no luck so far. Requirement is to dynamically retrieve a table and have a dropdown list for actions that can be taken against the row. I need to select an action and then on hitting submit button, row ID and selected action value should be posted to the controller. Here is the piece of code I have in place.

@foreach (AdsViewModel ad in Model)
{
  <tbody>
     <tr>

         <td>@ad.Row_Id</td>
         <td class=" "> @ad.Description </td>
         <td class=" "> @ad.Valid_To.ToShortDateString() </td>
         <td><span class="label label-sm label-success label-mini"> @ad.Status </span></td>
         <td>@Html.DropDownList("actions", ad.Actions) </td>
         <td>@Html.ActionLink("Submit", "AdAction", new {adId = ad.Row_Id, action = ad.Actions.SelectedValue}) </td>
     </tr>
   </tbody>

}

On clicking the Submit ActionLink, I am getting the adId but no action is returned from the dropdownlist.

Your help is much appreciated. Edit: Here is the AdsViewModel

public class AdsViewModel
{
    public string Row_Id { get; set; } //Transaction Number
    public string Description { get; set; } //Trasaction Description
    public DateTime Valid_To { get; set; } //Expiry
    public string Status { get; set; } //Object Status Code
    public SelectList Actions { get; set; }
}

This is how the Select list is filled in Controller

List<SelectListItem> items = new List<SelectListItem>();
items.Add(new SelectListItem() { Text = "View", Value = "001" });
items.Add(new SelectListItem(){Text = "Modify", Value = "002"});
model.Actions = items;

Solution

This line

<td>@Html.ActionLink("Submit", "AdAction", new {adId = ad.Row_Id, action = ad.Actions.SelectedValue}) </td> 

is setting the route value action to the selected value at the time the view is created on the server and before its sent to the browser (the user hasn't selected anything yet so its null). If you are wanting to set the value to "001" or "002" (the values of the dropdowns), then you need to use javascript update the href attribute of the link when the dropdown changes. An easier and more conventional solution would be to delete the dropdown and use 2 action links, one for Viewand one for Edit. Since they are 2 different actions, there should also be 2 seperate ActionResult methods in your controller. For example

@Html.ActionLink("View", "View", new { id = ad.Row_Id }) // calls the View method
@Html.ActionLink("Modify", "Modify", new { id = ad.Row_Id }) // calls the Modify method

Edit

To do this using javascript, delete the @Html.ActionLink and replace with a <button type="button"> or other element and handle its click event

var url = '@Url.Action("AdAction")';
$('button').click(function() {
  var row = $(this).closest('tr');
  var rowID = row.children('td').eq(0).text();
  var actionID = row.find('select').val();
  window.location.href = url + '?adId=' + rowID + '&action=' + actionID;
});

Note: You are creating invalid html with the @Html.DropDownList() method (all <selects> will have id="action")

Comments

[Adil Khalil]

Well, ad.Actions is a dropdownlist and contains several values. It still just doesn't fetch the selected value of the dropdown.

[Aydin]

Could you update your question with the class you're using for your Model and AdsViewModel

[Adil Khalil]

Updated, see the Edit.

[Aydin]

<td>@Html.DropDownListFor("actions", m => m[i].Actions) </td> Does that make a difference at all?

[Adil Khalil]

Since the actions dropdownlist is populated at runtime and may contain more than one value, I cannot give all the actions upfront in my view. Can you please write a Javascript for me so that when I click on the submit button, it picks the Row_ID and the action ddl selected value and post to AdAction Action method?

[Adil Khalil]

Thanks @Stephen, your solution looks convincing. Can you please write an exact piece of code, I know this is very basic but I am totally new to Web Development and cannot figure it out on myself.

[Admin]

@AdilKhalil, What do you mean "exact piece of code"? What I included in my edit works fine.

[Adil Khalil]

I added the button and the javascript as you mentioned but on button click nothing happens.

[Admin]

Have you included that jquery files? Look in the browser console and see what errors you get

[Adil Khalil]

ReferenceError: jQuery is not defined if (!jQuery) { throw new Error("Bootstrap requires jQuery") } I see this Error only

[Admin]

That's because you have not included the jquery files.