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

Question

I have a drop down list. If the user selects a click on a Fetch call, I want to pass the identifier of the selected Call to the FetchCall action in the Person controller.

 <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> 

The view is strongly typed: @model WebApplication2.Models.ApplicationUser and is associated with Action Details in the ApplicationUsers controller.

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

---

If this is not a problem, I feel better with a java script (I better understand what is happening).

EDIT

This is a solution (mine) that lacks the value from the dropdown in the java script function.

Drop-down 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 is called when javascript:FetchCall() pressed javascript:FetchCall() :

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

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

Action method in PersonController :

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

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

---

EDIT 2

Thanks to Tommy's solution, I was able to read the selection in the drop-down list. The problem is that I get what is written in the drop-down list, which is the result of the ToString() class inside CallToMake .

function:

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

The image below shows the contents of the drop-down list and alert alerts alert($("#CallsToMake").val()); :

The only solution that comes to my mind is to display the call id in the drop-down list and then cut it in the controller action. That sounds bad, right?

EDIT 3

As a result, the list is as follows:

 @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 method of action

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

The action method is called, but I'm not redirected anywhere. The method just starts, and that’s it.

Answer 1

First you need to build your SelectList using an overload that accepts DataValueField and TextValueField . Refer to the documentation . It might look something like this:

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

Script (this assumes that 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 }); 

Answer 2

It should be straightforward. The model property identifier will be the identifier of the Razor element that is generated - for example:

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

will generate

 <select id="CallsToMake" name="CallsToMake" class="btn btn-default dropdown-toggle" style="width: 500px"> <option value="1">Some person</option> </select> 

Combining this knowledge with a jQuery call to get the element by id - $("#elementId") , we can send the selected value back using an AJAX request.

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

Answer 3

thanx for @Tommy this works for me. but I had a problem if I had to return from two dropdowlists how to do this in the request. then I found a way, and I think it will help others.

 function fetch(){ var url = '@Url.Action("resultView","Test")'; $.post(url, { LocationID: $("#location_ID").val(), TypeID:$("#type_ID").val() }, function (data) { alert('YES'); }); } 

this works for me perfectly.