How to get value selected in @Html.DropDownListFor inside the view and pass it to action in OTHER controller?

Question

I have a dropdown list. If user chooses to click Fetch call I want to pass id of selected Call to action FetchCall in controller Person.

<p>
    @Html.DropDownListFor(m => m.CallsToMake, new SelectList(Model.CallsToMake.OrderByDescending(call => call.TimeStamp), null), new { @class = "btn btn-default dropdown-toggle", style = "width: 500px;" })
</p>
<p>
     @Html.ActionLink("Fetch call","FetchCall", "Person", new { id = HERE_SELECTED_CALL_ID }, new { @class = "btn btn-info btn-lg" })
</p>

View is strongly typed against: @model WebApplication2.Models.ApplicationUser and is associated with Action Details in controller ApplicationUsers.

How to get value selected in @Html.DropDownListFor inside the view and pass it to action in OTHER controller in my case?

---

If it is not a problem I feel better with java script(I understand better what is going on).

EDIT

This is solution(mine) which lacks getting value from dropdown in java script function.

The dropdown list:

    @Html.DropDownListFor(m => m.CallsToMake, new SelectList(Model.CallsToMake.OrderByDescending(call => call.TimeStamp), null), new { @class = "btn btn-default dropdown-toggle", style = "width: 500px;" })

The button when clicked javascript:FetchCall() is invoked:

<input type="button" id="FetchCallButton" value="Fetch call" onclick="javascript:FetchCall()" />

The JavaScript function:

 function FetchCall() {
        var url = '@Url.Action("FetchCall, "Person")';  
        $.post(url, { callToMakeId: SELECTED_CALL_IN_DROPDOWN_ID_HOW_TO_GET_IT}, function (data) {
            alert('YES');
        });
    }

The action method in PersonController:

public ActionResult FetchCall(int callToMakeId) {...}

Question: How to get selected call.Id in the java script function?

---

EDIT 2

Thanks to Tommy's solution I've been able to read selection in dropdown list. The problem is that I get exacly what is written in the dropdown list which is result from ToString() inside CallToMake class.

function:

function FetchCall() {
    alert($("#CallsToMake").val());
    var url = '@Url.Action("FetchCall", "Person")';
    $.post(url, { callToMakeId: $("#CallsToMake").val() }, function (data) {
        alert('YES');
    });
}

I show in image below contents of the drop down and alert alert($("#CallsToMake").val());:

The only solution that comes to my mind is to display id of the call in the dropdown list and then cut it out in the controller action. It sounds bad, isn't it?

EDIT 3

The list finally looks like:

@Html.DropDownListFor(m => m.CallsToMake, new SelectList(Model.CallsToMake.OrderByDescending(call => call.TimeStamp), "Id","Id"), new { @class = "btn btn-default dropdown-toggle", style = "width: 500px;" })

java script:

    function FetchCall() {
        alert($("#CallsToMake").val());
        var url = '@Url.Action("FetchCall", "Person")';
        $.post(url, { callToMakeId: $("#CallsToMake").val() }, function (data) {
            alert('YES');
        });
    }
=

and the Action method

 public ActionResult FetchCall(int callToMakeId) {
            CallToMake callToMake = db.CallsToMake.Find(callToMakeId);
            int idPersonToCall = callToMake.Callee.Id;
            db.CallsToMake.Remove(callToMake);
            db.SaveChanges();
            Debug.WriteLine("I AM HERE");
            return RedirectToAction("Details", new { id = idPersonToCall });
        }

Action method is being invoked but I am not redirected anywhere. Method just runs and that is all.

Answer 1

First you need to construct your SelectList using the overload that accepts a DataValueField and TextValueField. Refer documentation. This might look something like

... new SelectList(Model.CallsToMake, "CallID", "CallName"), ..

Script (this assumes you remove the onclick attribute from the button)

$('#FetchCallButton').click(function() {
  var url = '@Url.Action("FetchCall, "Person")';
  var callID = $("#CallsToMake").val();
  window.location.href = url + '/' + callID; // redirect to /Person/FetchCall/3
});