如何在视图中的@ Html.DropDownListFor中选择值并将其传递给OTHER控制器中的操作？

Question

我有一个下拉列表.如果用户选择单击Fetch call我想在控制器中将选择的id传递Call给action .FetchCallPerson

<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是强类型的:@model WebApplication2.Models.ApplicationUser并且与Details控制器中的Action相关联ApplicationUsers.

如何在视图中的@ Html.DropDownListFor中选择值并在我的情况下将其传递给OTHER控制器中的操作？

---

如果不是问题我用java脚本会感觉更好(我更了解发生了什么).

编辑

这是解决方案(我的),它缺乏从java脚本函数下拉列表获取值.

下拉列表:

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

单击时按钮javascript:FetchCall()被调用:

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

JavaScript函数:

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

动作方法PersonController如下:

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

问题:如何call.Id在java脚本函数中选择？

---

编辑2

感谢Tommy的解决方案,我已经能够在下拉列表中阅读选择.问题是我得到的是下拉列表中写的内容,这是ToString()内部CallToMake类的结果.

功能:

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

我在下面的图片中显示下拉内容并提醒alert($("#CallsToMake").val());:

我想到的唯一解决方案是id在下拉列表中显示调用,然后在控制器操作中将其删除.听起来很糟糕,不是吗？

编辑3

该列表最终看起来像:

@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脚本:

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

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

正在调用Action方法,但我没有被重定向到任何地方.方法只是运行,就是这样.

Answer 1

首先,您需要构建SelectList使用接受a DataValueField和的重载TextValueField.参考文档.这可能看起来像

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

脚本(假设您onclick从按钮中删除属性)

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